Display user name in application header

matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx

@@ -3,13 +3,39 @@ import { useTheme } from "@mui/material/styles";
 import Toolbar from "@mui/material/Toolbar";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import * as React from "react";
-import { Outlet } from "react-router";
+import { Outlet, useNavigate } from "react-router";
 import DashboardHeader from "./DashboardHeader";
 import DashboardSidebar from "./DashboardSidebar";
+import { AuthApi, type UserInfo } from "../../api/AuthApi";
+import { AsyncWidget } from "../AsyncWidget";
+import { Button } from "@mui/material";
+import { useAuth } from "../../App";
+
+interface UserInfoContext {
+  info: UserInfo;
+  reloadUserInfo: () => void;
+  signOut: () => void;
+}
+
+const UserInfoContextK = React.createContext<UserInfoContext | null>(null);
 
 export default function BaseAuthenticatedPage(): React.ReactElement {
   const theme = useTheme();
 
+  const [userInfo, setuserInfo] = React.useState<null | UserInfo>(null);
+  const loadUserInfo = async () => {
+    setuserInfo(await AuthApi.GetUserInfo());
+  };
+
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  const signOut = () => {
+    AuthApi.SignOut();
+    navigate("/");
+    auth.setSignedIn(false);
+  };
+
   const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] =
     React.useState(false);
   const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] =
@@ -46,47 +72,71 @@ export default function BaseAuthenticatedPage(): React.ReactElement {
   const layoutRef = React.useRef<HTMLDivElement>(null);
 
   return (
-    <Box
-      ref={layoutRef}
-      sx={{
-        position: "relative",
-        display: "flex",
-        overflow: "hidden",
-        height: "100%",
-        width: "100%",
-      }}
-    >
-      <DashboardHeader
-        menuOpen={isNavigationExpanded}
-        onToggleMenu={handleToggleHeaderMenu}
-      />
-      <DashboardSidebar
-        expanded={isNavigationExpanded}
-        setExpanded={setIsNavigationExpanded}
-        container={layoutRef?.current ?? undefined}
-      />
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          flex: 1,
-          minWidth: 0,
-        }}
-      >
-        <Toolbar sx={{ displayPrint: "none" }} />
-        <Box
-          component="main"
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            flex: 1,
-            overflow: "auto",
-            padding: "50px",
+    <AsyncWidget
+      loadKey="1"
+      load={loadUserInfo}
+      errMsg="Failed to load user information!"
+      errAdditionalElement={() => (
+        <>
+          <Button onClick={signOut}>Sign out</Button>
+        </>
+      )}
+      build={() => (
+        <UserInfoContextK
+          value={{
+            info: userInfo!,
+            reloadUserInfo: loadUserInfo,
+            signOut,
           }}
         >
-          <Outlet />
-        </Box>
-      </Box>
-    </Box>
+          <Box
+            ref={layoutRef}
+            sx={{
+              position: "relative",
+              display: "flex",
+              overflow: "hidden",
+              height: "100%",
+              width: "100%",
+            }}
+          >
+            <DashboardHeader
+              menuOpen={isNavigationExpanded}
+              onToggleMenu={handleToggleHeaderMenu}
+            />
+            <DashboardSidebar
+              expanded={isNavigationExpanded}
+              setExpanded={setIsNavigationExpanded}
+              container={layoutRef?.current ?? undefined}
+            />
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                minWidth: 0,
+              }}
+            >
+              <Toolbar sx={{ displayPrint: "none" }} />
+              <Box
+                component="main"
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  flex: 1,
+                  overflow: "auto",
+                  padding: "50px",
+                }}
+              >
+                <Outlet />
+              </Box>
+            </Box>
+          </Box>
+        </UserInfoContextK>
+      )}
+    />
   );
 }
+
+export function userUserInfo(): UserInfoContext {
+  return React.use(UserInfoContextK)!;
+}