64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import * as React from "react";
|
|
import { Navigate } from "react-router-dom";
|
|
import { authTokenStorageHandlerInit } from "../components/storageHandler.ts";
|
|
|
|
import TilingItem from "../components/TilingItem.tsx";
|
|
import SettingButton from "../components/SettingButton.tsx";
|
|
import AccountSetting from "./settings/Account.tsx";
|
|
import SecuritySetting from "./settings/Security.tsx";
|
|
import NotFoundSetting from "./settings/NotFound.tsx";
|
|
|
|
function renderCurrentSetting(setting: string) {
|
|
switch (setting) {
|
|
case "Account":
|
|
return <AccountSetting></AccountSetting>;
|
|
case "Security":
|
|
return <SecuritySetting></SecuritySetting>;
|
|
default:
|
|
return <NotFoundSetting></NotFoundSetting>;
|
|
}
|
|
}
|
|
|
|
export default function Home() {
|
|
const settings = ["Account", "Security"];
|
|
const [currentSetting, setCurrentSetting] = React.useState(settings[0]);
|
|
/* Make object to pass by reference */
|
|
const currentSettingHook = {
|
|
currentSetting,
|
|
setCurrentSetting,
|
|
};
|
|
|
|
const authTokenStorageHandler = authTokenStorageHandlerInit();
|
|
|
|
if (!authTokenStorageHandler.authTokenValue) {
|
|
return <Navigate to="/home"></Navigate>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="standardHorizontalTilingGrid">
|
|
<TilingItem>
|
|
<div className="userSettings">
|
|
<div className="userSettingsList">
|
|
<p>USER SETTINGS</p>
|
|
<ul>
|
|
{settings.map((value, index) => (
|
|
<SettingButton
|
|
settingName={value}
|
|
currentSettingHook={currentSettingHook}
|
|
key={index}
|
|
></SettingButton>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<hr></hr>
|
|
<div className="currentSetting">
|
|
{renderCurrentSetting(currentSetting)}
|
|
</div>
|
|
</div>
|
|
</TilingItem>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|