Add UserProvider and put providers in single component

compendium-frontend/src/App.tsx

@@ -12,7 +12,7 @@ import { FilterSelection } from "./Schema";
 import SubOrganisation from "./pages/SubOrganisation";
 import ParentOrganisation from "./pages/ParentOrganisation";
 import ECProjects from "./pages/ECProjects";
-import SidebarProvider from "./helpers/SidebarProvider";
+import Providers from "./Providers";
 import PolicyPage from "./pages/Policy";
 
 
@@ -25,8 +25,8 @@ function App(): ReactElement {
   return (
     <div className="app">
       <Router>
-        <ExternalPageNavBar />
-        <SidebarProvider>
+        <Providers>
+          <ExternalPageNavBar />
           <Routes>
             <Route path="/budget" element={<BudgetPage filterSelection={filterSelection} setFilterSelection={setFilterSelection} />} />
             <Route path="/funding" element={<FundingSourcePage filterSelection={filterSelection} setFilterSelection={setFilterSelection} />} />
@@ -40,7 +40,8 @@ function App(): ReactElement {
             <Route path="/data" element={<CompendiumData />} />
             <Route path="*" element={<Landing />} />
           </Routes>
-        </SidebarProvider>
+        </Providers>
+
 
         <GeantFooter />
       </Router>

compendium-frontend/src/Providers.tsx

+import React, { ReactElement } from "react";
+
+import SidebarProvider from "./helpers/SidebarProvider";
+import UserProvider from "./shared/UserProvider";
+
+
+function Providers({ children }): ReactElement {
+    return (
+        <SidebarProvider>
+            <UserProvider>
+                {children}
+            </UserProvider>
+        </SidebarProvider>
+    );
+}
+
+export default Providers;

compendium-frontend/src/helpers/SidebarProvider.tsx

@@ -6,7 +6,7 @@ interface Props {
 
 const sidebarContext = createContext<{
     show: boolean;
-    toggle: React.Dispatch<any>;
+    toggle: () => void;
 }>({
     show: false,
     toggle: () => { }

compendium-frontend/src/shared/UserProvider.tsx

+import React, { createContext, useState, useEffect } from 'react';
+
+interface Props {
+    children: React.ReactNode;
+}
+
+interface User {
+    name: string,
+    email?: string,
+    permissions: {
+        admin: boolean,
+        active: boolean,
+    }
+}
+
+async function fetchUser(): Promise<User> {
+    const response = await fetch('/api/user');
+    const user = await response.json();
+    return user
+}
+
+const anonymousUser: User = { 'name': '', email: '', permissions: { admin: false, active: false } };
+
+const userContext = createContext<{
+    user: User;
+    logout: () => void;
+}>({
+    user: anonymousUser,
+    logout: () => { }
+});
+
+
+const UserProvider: React.FC<Props> = ({ children }) => {
+    const [user, setUser] = useState<User>(anonymousUser);
+
+    async function logoutUser() {
+        await fetch('/logout');
+        setUser(anonymousUser);
+    }
+
+    useEffect(() => {
+        fetchUser().then(user => {
+            setUser(user)
+        });
+    }, []);
+
+    return (
+        <userContext.Provider value={{ user, logout: logoutUser }}>
+            {children}
+        </userContext.Provider>
+    );
+};
+
+export { userContext };
+export default UserProvider;
\ No newline at end of file