Add authentication context (#54)

.vscode/settings.json

@@ -156,5 +156,8 @@
   "evenBetterToml.formatter.reorderArrays": true,
   "evenBetterToml.formatter.trailingNewline": true,
   // We like keeping TOML keys in a certain non-alphabetical order that feels more natural
-  "evenBetterToml.formatter.reorderKeys": false
+  "evenBetterToml.formatter.reorderKeys": false,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }

canopeum_frontend/.eslintrc.cjs

@@ -23,5 +23,6 @@ module.exports = {
     'no-autofix/no-relative-import-paths/no-relative-import-paths': 'off',
     // Using Bootraps directly without a React wrapper will cause us to have to add classes to React Components
     'react/forbid-component-props': 'off',
+    "react/display-name": [false, { "ignoreTranspilerName": false, "checkContextObjects": false }]
   },
 }

canopeum_frontend/src/App.tsx

@@ -11,21 +11,25 @@ import Map from './pages/Map';
 import MapSite from './pages/MapSite';
 import UserManagement from './pages/UserManagement';
 import Utilities from './pages/Utilities';
+import AuthenticationContextProvider from './components/context/AuthenticationContext';
 
 const App = () => (
-  <BrowserRouter>
-    <Navbar />
-    <Routes>
-      <Route element={<Home />} path="/home" />
-      <Route element={<Home />} path="/" />
-      <Route element={<Analytics />} path="/analytics" />
-      <Route element={<Map />} path="/map" />
-      <Route element={<MapSite />} path='/map/:siteId'/>
-      <Route element={<UserManagement />} path="/user-management" />
-      <Route element={<Login />} path="/login" />
-      <Route element={<Utilities />} path="/utilities" />
-    </Routes>
-  </BrowserRouter>
+  <AuthenticationContextProvider>
+    <BrowserRouter>
+      <Navbar />
+      <Routes>
+        <Route element={<Home />} path="/home" />
+        <Route element={<Home />} path="/" />
+        <Route element={<Analytics />} path="/analytics" />
+        <Route element={<Map />} path="/map" />
+        <Route element={<MapSite />} path='/map/:siteId' />
+        <Route element={<UserManagement />} path="/user-management" />
+        <Route element={<Login />} path="/login" />
+        <Route element={<Utilities />} path="/utilities" />
+      </Routes>
+    </BrowserRouter>
+  </AuthenticationContextProvider>
+
 );
 
 export default App;

canopeum_frontend/src/components/context/AuthenticationContext.tsx

@@ -0,0 +1,45 @@
+import type { FunctionComponent, ReactNode } from 'react';
+import { createContext, memo, useState } from 'react'
+
+export enum UserRole {
+  MegaAdmin = 'MegaAdmin',
+  MiniAdmin = 'MiniAdmin',
+  RegularUser = 'RegularUser',
+}
+
+type User = {
+  firstname: string
+  lastname: string,
+  email: string,
+  role: UserRole,
+  image: string
+}
+
+type IAuthenticationContext = {
+  authenticate: (user: User) => void
+  isAuthenticated: boolean
+  currentUser: User | undefined
+}
+
+export const AuthenticationContext = createContext<IAuthenticationContext>({
+  authenticate: (_: User) => { },
+  isAuthenticated: false,
+  currentUser: undefined
+});
+
+const AuthenticationContextProvider: FunctionComponent<{ readonly children?: ReactNode }> = memo((props) => {
+  const [user, setUser] = useState<User | undefined>(undefined)
+
+  const authenticate = (user: User) => setUser(user)
+
+  return <AuthenticationContext.Provider
+    value={{
+      currentUser: user,
+      isAuthenticated: user !== undefined,
+      authenticate,
+    }}>
+    {props.children}
+  </AuthenticationContext.Provider>
+})
+
+export default AuthenticationContextProvider

canopeum_frontend/src/pages/Home.tsx

@@ -31,23 +31,23 @@ const Home = () => {
         <div className="bg-white rounded-2 px-3 py-2">
           <h1>Home</h1>
           {isLoading
-? (
-            <p>Loading...</p>
-          )
-: error
-? (
-            <p>Error: {error.message}</p>
-          )
-: (
-            <div>
-              <p>Example request from API:</p>
-              <ul>
-                {data.map((item) => (
-                  <li key={item.id}>{item.name}</li>
-                ))}
-              </ul>
-            </div>
-          )}
+            ? (
+              <p>Loading...</p>
+            )
+            : error
+              ? (
+                <p>Error: {error.message}</p>
+              )
+              : (
+                <div>
+                  <p>Example request from API:</p>
+                  <ul>
+                    {data.map((item) => (
+                      <li key={item.id}>{item.name}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
         </div>
       </div>
     </div>