added state containers, user model, and the button for user menu

src/app/Header.tsx

@@ -5,6 +5,7 @@ import { makeStyles } from "@mui/styles";
 import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
 import { Link } from "react-router-dom";
 import { useThemeType } from "../hooks/useThemeType";
+import UserMenu from "../user/UserMenu";
 
 const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
@@ -53,10 +54,20 @@ const useStyles = makeStyles((theme: Theme) => ({
           height: "64px"
         }
     },
+    appBarRight: {
+        display: "flex",
+        flexDirection: "row",
+        marginLeft: theme.spacing(2),
+        marginRight: theme.spacing(1),
+        [theme.breakpoints.up("md")]: {
+            marginLeft: theme.spacing(3),
+            marginRight: theme.spacing(2)
+        }
+    },
 }));
 
 interface Props {
-    // toggleTheme: () => void;
+    toggleTheme: () => void;
     sideIsOpen: boolean;
     openSide: () => void;
     // teams: Team[];
@@ -65,7 +76,7 @@ interface Props {
 
 export default function Header(props: Props) {
 
-    const { sideIsOpen, openSide} = props;
+    const { sideIsOpen, openSide, toggleTheme } = props;
 
     const themeType = useThemeType();
     const classes = useStyles() 
@@ -95,6 +106,9 @@ export default function Header(props: Props) {
                         </div>
                     )}
                 </Box>
+                <Box className={classes.appBarRight}>
+                    <UserMenu toggleTheme={toggleTheme} />
+                </Box>
             </Toolbar>
         </AppBar>
     )

src/app/UserWrapper.tsx

@@ -8,7 +8,15 @@ import { or } from '../utils/types'
 import LoadingScreen from './LoadingScreen'
 import { pond } from "protobuf-ts/pond";
 import NavigationContainer from '../navigation/NavigationContainer'
+import { GlobalState, GlobalStateAction, StateProvider } from '../providers/StateContainer'
+import { User } from '../models/user'
 
+const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
+  return {
+    ...state,
+    [action.key]: action.value
+  };
+};
 
 export default function UserWrapper() {
   const [count, setCount] = useState(0)
@@ -18,6 +26,7 @@ export default function UserWrapper() {
   const hasFetched = useRef(false);
   const [user, setUser] = useState<pond.User | undefined>(undefined)
   const [message, setMessage] = useState("Loading user profile...")
+  const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
 
   let user_id = or(useAuth.user?.sub, "")
 
@@ -26,7 +35,15 @@ export default function UserWrapper() {
     setLoading(true)
     userAPI.getUser(user_id).then(resp => {
       setUser(resp)
+      setGlobal({
+        user: User.create(resp),
+        as: "",
+        showErrors: false,
+        userTeamPermissions: [],
+        backgroundTasksComplete: false
+      })
     }).catch(err => {
+      console.log(err.toString())
       if (err.toString().includes("CORS")) {
         setMessage("CORS error")
       } else {
@@ -34,8 +51,8 @@ export default function UserWrapper() {
       }
     })
     .finally(() => {
-        setLoading(false)
-        hasFetched.current = true;
+      setLoading(false)
+      hasFetched.current = true;
     })
   }, [])
   
@@ -44,24 +61,25 @@ export default function UserWrapper() {
     loadUser()
   }, [loading])
 
-  if (!user || loading) return (
+  if (!user || loading || !global) return (
     <LoadingScreen
       message={message}
     />
   )
 
   return (
-    <NavigationContainer>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-            <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-            <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
+    <StateProvider state={global} reducer={reducer}>
+      <NavigationContainer>
+        <div>
+          <a href="https://vitejs.dev" target="_blank">
+              <img src={viteLogo} className="logo" alt="Vite logo" />
+          </a>
+          <a href="https://react.dev" target="_blank">
+              <img src={reactLogo} className="logo react" alt="React logo" />
+          </a>
+        </div>
+        <h1>Vite + React</h1>
+        <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
             count is {count}
         </button>
@@ -71,6 +89,8 @@ export default function UserWrapper() {
         </div><p className="read-the-docs">
             Coming soon
         </p>
-    </NavigationContainer>
+      </NavigationContainer>
+    </StateProvider>
+    
   )
 }