83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { Box, Button } from "@mui/material";
|
|
import * as React from "react";
|
|
import { Outlet } from "react-router-dom";
|
|
import { AuthApi, AuthInfo } from "../api/AuthApi";
|
|
import { AsyncWidget } from "./AsyncWidget";
|
|
import { SolarEnergyAppBar } from "./SolarEnergyAppBar";
|
|
import { SolarEnergyNavList } from "./SolarEnergyNavList";
|
|
|
|
interface AuthInfoContext {
|
|
info: AuthInfo;
|
|
reloadAuthInfo: () => void;
|
|
}
|
|
|
|
const AuthInfoContextK = React.createContext<AuthInfoContext | null>(null);
|
|
|
|
export function BaseAuthenticatedPage(): React.ReactElement {
|
|
const [authInfo, setAuthInfo] = React.useState<null | AuthInfo>(null);
|
|
|
|
const signOut = () => {
|
|
AuthApi.SignOut();
|
|
};
|
|
|
|
const load = async () => {
|
|
setAuthInfo(await AuthApi.GetAuthInfo());
|
|
};
|
|
|
|
return (
|
|
<AsyncWidget
|
|
loadKey="1"
|
|
load={load}
|
|
errMsg="Failed to load user information!"
|
|
errAdditionalElement={() => (
|
|
<>
|
|
<Button onClick={signOut}>Sign out</Button>
|
|
</>
|
|
)}
|
|
build={() => (
|
|
<AuthInfoContextK.Provider
|
|
value={{
|
|
info: authInfo!,
|
|
reloadAuthInfo: load,
|
|
}}
|
|
>
|
|
<Box
|
|
component="div"
|
|
sx={{
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
backgroundColor: (theme) =>
|
|
theme.palette.mode === "light"
|
|
? theme.palette.grey[100]
|
|
: theme.palette.grey[900],
|
|
color: (theme) =>
|
|
theme.palette.mode === "light"
|
|
? theme.palette.grey[900]
|
|
: theme.palette.grey[100],
|
|
}}
|
|
>
|
|
<SolarEnergyAppBar onSignOut={signOut} />
|
|
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flex: "2",
|
|
}}
|
|
>
|
|
<SolarEnergyNavList />
|
|
<div style={{ flex: 1, display: "flex" }}>
|
|
<Outlet />
|
|
</div>
|
|
</Box>
|
|
</Box>
|
|
</AuthInfoContextK.Provider>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function useAuthInfo(): AuthInfoContext {
|
|
return React.useContext(AuthInfoContextK)!;
|
|
}
|