Cleaner header and hub

gui/rpk-gui/src/App.tsx

@@ -78,7 +78,7 @@ function App() {
                   <Route path="forgot-password" element={<ForgotPassword />} />
                   <Route path="update-password" element={<UpdatePassword />} />
                 </Route>
-                <Route index element={<><Header /><h1>HOME&nbsp;<Link to={"/auth/login"}>Login</Link></h1></>} />
+                <Route index element={<><Header /><h1>HOME&nbsp;</h1></>} />
               </Routes>
               <UnsavedChangesNotifier />
               <DocumentTitleHandler />

gui/rpk-gui/src/components/auth/Logout.tsx

@@ -1,7 +1,8 @@
+import { Button } from "@mui/material";
 import { useLogout } from "@refinedev/core";
 
 export const Logout = () => {
   const { mutate: logout } = useLogout();
 
-  return <button onClick={() => logout()} >Logout</button>;
+  return <Button onClick={() => logout()} >Logout</Button>;
 };

gui/rpk-gui/src/components/header/index.tsx

@@ -1,18 +1,21 @@
 import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
 import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
+import HubIcon from '@mui/icons-material/Hub';
+import { Button, Menu, MenuItem } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Avatar from "@mui/material/Avatar";
 import IconButton from "@mui/material/IconButton";
 import Stack from "@mui/material/Stack";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import React, { useContext } from "react";
+import { Link } from "react-router";
 import { useGetIdentity } from "@refinedev/core";
 import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from "@refinedev/mui";
-import React, { useContext } from "react";
 import { ColorModeContext } from "../../contexts/color-mode";
+import { FirmContext } from "../../contexts/FirmContext";
 import { Logout } from "../auth/Logout";
 import { IUser } from "../../interfaces";
-import { FirmContext } from "../../contexts/FirmContext";
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   sticky = true,
@@ -22,31 +25,37 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
 
   const { data: user } = useGetIdentity<IUser>();
 
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const openUserMenu = Boolean(anchorEl);
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  }
+  const handleCloseUserMenu = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <AppBar position={sticky ? "sticky" : "relative"}>
       <Toolbar>
         <Stack
           direction="row"
           width="100%"
-          justifyContent="flex-end"
+          justifyContent="space-between"
           alignItems="center"
         >
           <HamburgerMenu />
+          {currentFirm && (
+            <Link to={`/firm/${currentFirm.instance}/${currentFirm.firm}`} ><Typography variant="h4" >{currentFirm.instance}&nbsp;/&nbsp;{currentFirm.firm}</Typography></Link>
+          )}
+          {!currentFirm && (
+            <Link to="/" ><Typography variant="h4">Roleplay&nbsp;Contracts</Typography></Link>
+          )}
+          <Link to="/hub"><HubIcon /></Link>
           <Stack
             direction="row"
-            width="100%"
             justifyContent="flex-end"
             alignItems="center"
           >
-            <IconButton
-              color="inherit"
-              onClick={() => {
-                setMode();
-              }}
-            >
-              {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
-            </IconButton>
-
             {(user?.email) && (
               <Stack
                 direction="row"
@@ -54,7 +63,12 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
                 alignItems="center"
                 justifyContent="center"
               >
-                {user?.email && (
+                <Button
+                  id="user-menu-button"
+                  aria-controls={openUserMenu ? 'user-menu' : undefined}
+                  aria-haspopup="true"
+                  aria-expanded={openUserMenu ? 'true' : undefined}
+                  onClick={handleOpenUserMenu}>
                   <Typography
                     sx={{
                       display: {
@@ -65,12 +79,36 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
                     variant="subtitle2"
                   >
                     {user?.email}
-                  </Typography>
+                  </Typography>&nbsp;
-                )}
                   <Avatar src={"user?.avatar"} alt={user?.email} />
-                <Logout />
+                </Button>
+                <Menu
+                  id="user-menu"
+                  anchorEl={anchorEl}
+                  open={openUserMenu}
+                  onClose={handleCloseUserMenu}
+                  MenuListProps={{
+                    'aria-labelledby': 'user-menu-button',
+                  }}
+                >
+                  <MenuItem onClick={handleCloseUserMenu}><Logout /></MenuItem>
+                  <MenuItem onClick={handleCloseUserMenu}>
+                    <IconButton
+                      color="inherit"
+                      onClick={() => {
+                        setMode();
+                      }}
+                    >
+                      {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
+                    </IconButton>
+                  </MenuItem>
+                </Menu>
               </Stack>
             )}
+            {!user && (
+              <Link to="/auth/login"><Button>Login</Button></Link>
+            )}
+
           </Stack>
         </Stack>
       </Toolbar>

gui/rpk-gui/src/pages/firm/index.tsx

@@ -6,10 +6,10 @@ import { Header } from "../../components";
 export const FirmRoutes = () => {
   return (
     <>
-      <Header />
       <Routes>
         <Route path="/:instance/:firm/*" element={
           <FirmContextProvider>
+            <Header />
             <Routes>
               <Route index element={ <FirmHome /> } />
             </Routes>

gui/rpk-gui/src/pages/hub/index.tsx

@@ -21,17 +21,15 @@ export const HubRoutes = () => {
 };
 
 const HubHome = () => {
-  const { data: user, refetch } = useGetIdentity<IAuthUser>();
+  const { data: user } = useGetIdentity<IAuthUser>();
   const { data: list } = useList<IFirm>({resource: "hub/users/firms/", pagination: { mode: "off" }}, )
   if (user === undefined || list === undefined) {
     return <p>Loading</p>;
   }
-  console.log("list data: ", list);
   const ownedFirms = list.data;
   if (user === undefined || ownedFirms === undefined) {
     return <p>Loading</p>
   }
-  console.log("owned firms: ", ownedFirms);
   return (
     <div>
       <h1>HUB</h1>
@@ -41,6 +39,7 @@ const HubHome = () => {
              <li key={index}>{f.instance} / {f.firm}</li>
          ))}
       </ul>
+      <Link to="/hub/create-firm" ><Button>Create a new firm</Button></Link>
       <p>List of firm you're working at</p>
       <ul>
         {user.firms.map((f: IFirm, index) => (
@@ -49,8 +48,6 @@ const HubHome = () => {
              </li>
          ))}
       </ul>
-      <Link to="/hub/create-firm" ><Button>Create a new firm</Button></Link>
-      <Button onClick={() => refetch()}>Refresh</Button>
     </div>
   )
 }