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

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>
+    
   )
 }