Create home page

central_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -0,0 +1,82 @@
+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)!;
+}