From 0f4268bea97314b5ed7321bb9afda2cb70ea944a Mon Sep 17 00:00:00 2001
From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:45:51 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=90=20login=20context=20done?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                    | 32 ++++++++++++++++++++-----
 frontend/src/Login/Login.tsx            | 10 ++++++--
 frontend/src/UserContext/UserContext.ts | 20 ++++++++++++++--
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a8f951d..ed7db3c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -14,10 +14,10 @@ import { DiscordPage } from "./Settings/SettingsPage/DiscordPage/DiscordPage";
 import { Unauthenticated } from "./Unauthenticated/Unauthenticated";
 import { ProtectedRoute } from "./ProtectedRoute/ProtectedRoute";
 import { useEffect, useState } from "react";
-import { UserContext } from "./UserContext/UserContext";
+import { User, UserContext } from "./UserContext/UserContext";
 
 function App() {
-  const [user, setUser] = useState({});
+  const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
     fetch("http://localhost:5180/user", {
@@ -37,20 +37,40 @@ function App() {
 
   return (
     <BrowserRouter>
-      <UserContext.Provider value={user}>
+      <UserContext.Provider value={{ user, setUser }}>
         <div className="page">
           <Routes>
             <Route path="/" element={<HomePage />} />
             <Route path="/about" element={<AboutPage />} />
             <Route path="/timeline" element={<Calendar />} /> //
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/register" element={<RegisterPage />} />
+            <Route
+              path="/login"
+              element={
+                <ProtectedRoute
+                  isAuthenticated={user === null}
+                  fallback={<Navigate to="/settings/profile" />}
+                >
+                  <LoginPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/register"
+              element={
+                <ProtectedRoute
+                  isAuthenticated={user === null}
+                  fallback={<Navigate to="/settings/profile" />}
+                >
+                  <RegisterPage />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/settings"
               element={
                 // this propagates to all child routes
                 <ProtectedRoute
-                  isAuthenticated={user.id !== undefined}
+                  isAuthenticated={user !== null && user.id !== undefined}
                   fallback={<Navigate to="/login" />}
                 >
                   <Settings />
diff --git a/frontend/src/Login/Login.tsx b/frontend/src/Login/Login.tsx
index 6faac45..2db9c3c 100644
--- a/frontend/src/Login/Login.tsx
+++ b/frontend/src/Login/Login.tsx
@@ -3,9 +3,10 @@ import { AuthScreen } from "../AuthScreen/AuthScreen";
 import { TextInput, TextOptions } from "../TextInput/TextInput";
 import { UserCircleIcon } from "@heroicons/react/24/outline";
 import { LockClosedIcon } from "@heroicons/react/24/outline";
-import { useState, FormEvent } from "react";
+import { useState, FormEvent, useContext } from "react";
 import { Link, useNavigate } from "react-router";
 import { errorHandler, AuthError } from "../errorHandler";
+import { UserContext, User } from "../UserContext/UserContext";
 
 export default function LoginPage() {
   const [username, setUsername] = useState("");
@@ -13,6 +14,8 @@ export default function LoginPage() {
   const [error, setError] = useState<AuthError | undefined>(undefined);
   const [success, setSuccess] = useState<string | undefined>(undefined);
   const navigate = useNavigate();
+  const { setUser } = useContext(UserContext);
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const res = await fetch("http://localhost:5180/auth/login", {
@@ -30,12 +33,15 @@ export default function LoginPage() {
 
     if (!res.ok) {
       setError(errorHandler(json.error));
-    } else {
+    } else if (setUser) {
       setError(undefined);
+      setUser(json as User);
       setSuccess("Logged in successfully! Redirecting...");
       setTimeout(() => {
         navigate("/timeline");
       }, 1000);
+    } else {
+      setError(errorHandler("Couldn't update user object."));
     }
   }
 
diff --git a/frontend/src/UserContext/UserContext.ts b/frontend/src/UserContext/UserContext.ts
index 1d3afc4..29fde88 100644
--- a/frontend/src/UserContext/UserContext.ts
+++ b/frontend/src/UserContext/UserContext.ts
@@ -1,3 +1,19 @@
-import { createContext } from "react";
+import { createContext, Dispatch, SetStateAction } from "react";
 
-export const UserContext = createContext({});
+export interface User {
+  id: number;
+  username: string;
+  email: string;
+  dateJoined: string;
+  profilePicture: string | undefined;
+}
+
+export interface UserContextType {
+  user: User | null;
+  setUser: Dispatch<SetStateAction<User | null>> | undefined;
+}
+
+export const UserContext = createContext<UserContextType>({
+  user: null,
+  setUser: undefined,
+});