From def2b6150ae055a455fd3738ec3d16c7e57e6ab2 Mon Sep 17 00:00:00 2001
From: Vincent Bissonnette <vincent.bissonnette@beslogic.com>
Date: Sat, 23 Mar 2024 11:11:10 -0400
Subject: [PATCH] Add authentication context

---
 .vscode/settings.json                         |  5 ++-
 canopeum_frontend/.eslintrc.cjs               |  1 +
 canopeum_frontend/src/App.tsx                 | 27 +++++++-------
 .../context/AuthenticationContext.tsx         | 35 +++++++++++++++++++
 canopeum_frontend/src/pages/Home.tsx          | 34 +++++++++---------
 5 files changed, 72 insertions(+), 30 deletions(-)
 create mode 100644 canopeum_frontend/src/components/context/AuthenticationContext.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 16e4c3d23..b0e62c6f0 100644
--- a/.vscode/settings.json
+++ b/.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"
+  }
 }
diff --git a/canopeum_frontend/.eslintrc.cjs b/canopeum_frontend/.eslintrc.cjs
index 91dfbeb93..6dc4f52d9 100644
--- a/canopeum_frontend/.eslintrc.cjs
+++ b/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 }]
   },
 }
diff --git a/canopeum_frontend/src/App.tsx b/canopeum_frontend/src/App.tsx
index 0256407b1..8909e3445 100644
--- a/canopeum_frontend/src/App.tsx
+++ b/canopeum_frontend/src/App.tsx
@@ -10,20 +10,23 @@ import Login from './pages/Login';
 import Map from './pages/Map';
 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={<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={<UserManagement />} path="/user-management" />
+        <Route element={<Login />} path="/login" />
+        <Route element={<Utilities />} path="/utilities" />
+      </Routes>
+    </BrowserRouter>
+  </AuthenticationContextProvider>
 );
 
 export default App;
diff --git a/canopeum_frontend/src/components/context/AuthenticationContext.tsx b/canopeum_frontend/src/components/context/AuthenticationContext.tsx
new file mode 100644
index 000000000..39be3a747
--- /dev/null
+++ b/canopeum_frontend/src/components/context/AuthenticationContext.tsx
@@ -0,0 +1,35 @@
+import type { FunctionComponent, ReactNode } from 'react';
+import { createContext, memo, useState } from 'react'
+
+type User = {
+  name: 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
diff --git a/canopeum_frontend/src/pages/Home.tsx b/canopeum_frontend/src/pages/Home.tsx
index 0a4fa897a..6e446295c 100644
--- a/canopeum_frontend/src/pages/Home.tsx
+++ b/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>