revite/src/pages/settings/GenericSettings.tsx

import { ArrowBack, X, XCircle } from "@styled-icons/boxicons-regular";
import { Helmet } from "react-helmet";
import { Switch, useHistory, useParams } from "react-router-dom";

import styles from "./Settings.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";

import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";

import { ThemeContext } from "../../context/Theme";

import Category from "../../components/ui/Category";
import Header from "../../components/ui/Header";
import IconButton from "../../components/ui/IconButton";
import LineDivider from "../../components/ui/LineDivider";

import ButtonItem from "../../components/navigation/items/ButtonItem";
import { Children } from "../../types/Preact";

interface Props {
    pages: {
        category?: Children;
        divider?: boolean;
        id: string;
        icon: Children;
        title: Children;
        hideTitle?: boolean;
    }[];
    custom?: Children;
    children: Children;
    defaultPage: string;
    showExitButton?: boolean;
    switchPage: (to?: string) => void;
    category: "pages" | "channel_pages" | "server_pages";
}

export function GenericSettings({
    pages,
    switchPage,
    category,
    custom,
    children,
    defaultPage,
    showExitButton,
}: Props) {
    const history = useHistory();
    const theme = useContext(ThemeContext);
    const { page } = useParams<{ page: string }>();

    function exitSettings() {
        if (history.length > 0) {
            history.goBack();
        } else {
            history.push("/");
        }
    }

    useEffect(() => {
        function keyDown(e: KeyboardEvent) {
            if (e.key === "Escape") {
                exitSettings();
            }
        }

        document.body.addEventListener("keydown", keyDown);
        return () => document.body.removeEventListener("keydown", keyDown);
    }, []);

    return (
        <div className={styles.settings} data-mobile={isTouchscreenDevice}>
            <Helmet>
                <meta
                    name="theme-color"
                    content={
                        isTouchscreenDevice
                            ? theme["primary-header"]
                            : theme["secondary-background"]
                    }
                />
            </Helmet>
            {isTouchscreenDevice && (
                <Header placement="primary">
                    {typeof page === "undefined" ? (
                        <>
                            {showExitButton && (
                                <IconButton onClick={exitSettings}>
                                    <X size={24} />
                                </IconButton>
                            )}
                            <Text id="app.settings.title" />
                        </>
                    ) : (
                        <>
                            <IconButton onClick={() => switchPage()}>
                                <ArrowBack size={24} />
                            </IconButton>
                            <Text
                                id={`app.settings.${category}.${page}.title`}
                            />
                        </>
                    )}
                </Header>
            )}
            {(!isTouchscreenDevice || typeof page === "undefined") && (
                <div className={styles.sidebar}>
                    <div className={styles.container}>
                        {pages.map((entry, i) => (
                            <>
                                {entry.category && (
                                    <Category
                                        variant="uniform"
                                        text={entry.category}
                                    />
                                )}
                                <ButtonItem
                                    active={
                                        page === entry.id ||
                                        (i === 0 &&
                                            !isTouchscreenDevice &&
                                            typeof page === "undefined")
                                    }
                                    onClick={() => switchPage(entry.id)}
                                    compact>
                                    {entry.icon} {entry.title}
                                </ButtonItem>
                                {entry.divider && <LineDivider />}
                            </>
                        ))}
                        {custom}
                    </div>
                </div>
            )}
            {(!isTouchscreenDevice || typeof page === "string") && (
                <div className={styles.content}>
                    {!isTouchscreenDevice &&
                        !pages.find((x) => x.id === page && x.hideTitle) && (
                            <h1>
                                <Text
                                    id={`app.settings.${category}.${
                                        page ?? defaultPage
                                    }.title`}
                                />
                            </h1>
                        )}
                    <Switch>{children}</Switch>
                </div>
            )}
            {!isTouchscreenDevice && (
                <div className={styles.action}>
                    <IconButton onClick={exitSettings}>
                        <XCircle size={48} />
                    </IconButton>
                </div>
            )}
        </div>
    );
}