Create base main page

2023-06-09 11:19:40 +02:00
parent d55718f4de
commit 3ca941bd57
6 changed files with 166 additions and 1 deletions
--- a/geneit_app/src/widgets/BaseAuthenticatedPage.tsx
+++ b/geneit_app/src/widgets/BaseAuthenticatedPage.tsx
@ -0,0 +1,126 @@
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import { Alert, Button, CircularProgress, Grid } from "@mui/material";
+import AppBar from "@mui/material/AppBar";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import { User, UserApi } from "../api/UserApi";
+import { Outlet } from "react-router-dom";
+import SettingsIcon from "@mui/icons-material/Settings";
+
+export function BaseAuthenticatedPage(): React.ReactElement {
+  const [user, setUser] = React.useState<null | User>(null);
+  const [error, setError] = React.useState(false);
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  React.useEffect(() => {
+    const load = async () => {
+      if (error || user != null) return;
+      try {
+        const user = await UserApi.GetUserInfo();
+        setUser(user);
+      } catch (e) {
+        console.error(e);
+        setError(true);
+      }
+    };
+    load();
+  });
+
+  if (error)
+    return (
+      <div
+        style={{
+          height: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        <Alert
+          severity="error"
+          style={{ maxWidth: "300px", marginBottom: "10px" }}
+        >
+          Echec du chagement des informations utilisateur !
+        </Alert>
+
+        <a href="/">Réessayer</a>
+      </div>
+    );
+
+  if (user === null)
+    return (
+      <div
+        style={{
+          height: "100vh",
+          justifyContent: "center",
+          alignItems: "center",
+          display: "flex",
+        }}
+      >
+        <CircularProgress />
+      </div>
+    );
+
+  return (
+    <>
+      <AppBar position="fixed">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            GeneIT
+          </Typography>
+
+          <div>
+            <Button size="large" color="inherit">
+              {user.name}
+            </Button>
+
+            <Button
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <SettingsIcon />
+            </Button>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={handleClose}>Profil</MenuItem>
+              <MenuItem onClick={handleClose}>Déconnexion</MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <Outlet />
+    </>
+  );
+}