Tristan Yang
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
|
import StyledSettingContainer from "../../common/component/StyledSettingContainer";
|
|
import useNavs from "./navs";
|
|
import LogoutConfirmModal from "./LogoutConfirmModal";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
let pageFrom: string = "";
|
|
|
|
export default function Setting() {
|
|
const { t } = useTranslation();
|
|
const [searchParams] = useSearchParams();
|
|
const navs = useNavs();
|
|
const flattenNaves = navs.map(({ items }) => items).flat();
|
|
const { nav: navKey } = useParams();;
|
|
const [logoutConfirm, setLogoutConfirm] = useState(false);
|
|
const navigateTo = useNavigate();
|
|
pageFrom = pageFrom ? pageFrom : searchParams.get("f") || "/";
|
|
const close = () => {
|
|
navigateTo(pageFrom);
|
|
pageFrom = "";
|
|
};
|
|
|
|
const toggleLogoutConfirm = () => {
|
|
setLogoutConfirm((prev) => !prev);
|
|
};
|
|
|
|
const currNav = flattenNaves.find((n) => n.name == navKey);
|
|
|
|
return (
|
|
<>
|
|
<StyledSettingContainer
|
|
nav={currNav}
|
|
closeModal={close}
|
|
title={t("setting")}
|
|
navs={navs}
|
|
dangers={[{ title: t("action.logout"), handler: toggleLogoutConfirm }]}
|
|
>
|
|
{navKey ? currNav?.component : null}
|
|
</StyledSettingContainer>
|
|
{logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfirm} />}
|
|
</>
|
|
);
|
|
}
|