From 9dceab94a832def33ed8611564a1eb0f71ff148c Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 01/22] Trying to fix retained token bug

---
 frontend/src/App.jsx                          | 49 ++++++++++++++++---
 frontend/src/components/DashCardSet.jsx       |  5 +-
 frontend/src/components/DashTable.jsx         |  6 ++-
 frontend/src/components/EditModal.jsx         |  2 +
 frontend/src/components/Navigation.jsx        |  3 ++
 frontend/src/components/NewKit.jsx            |  3 ++
 frontend/src/components/NewKitItem.jsx        |  3 ++
 frontend/src/components/NewUser.jsx           |  3 ++
 frontend/src/components/auth/CurrentUser.jsx  | 11 +++--
 frontend/src/components/auth/Login.jsx        | 11 +++--
 frontend/src/components/auth/Logout.jsx       |  8 ++-
 .../src/components/pages/AdminDashboard.jsx   | 33 +++++++++++--
 frontend/src/components/pages/Contact.jsx     |  5 +-
 frontend/src/components/pages/Kits.jsx        | 17 +++----
 frontend/src/components/pages/RequestKit.jsx  |  5 +-
 frontend/src/main.jsx                         |  3 ++
 16 files changed, 132 insertions(+), 35 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5bf53a65..f6be4b72 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,5 @@
 import './App.css';
-import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
+import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
@@ -30,6 +30,7 @@ function App() {
   const [loggedIn, setLoggedIn] = useState();
   const [user, setUser] = useState(null);
   const [tokenExpiration, setTokenExpiration] = useState(null);
+  const navigate = useNavigate();
 
     // Method handles login state and token, checking for existence or expiration
   useEffect(() => {
@@ -49,7 +50,7 @@ function App() {
 
           // Notify 5 minutes before expiration
           if (timeUntilExpiration < 300000) {
-            alert("Your session is about to expire. Please save your work.");
+            alert("Your session will expire soon.");
           }
 
           // Set token expiration time in state
@@ -62,17 +63,23 @@ function App() {
           setLoggedIn(false);
           setUser(null);
           alert("Your session has expired. Please log in again.");
+          navigate('/login')
+          
         }
       } catch (error) {
         console.error('Token decoding failed:', error);
         localStorage.removeItem('jwt');
         setLoggedIn(false);
         setUser(null);
+        navigate('/');
+
       }
     } else {
       // No token, set to logged out state
       setLoggedIn(false);
       setUser(null);
+      navigate('/')
+      alert("A network error occurred. You have been logged out.")
     }
   }, []);
 
@@ -85,31 +92,58 @@ function App() {
         setLoggedIn(false);
         setUser(null);
         alert("Your session has expired. Please log in again.");
+        navigate('/login');
       }, tokenExpiration); 
 
       return () => clearTimeout(timer); 
     }
   }, [tokenExpiration]);
 
+  const checkToken = async () => {
+    try {
+      const response = await fetch(userUrl, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('jwt')}`,
+        },
+      });
+  
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data);
+      } else {
+        console.log("No user logged in.");
+        setUser(null);
+        setLoggedIn(false);
+        localStorage.removeItem('jwt');
+        const error = await response.json();
+        console.log(error);
+      }
+    } catch (error) {
+      console.error("Error fetching current user");
+      setUser(null);
+      setLoggedIn(false);
+      localStorage.removeItem('jwt');
+    }
+  };
+
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-      <Router>
         <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
           <ScrollToHash/>
            <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact user={user} />} />
+            <Route path="/contact" element={<Contact user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
             <Route path="/kits" element={<Kits user={user} setUser={setUser} />} />
-            <Route path="/kit_requests" element={<RequestKit user={user} setUser={setUser} />} />
+            <Route path="/kit_requests" element={<RequestKit user={user} setUser={setUser} setLoggedIn={setLoggedIn} />} />
             <Route path="/registration" element={<Registration />} />
             <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
             <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user}/>} />
+            <Route path="/donation" element={<Donation user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} /> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} setLoggedIn={setLoggedIn} setUser={setUser}/> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
@@ -118,7 +152,6 @@ function App() {
             </Route>
           </Routes>
         </PageWrapper>
-      </Router>
     </div>
   </>
   );
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index 12a60d34..7dea7e1a 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
 
-const DashCardSet = () => {
+const DashCardSet = ({ setUser, setLoggedIn }) => {
   const [userCount, setUserCount] = useState(0);
   const [kitRequestCount, setKitRequestCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -29,6 +29,9 @@ const DashCardSet = () => {
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index 74023b28..dfb5475b 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
-const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,6 +28,10 @@ const DashTable = ({ apiEndpoint, headers, handleShow }) => {
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
+        alert("A network error occurred.")
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/components/EditModal.jsx b/frontend/src/components/EditModal.jsx
index 4c6f36d6..f056312b 100644
--- a/frontend/src/components/EditModal.jsx
+++ b/frontend/src/components/EditModal.jsx
@@ -96,6 +96,8 @@ if (selectedImage) {
         console.log(`${recordType} updated successfully!`);
         alert(`${recordType} updated successfully!`);
         handleClose(); // Close the modal after success
+    } else {
+      alert("An error occurred with the update.")
     }
     };
 
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index ebc64a7e..54d0dbc7 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -13,6 +13,9 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         navigate("/login")
     } else {
         // If user is logged in, navigate to the donation page
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index a8147166..3dc34fe1 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -68,6 +68,9 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index 5f10f24b..864b7a67 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -60,6 +60,9 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index af035d08..37f112d2 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -65,6 +65,9 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
   
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 2fa29326..2cfc7e45 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -21,16 +21,21 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
                 } else {
                     console.log("No user logged in.")
                     setUser(null);
-                    const error = await response.json()
+                    setLoggedIn(false);
+                    localStorage.removeItem('jwt');
+                    const error = await response.json();
                     console.log(error)
                 }
             } catch (error) {
                 console.error("Error fetching current user");
+                setUser(null);
+                setLoggedIn(false);
+                localStorage.removeItem('jwt');
             }
         }};
 
         fetchUser();
-    }, [setLoggedIn, user, setUser, userUrl]);
+    }, [setLoggedIn, user, setUser ]);
     // Stretch Goal: Add admin dashboard
     if (!user) return null;
 
@@ -40,7 +45,7 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
             <p className='text-white bold' style={{ marginRight: 100 }}>
             <em>Welcome, {user.first_name}!</em>
             </p>
-            {user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
+            {user && user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
                 </Link>}
         </div>
     );
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index 4d63c8f4..e2f11b80 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -52,7 +52,6 @@ export default function Login({setLoggedIn}) {
       if (jwt) {
         // Store the JWT in local storage 
         localStorage.setItem('jwt', jwt.split(' ')[1]);
-        console.log(localStorage.getItem('jwt'));
       }
 
           console.log("Login successful!");
@@ -69,7 +68,10 @@ export default function Login({setLoggedIn}) {
         } else {
           // Handle registration error
           const errorData = await response.json();
-          setLoginMessages(errorData.status.message || "Login failed");
+          setLoginMessages('Login failed. Please check your credentials and try again.');
+          setLoggedIn(false);
+          setUserData(null);
+          localStorage.removeItem('jwt');
           
 
       // Access the status and message in the JSON response
@@ -79,7 +81,10 @@ export default function Login({setLoggedIn}) {
      } catch (error) {
         // Handle other errors
         console.log("An error occurred:", error)
-        setLoginMessages(error)
+        setLoginMessages("Unable to connect to the server. Please try again later.");
+        setUserData(null);
+        setLoggedIn(false);
+        localStorage.removeItem("jwt");
       }
     };
   
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index 51c1e5aa..ebdd8f43 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -55,15 +55,19 @@ export default function Logout({ setLoggedIn, setUser }) {
         const message = response.json();
         setErrorMessage(message.error.message);
         console.error(errorMessage);
-        alert("Your session has expired, please sign in again.");
+        localStorage.removeItem("jwt");
         setLoggedIn(false);
         setUser(null);
-        navigate("/login")
+        navigate("/login");
+        alert("Your session has expired, please sign in again.");
 
     }
 
     } catch (error) {
         console.error("An error occurred:", error.message);
+        localStorage.removeItem("jwt");
+        setUser(null);
+        setLoggedIn(false);
         alert(error.message)
     }
     
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index 0e8bf23b..ccb21edb 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -8,7 +8,7 @@ import DataEndpoint from "../DataEndpoint";
 import DashTable from "../DashTable";
 import EditModal from "../EditModal";
 
-const AdminDashboard = ({ user }) => {
+const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
   // Necessary api endpoints
   const userUrl = `${API_URL}/users`;
   const kitsUrl = `${API_URL}/kits`;
@@ -141,6 +141,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -148,6 +150,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -155,6 +159,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitRequestsTable = () => (
@@ -162,6 +168,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.kitRequestsUrl}
       apiEndpoint={kitRequestsUrl}
       handleShow={(item) => handleShow(item, "kitRequest")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const DonationsTable = () => (
@@ -169,6 +177,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -176,6 +186,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
 
@@ -207,7 +219,7 @@ const AdminDashboard = ({ user }) => {
   }, [selectedEndpoint]);
   
 
-  if (user.role !== "admin") {
+  if (!user || user.role !== "admin") {
     return (
       <section className="page-section">
         <div>
@@ -216,7 +228,6 @@ const AdminDashboard = ({ user }) => {
       </section>
     );
   }
-  console.log("selectedEndpoint:", selectedEndpoint);
 
   return (
     // Displays cards, graph data, and Data tables
@@ -231,7 +242,7 @@ const AdminDashboard = ({ user }) => {
         >
           
           <a className="navbar-brand text-uppercase text-white">
-          <i class="bi bi-graph-up text-white me-3"></i> Admin Dashboard
+          <i className="bi bi-graph-up text-white me-3"></i> Admin Dashboard
           </a>
           
         </div>
@@ -278,7 +289,7 @@ const AdminDashboard = ({ user }) => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet />
+          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -310,6 +321,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.userUrl}
                             apiEndpoint={userUrl}
                             handleShow={(item) => handleShow(item, "user")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitsUrl && (
@@ -317,6 +330,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -324,6 +339,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitRequestsUrl && (
@@ -333,6 +350,8 @@ const AdminDashboard = ({ user }) => {
                             handleShow={(item) =>
                               handleShow(item, "kitRequest")
                             }
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -340,6 +359,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -347,6 +368,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 41f1f012..d20b4228 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../constants';
 
 
-function Contact({ user }) {
+function Contact({ user, setLoggedIn, setUser }) {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phone, setPhone] = useState("");
@@ -58,6 +58,9 @@ function Contact({ user }) {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
+            setLoggedIn(false);
+            setUser(null);
+            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index 117edf21..b7155e45 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -22,7 +22,6 @@ function Kits({user, setUser}) {
         const response = await fetch(kitsUrl);
         if (response.ok) {
           const json = await response.json();
-          console.log("Fetched kits data:", json);
           setKits(json);
         } else {
           throw response;
@@ -30,6 +29,9 @@ function Kits({user, setUser}) {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
@@ -79,13 +81,9 @@ function Kits({user, setUser}) {
             {error && <p>{error}</p>}
 
             <div className="row d-flex p-2">
-              {kits.map(
-                (
-                  kit // Map through the list of kits
-                ) => (
-                  <>
-                    <div className="col-lg-6 col-sm-6 mb-4">
-                      <div className="portfolio-item" key={kit.id}>
+              {kits.map(kit => (
+                    <div className="col-lg-6 col-sm-6 mb-4" key={kit.id}>
+                      <div className="portfolio-item">
                         <a
                           className="portfolio-link"
                           data-bs-toggle="modal"
@@ -121,7 +119,7 @@ function Kits({user, setUser}) {
                         <div
                           className="portfolio-modal modal fade"
                           id={`portfolioModal${kit.id}`}
-                          tabindex="-1"
+                          tabIndex="-1"
                           role="dialog"
                           aria-hidden="true"
                           key={kit.id}
@@ -227,7 +225,6 @@ function Kits({user, setUser}) {
                         </div>
                       </div>
                     </div>
-                  </>
                 )
               )}
             </div>
diff --git a/frontend/src/components/pages/RequestKit.jsx b/frontend/src/components/pages/RequestKit.jsx
index 1bbe6d26..86d3cb08 100644
--- a/frontend/src/components/pages/RequestKit.jsx
+++ b/frontend/src/components/pages/RequestKit.jsx
@@ -3,7 +3,7 @@ import { API_URL, API_URL2 } from "../../constants";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Link } from "react-router-dom";
 
-function RequestKit({ user }) {
+function RequestKit({ user, setLoggedIn, setUser }) {
   const location = useLocation();
   const kitId = location.state?.kitId || "";
 
@@ -88,6 +88,9 @@ function RequestKit({ user }) {
       // Handle network or other errors
       setRequestMessages("An error occurred: " + error.message);
       console.log(error);
+      setLoggedIn(false);
+      setUser(null);
+      localStorage.removeItem('jwt');
     }
   };
 
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 89f91e54..4041256c 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
+    <Router>
     <App />
+    </Router>
   </StrictMode>,
 )

From 7ca8f4219ab2f1bad2d685c170f057210677255d Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 02/22] Trying to fix retained token bug

---
 frontend/src/App.jsx                          | 45 ++++++++++++++++---
 frontend/src/components/DashCardSet.jsx       |  5 ++-
 frontend/src/components/DashTable.jsx         |  6 ++-
 frontend/src/components/EditModal.jsx         |  2 +
 frontend/src/components/Navigation.jsx        |  3 ++
 frontend/src/components/NewKit.jsx            |  3 ++
 frontend/src/components/NewKitItem.jsx        |  3 ++
 frontend/src/components/NewUser.jsx           |  3 ++
 frontend/src/components/auth/CurrentUser.jsx  | 11 +++--
 frontend/src/components/auth/Login.jsx        | 11 +++--
 frontend/src/components/auth/Logout.jsx       |  8 +++-
 .../src/components/pages/AdminDashboard.jsx   | 31 ++++++++++---
 frontend/src/components/pages/Contact.jsx     |  5 ++-
 frontend/src/components/pages/Kits.jsx        | 17 +++----
 frontend/src/main.jsx                         |  3 ++
 15 files changed, 124 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 094ac6e4..c77d24f3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,5 @@
 import './App.css';
-import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
+import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
@@ -30,6 +30,7 @@ function App() {
   const [loggedIn, setLoggedIn] = useState();
   const [user, setUser] = useState(null);
   const [tokenExpiration, setTokenExpiration] = useState(null);
+  const navigate = useNavigate();
 
     // Method handles login state and token, checking for existence or expiration
   useEffect(() => {
@@ -49,7 +50,7 @@ function App() {
 
           // Notify 5 minutes before expiration
           if (timeUntilExpiration < 300000) {
-            alert("Your session is about to expire. Please save your work.");
+            alert("Your session will expire soon.");
           }
 
           // Set token expiration time in state
@@ -62,17 +63,23 @@ function App() {
           setLoggedIn(false);
           setUser(null);
           alert("Your session has expired. Please log in again.");
+          navigate('/login')
+          
         }
       } catch (error) {
         console.error('Token decoding failed:', error);
         localStorage.removeItem('jwt');
         setLoggedIn(false);
         setUser(null);
+        navigate('/');
+
       }
     } else {
       // No token, set to logged out state
       setLoggedIn(false);
       setUser(null);
+      navigate('/')
+      alert("A network error occurred. You have been logged out.")
     }
   }, []);
 
@@ -85,17 +92,44 @@ function App() {
         setLoggedIn(false);
         setUser(null);
         alert("Your session has expired. Please log in again.");
+        navigate('/login');
       }, tokenExpiration); 
 
       return () => clearTimeout(timer); 
     }
   }, [tokenExpiration]);
 
+  const checkToken = async () => {
+    try {
+      const response = await fetch(userUrl, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('jwt')}`,
+        },
+      });
+  
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data);
+      } else {
+        console.log("No user logged in.");
+        setUser(null);
+        setLoggedIn(false);
+        localStorage.removeItem('jwt');
+        const error = await response.json();
+        console.log(error);
+      }
+    } catch (error) {
+      console.error("Error fetching current user");
+      setUser(null);
+      setLoggedIn(false);
+      localStorage.removeItem('jwt');
+    }
+  };
+
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-      <Router>
         <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
           <ScrollToHash/>
            <Routes>
@@ -107,9 +141,9 @@ function App() {
             <Route path="/registration" element={<Registration />} />
             <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
             <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user}/>} />
+            <Route path="/donation" element={<Donation user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} /> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} setLoggedIn={setLoggedIn} setUser={setUser}/> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
@@ -118,7 +152,6 @@ function App() {
             </Route>
           </Routes>
         </PageWrapper>
-      </Router>
     </div>
   </>
   );
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index aa0faf7b..dc04877b 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
 
-const DashCardSet = () => {
+const DashCardSet = ({ setUser, setLoggedIn }) => {
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -29,6 +29,9 @@ const DashCardSet = () => {
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index 74023b28..dfb5475b 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
-const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,6 +28,10 @@ const DashTable = ({ apiEndpoint, headers, handleShow }) => {
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
+        alert("A network error occurred.")
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/components/EditModal.jsx b/frontend/src/components/EditModal.jsx
index e60c09a7..76b4abbe 100644
--- a/frontend/src/components/EditModal.jsx
+++ b/frontend/src/components/EditModal.jsx
@@ -103,6 +103,8 @@ if (recordType === 'user') {
         console.log(`${recordType} updated successfully!`);
         alert(`${recordType} updated successfully!`);
         handleClose(); // Close the modal after success
+    } else {
+      alert("An error occurred with the update.")
     }
     };
 
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index ebc64a7e..54d0dbc7 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -13,6 +13,9 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         navigate("/login")
     } else {
         // If user is logged in, navigate to the donation page
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index a8147166..3dc34fe1 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -68,6 +68,9 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index 5f10f24b..864b7a67 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -60,6 +60,9 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index af035d08..37f112d2 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -65,6 +65,9 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
   
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 2fa29326..2cfc7e45 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -21,16 +21,21 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
                 } else {
                     console.log("No user logged in.")
                     setUser(null);
-                    const error = await response.json()
+                    setLoggedIn(false);
+                    localStorage.removeItem('jwt');
+                    const error = await response.json();
                     console.log(error)
                 }
             } catch (error) {
                 console.error("Error fetching current user");
+                setUser(null);
+                setLoggedIn(false);
+                localStorage.removeItem('jwt');
             }
         }};
 
         fetchUser();
-    }, [setLoggedIn, user, setUser, userUrl]);
+    }, [setLoggedIn, user, setUser ]);
     // Stretch Goal: Add admin dashboard
     if (!user) return null;
 
@@ -40,7 +45,7 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
             <p className='text-white bold' style={{ marginRight: 100 }}>
             <em>Welcome, {user.first_name}!</em>
             </p>
-            {user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
+            {user && user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
                 </Link>}
         </div>
     );
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index 4d63c8f4..e2f11b80 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -52,7 +52,6 @@ export default function Login({setLoggedIn}) {
       if (jwt) {
         // Store the JWT in local storage 
         localStorage.setItem('jwt', jwt.split(' ')[1]);
-        console.log(localStorage.getItem('jwt'));
       }
 
           console.log("Login successful!");
@@ -69,7 +68,10 @@ export default function Login({setLoggedIn}) {
         } else {
           // Handle registration error
           const errorData = await response.json();
-          setLoginMessages(errorData.status.message || "Login failed");
+          setLoginMessages('Login failed. Please check your credentials and try again.');
+          setLoggedIn(false);
+          setUserData(null);
+          localStorage.removeItem('jwt');
           
 
       // Access the status and message in the JSON response
@@ -79,7 +81,10 @@ export default function Login({setLoggedIn}) {
      } catch (error) {
         // Handle other errors
         console.log("An error occurred:", error)
-        setLoginMessages(error)
+        setLoginMessages("Unable to connect to the server. Please try again later.");
+        setUserData(null);
+        setLoggedIn(false);
+        localStorage.removeItem("jwt");
       }
     };
   
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index 51c1e5aa..ebdd8f43 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -55,15 +55,19 @@ export default function Logout({ setLoggedIn, setUser }) {
         const message = response.json();
         setErrorMessage(message.error.message);
         console.error(errorMessage);
-        alert("Your session has expired, please sign in again.");
+        localStorage.removeItem("jwt");
         setLoggedIn(false);
         setUser(null);
-        navigate("/login")
+        navigate("/login");
+        alert("Your session has expired, please sign in again.");
 
     }
 
     } catch (error) {
         console.error("An error occurred:", error.message);
+        localStorage.removeItem("jwt");
+        setUser(null);
+        setLoggedIn(false);
         alert(error.message)
     }
     
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index 7fabe22c..9e68bfb2 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -8,7 +8,7 @@ import DataEndpoint from "../DataEndpoint";
 import DashTable from "../DashTable";
 import EditModal from "../EditModal";
 
-const AdminDashboard = ({ user }) => {
+const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
   // Necessary api endpoints
   const userUrl = `${API_URL}/users`;
   const kitsUrl = `${API_URL}/kits`;
@@ -143,6 +143,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -150,6 +152,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -157,6 +161,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -171,6 +177,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -178,6 +186,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
 
@@ -209,7 +219,7 @@ const AdminDashboard = ({ user }) => {
   }, [selectedEndpoint]);
   
 
-  if (user.role !== "admin") {
+  if (!user || user.role !== "admin") {
     return (
       <section className="page-section">
         <div>
@@ -218,7 +228,6 @@ const AdminDashboard = ({ user }) => {
       </section>
     );
   }
-  console.log("selectedEndpoint:", selectedEndpoint);
 
   return (
     // Displays cards, graph data, and Data tables
@@ -233,7 +242,7 @@ const AdminDashboard = ({ user }) => {
         >
           
           <a className="navbar-brand text-uppercase text-white">
-          <i class="bi bi-graph-up text-white me-3"></i> Admin Dashboard
+          <i className="bi bi-graph-up text-white me-3"></i> Admin Dashboard
           </a>
           
         </div>
@@ -280,7 +289,7 @@ const AdminDashboard = ({ user }) => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet />
+          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -312,6 +321,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.userUrl}
                             apiEndpoint={userUrl}
                             handleShow={(item) => handleShow(item, "user")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitsUrl && (
@@ -319,6 +330,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -326,6 +339,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -335,6 +350,8 @@ const AdminDashboard = ({ user }) => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -342,6 +359,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -349,6 +368,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 41f1f012..d20b4228 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../constants';
 
 
-function Contact({ user }) {
+function Contact({ user, setLoggedIn, setUser }) {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phone, setPhone] = useState("");
@@ -58,6 +58,9 @@ function Contact({ user }) {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
+            setLoggedIn(false);
+            setUser(null);
+            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index 1cadc79a..b40254d4 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -21,7 +21,6 @@ function Kits({user}) {
         const response = await fetch(kitsUrl);
         if (response.ok) {
           const json = await response.json();
-          console.log("Fetched kits data:", json);
           setKits(json);
         } else {
           throw response;
@@ -29,6 +28,9 @@ function Kits({user}) {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
@@ -78,13 +80,9 @@ function Kits({user}) {
             {error && <p>{error}</p>}
 
             <div className="row d-flex p-2">
-              {kits.map(
-                (
-                  kit // Map through the list of kits
-                ) => (
-                  <>
-                    <div className="col-lg-6 col-sm-6 mb-4">
-                      <div className="portfolio-item" key={kit.id}>
+              {kits.map(kit => (
+                    <div className="col-lg-6 col-sm-6 mb-4" key={kit.id}>
+                      <div className="portfolio-item">
                         <a
                           className="portfolio-link"
                           data-bs-toggle="modal"
@@ -120,7 +118,7 @@ function Kits({user}) {
                         <div
                           className="portfolio-modal modal fade"
                           id={`portfolioModal${kit.id}`}
-                          tabindex="-1"
+                          tabIndex="-1"
                           role="dialog"
                           aria-hidden="true"
                           key={kit.id}
@@ -226,7 +224,6 @@ function Kits({user}) {
                         </div>
                       </div>
                     </div>
-                  </>
                 )
               )}
             </div>
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 89f91e54..4041256c 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
+    <Router>
     <App />
+    </Router>
   </StrictMode>,
 )

From f9dd3cf8ef59d9406ede9ba1c2f76308134c46e4 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:23:37 -0600
Subject: [PATCH 03/22] Handle jwt auth and state management with AuthContext

---
 frontend/src/App.jsx                          | 115 ++----------------
 frontend/src/components/DashCardSet.jsx       |  14 ++-
 frontend/src/components/DashTable.jsx         |  10 +-
 frontend/src/components/Navigation.jsx        |  15 ++-
 frontend/src/components/NewKit.jsx            |  14 +--
 frontend/src/components/NewKitItem.jsx        |   9 +-
 frontend/src/components/NewUser.jsx           |   8 +-
 frontend/src/components/PageWrapper.jsx       |  11 +-
 frontend/src/components/auth/CurrentUser.jsx  |  40 +-----
 frontend/src/components/auth/Login.jsx        |  22 ++--
 frontend/src/components/auth/Logout.jsx       |  31 ++---
 frontend/src/components/auth/Registration.jsx |  11 +-
 .../src/components/pages/AdminDashboard.jsx   |  32 +----
 .../src/components/pages/Confirmation.jsx     |   7 +-
 frontend/src/components/pages/Contact.jsx     |  20 ++-
 frontend/src/components/pages/Donation.jsx    |  19 ++-
 frontend/src/components/pages/Home.jsx        |   1 -
 frontend/src/components/pages/Kits.jsx        |  12 +-
 frontend/src/components/pages/RequestKit.jsx  |  16 +--
 frontend/src/main.jsx                         |   5 +-
 20 files changed, 109 insertions(+), 303 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c77d24f3..5f8175f0 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,5 @@
 import './App.css';
+import { useContext } from 'react';
 import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
@@ -21,129 +22,33 @@ import NewUser from './components/NewUser';
 import AddNew from './components/pages/AddNew';
 import NewKitItem from './components/NewKitItem';
 import AddItemToKit from './components/AddItemToKit';
+import { AuthContext } from './components/auth/AuthContext';
 
 
 
 
 
 function App() {
-  const [loggedIn, setLoggedIn] = useState();
-  const [user, setUser] = useState(null);
-  const [tokenExpiration, setTokenExpiration] = useState(null);
-  const navigate = useNavigate();
-
-    // Method handles login state and token, checking for existence or expiration
-  useEffect(() => {
-    const token = localStorage.getItem('jwt');
-
-    if (token) {
-      try {
-        const decoded = jwtDecode(token);
-        const now = Date.now() / 1000; // Current time in seconds
-
-        if (decoded.exp > now) {
-          setLoggedIn(true); // Token is valid
-          setUser(decoded.user ? decoded.user : null); // Set user data
-
-          // Calculate remaining time until token expiration
-          const timeUntilExpiration = (decoded.exp - now) * 1000;
-
-          // Notify 5 minutes before expiration
-          if (timeUntilExpiration < 300000) {
-            alert("Your session will expire soon.");
-          }
-
-          // Set token expiration time in state
-          setTokenExpiration(timeUntilExpiration);
-
-        } else {
-          // Token is expired, clear it
-          console.log("Token has expired, clearing JWT.");
-          localStorage.removeItem('jwt');
-          setLoggedIn(false);
-          setUser(null);
-          alert("Your session has expired. Please log in again.");
-          navigate('/login')
-          
-        }
-      } catch (error) {
-        console.error('Token decoding failed:', error);
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        navigate('/');
-
-      }
-    } else {
-      // No token, set to logged out state
-      setLoggedIn(false);
-      setUser(null);
-      navigate('/')
-      alert("A network error occurred. You have been logged out.")
-    }
-  }, []);
-
-  // Logs out the user when the token expires
-  useEffect(() => {
-    if (tokenExpiration) {
-      const timer = setTimeout(() => {
-        console.log("Token has expired, logging out.");
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        alert("Your session has expired. Please log in again.");
-        navigate('/login');
-      }, tokenExpiration); 
-
-      return () => clearTimeout(timer); 
-    }
-  }, [tokenExpiration]);
-
-  const checkToken = async () => {
-    try {
-      const response = await fetch(userUrl, {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('jwt')}`,
-        },
-      });
-  
-      if (response.ok) {
-        const data = await response.json();
-        setUser(data);
-      } else {
-        console.log("No user logged in.");
-        setUser(null);
-        setLoggedIn(false);
-        localStorage.removeItem('jwt');
-        const error = await response.json();
-        console.log(error);
-      }
-    } catch (error) {
-      console.error("Error fetching current user");
-      setUser(null);
-      setLoggedIn(false);
-      localStorage.removeItem('jwt');
-    }
-  };
+  const { loggedIn, user } = useContext(AuthContext);
 
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-        <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
+        <PageWrapper>                   
           <ScrollToHash/>
            <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact user={user} />} />
-            <Route path="/kits" element={<Kits user={user} />} />
-            <Route path="/orders" element={<RequestKit user={user} setUser={setUser} />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/kits" element={<Kits />} />
+            <Route path="/orders" element={<RequestKit />} />
             <Route path="/registration" element={<Registration />} />
-            <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
+            <Route path="/login" element={<Login />}/>
             <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
+            <Route path="/donation" element={<Donation />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} setLoggedIn={setLoggedIn} setUser={setUser}/> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index dc04877b..ef33db19 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
-const DashCardSet = ({ setUser, setLoggedIn }) => {
+const DashCardSet = () => {
+  const { logout } = useContext(AuthContext);
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -26,17 +28,17 @@ const DashCardSet = ({ setUser, setLoggedIn }) => {
           setTotalDonations(parseFloat(data.total_donations));
         } else {
           console.error('Failed to fetch data:', response.statusText);
+          logout();
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
+        alert("An error occurred.")
+        logout();
       }
     };
 
     fetchDashboardData();
-  }, []);
+  }, [dashUrl, logout]);
 
   return (
     // Displays data using the dashboard card component
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index dfb5475b..d04c2f34 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from './auth/AuthContext';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
-const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) => {
+const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+  const { logout } = useContext(AuthContext);
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,9 +30,7 @@ const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) =
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
+        logout();
         alert("A network error occurred.")
       } finally {
         setLoading(false);
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index 54d0dbc7..83ebe82c 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -1,10 +1,12 @@
-import React from "react"
+import React, { useContext } from "react"
 import { Link, useNavigate } from "react-router-dom";
 import CurrentUser from "./auth/CurrentUser";
 import Logout from "./auth/Logout";
+import { AuthContext } from "./auth/AuthContext";
 
 // Passed in logged in and user state
-function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
+function Navigation() {
+   const { loggedIn, user, logout } = useContext(AuthContext);
    const navigate = useNavigate();
    const handleDonateClick = (e) => {
     e.preventDefault(); 
@@ -13,10 +15,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
-        navigate("/login")
+        logout();
     } else {
         // If user is logged in, navigate to the donation page
         navigate("/donation");
@@ -35,7 +34,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
                     <ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                         {loggedIn && (
                         <>
-                        <li className="nav-item"><span className="nav-link"><CurrentUser setLoggedIn={setLoggedIn} setUser={setUser} user={user} /></span></li>
+                        <li className="nav-item"><span className="nav-link"><CurrentUser /></span></li>
 
                         </>
                         )}
@@ -51,7 +50,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
                         
                         {loggedIn ? (
                             <>
-                            <li><Logout setLoggedIn={setLoggedIn} setUser={setUser} /></li>
+                            <li><Logout /></li>
                             </>
                         ) : (
                             <>                            
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index 3dc34fe1..b1c5e842 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 // Component for creating a new kit
 const NewKit = () => {
+  const { logout } = useContext(AuthContext);
   const [image, setImage] = useState('');
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -50,12 +52,6 @@ const NewKit = () => {
           
           console.log("New Kit added successfully!");
           alert("New Kit added successfully!");
-    
-          // Clear input fields
-          setName("");
-          setDescription("");
-          setGradeLevel("");
-          setImage('');
           // Redirect to admin page
           navigate("/admin");
         } else {
@@ -68,9 +64,7 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index 864b7a67..def04ae0 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewKitItem = () => {
-  
+  const { logout } = useContext(AuthContext);
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [image, setImage] = useState(null);
@@ -60,9 +61,7 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index 37f112d2..84718b1f 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL2 } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewUser = () => {
+  const { logout } = useContext(AuthContext);
   const [userData, setUserData] = useState("");
   const [email, setEmail] = useState(''); 
   const [password, setPassword] = useState(''); 
@@ -65,9 +67,7 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
       }
     };
   
diff --git a/frontend/src/components/PageWrapper.jsx b/frontend/src/components/PageWrapper.jsx
index 566a649f..8745b0bc 100644
--- a/frontend/src/components/PageWrapper.jsx
+++ b/frontend/src/components/PageWrapper.jsx
@@ -2,16 +2,17 @@ import React from 'react'
 import Navigation from './Navigation';
 import Footer from './Footer';
 
-// Passed in the content for the middle of the page as children and the logged in and user state. Navbar and footer displayed on every page.
-const PageWrapper = ({children, loggedIn, setLoggedIn, setUser, user }) => (
+// Passed in the content for the middle of the page as children. Navbar and footer displayed on every page.
+const PageWrapper = ({children }) => {
 
-    
+    return (
     <div id="page-top">
-    <Navigation loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user} />
+    <Navigation />
     {children}     
     <Footer/>
     </div>
+    );
   
-);
+};
 
 export default PageWrapper;
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 2cfc7e45..13e1be97 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -1,42 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { API_URL2 } from '../../constants';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { AuthContext } from './AuthContext';
 
-const CurrentUser = ({ setLoggedIn, setUser, user }) => {
+const CurrentUser = () => {
+    const { user } = useContext(AuthContext);
     
-    const userUrl = `${API_URL2}/current_user`
-    // Fetches the current user whenever someone logs in
-    useEffect(() => {
-        const fetchUser = async () => {
-            if(!user) {
-            try {
-                const response = await fetch(userUrl, {
-                    headers: {
-                        Authorization: `Bearer ${localStorage.getItem('jwt')}`,
-                    },
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    setUser(data);
-                } else {
-                    console.log("No user logged in.")
-                    setUser(null);
-                    setLoggedIn(false);
-                    localStorage.removeItem('jwt');
-                    const error = await response.json();
-                    console.log(error)
-                }
-            } catch (error) {
-                console.error("Error fetching current user");
-                setUser(null);
-                setLoggedIn(false);
-                localStorage.removeItem('jwt');
-            }
-        }};
-
-        fetchUser();
-    }, [setLoggedIn, user, setUser ]);
-    // Stretch Goal: Add admin dashboard
     if (!user) return null;
 
     return (
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index e2f11b80..ded15b7d 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -1,14 +1,15 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { API_URL2 } from "../../constants";
 import { Link } from "react-router-dom";
 import CurrentUser from "./CurrentUser";
+import { AuthContext } from "./AuthContext";
 
 
 
-
-export default function Login({setLoggedIn}) {
+export default function Login() {
     // Handles login, setting the data for the user
+    const { setLoggedIn, logout } = useContext(AuthContext);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     
@@ -58,20 +59,13 @@ export default function Login({setLoggedIn}) {
           
           setLoggedIn(true);
           <CurrentUser />
-                                
-        // Clear input fields
-        setEmail("");
-        setPassword("");
-        
   
           navigate("/")
         } else {
           // Handle registration error
           const errorData = await response.json();
           setLoginMessages('Login failed. Please check your credentials and try again.');
-          setLoggedIn(false);
-          setUserData(null);
-          localStorage.removeItem('jwt');
+          logout();
           
 
       // Access the status and message in the JSON response
@@ -81,10 +75,8 @@ export default function Login({setLoggedIn}) {
      } catch (error) {
         // Handle other errors
         console.log("An error occurred:", error)
-        setLoginMessages("Unable to connect to the server. Please try again later.");
-        setUserData(null);
-        setLoggedIn(false);
-        localStorage.removeItem("jwt");
+        setLoginMessages("An error occurred, please try again.");
+        logout();
       }
     };
   
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index ebdd8f43..e1fddc85 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { API_URL2 } from "../../constants";
 import { jwtDecode } from 'jwt-decode';
 import { useNavigate } from "react-router-dom";
+import { AuthContext } from "./AuthContext";
 
-export default function Logout({ setLoggedIn, setUser }) {
+export default function Logout() {
+  const { setLoggedIn, setUser, logout } = useContext(AuthContext);
   const [errorMessage, setErrorMessage] = useState("");
   const navigate = useNavigate();
 
@@ -12,13 +14,10 @@ export default function Logout({ setLoggedIn, setUser }) {
   const handleLogout = async () => {
     const logoutUrl = `${API_URL2}/logout`
     const jwt = localStorage.getItem('jwt');
-    console.log(jwt)
 
     if (!jwt) {
       alert('You are already logged out or your session has expired.');
-      setLoggedIn(false);
-      setUser(null);
-      navigate('/login')
+      logout();
       return;
     }
 
@@ -30,9 +29,7 @@ export default function Logout({ setLoggedIn, setUser }) {
 
       if (decoded.exp < now) {
         alert('Your session has expired. Please log in again.');
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        navigate('/login');
+        logout();
         return;
       }
         const response = await fetch(logoutUrl, {
@@ -45,29 +42,21 @@ export default function Logout({ setLoggedIn, setUser }) {
 
       if (response.ok) {
         alert('Logged out successfully.');
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
+        logout();
         
         console.log("Logout successful.")
 
       } else {
         const message = response.json();
-        setErrorMessage(message.error.message);
-        console.error(errorMessage);
-        localStorage.removeItem("jwt");
-        setLoggedIn(false);
-        setUser(null);
-        navigate("/login");
+        console.error(message.error.message);
+        logout();
         alert("Your session has expired, please sign in again.");
 
     }
 
     } catch (error) {
         console.error("An error occurred:", error.message);
-        localStorage.removeItem("jwt");
-        setUser(null);
-        setLoggedIn(false);
+        logout();
         alert(error.message)
     }
     
diff --git a/frontend/src/components/auth/Registration.jsx b/frontend/src/components/auth/Registration.jsx
index 153538be..baaeab62 100644
--- a/frontend/src/components/auth/Registration.jsx
+++ b/frontend/src/components/auth/Registration.jsx
@@ -57,16 +57,7 @@ export default function Registration() {
         // Handle successful registration (e.g., redirect to another page)
         console.log("Registration successful!");
         setRegistrationMessages("Registration successful!");
-
-
-        // Clear input fields
-        setEmail("");
-        setPassword("");
-        // Removed name field and added firstName and lastName field
-        setFirstName("");
-        setLastName("");
-
-
+        
         navigate("/login");
       } else {
         // Handle registration error
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index 9e68bfb2..cae8ec99 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useContext } from "react";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import SampleChart from "../SampleChart";
 import SampleChartThree from "../SampleChartThree";
@@ -7,8 +7,10 @@ import { API_URL, API_URL2,ADMIN_URL } from "../../constants";
 import DataEndpoint from "../DataEndpoint";
 import DashTable from "../DashTable";
 import EditModal from "../EditModal";
+import { AuthContext } from "../auth/AuthContext";
 
-const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
+const AdminDashboard = () => {
+  const { user, setLoggedIn, setUser } = useContext(AuthContext);
   // Necessary api endpoints
   const userUrl = `${API_URL}/users`;
   const kitsUrl = `${API_URL}/kits`;
@@ -143,8 +145,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -152,8 +152,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -161,8 +159,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -177,8 +173,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -186,8 +180,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
 
@@ -289,7 +281,7 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
+          <DashCardSet />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -321,17 +313,13 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.userUrl}
                             apiEndpoint={userUrl}
                             handleShow={(item) => handleShow(item, "user")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
-                          />
+                            />
                         )}
                         {selectedEndpoint === kitsUrl && (
                           <DashTable
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -339,8 +327,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -350,8 +336,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -359,8 +343,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -368,8 +350,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Confirmation.jsx b/frontend/src/components/pages/Confirmation.jsx
index 6187dd27..6a38a145 100644
--- a/frontend/src/components/pages/Confirmation.jsx
+++ b/frontend/src/components/pages/Confirmation.jsx
@@ -1,9 +1,10 @@
-import React, {useEffect} from "react";
-import { API_URL } from "../../constants";
+import React, {useContext, useEffect} from "react";
+import { AuthContext } from "../auth/AuthContext";
 
 
 
-function Confirmation({user}) {
+function Confirmation() {
+    const { user } = useContext(AuthContext);
     // Displays confirmation for kit request success
     const current_user = user?.name || "Guest";
 
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index d20b4228..922590f5 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -1,15 +1,18 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../constants';
+import { AuthContext } from '../auth/AuthContext';
 
 
-function Contact({ user, setLoggedIn, setUser }) {
+function Contact() {
+    const { user } = useContext(AuthContext);
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phone, setPhone] = useState("");
     const [message, setMessage] = useState("");
     const [errorMessages, setErrorMessages] = useState("");
     const contactUrl = `${API_URL}/contacts`
+    const navigate = useNavigate();
 
     useEffect(() => {
         window.scrollTo(0, 0);
@@ -46,21 +49,12 @@ function Contact({ user, setLoggedIn, setUser }) {
                 const errorData = await response.json();
                 setErrorMessages(errorData.errors.join(", "));
             } else {
-                // Handle success, clear the form
-                // Added code to clear first and last name
-                console.log(response.json)
-                setName("");
-                setEmail("");
-                setPhone("");
-                setMessage("");
-                setErrorMessages("");
+                // Handle success
                 alert("Contact submitted successfully!");
+                navigate("/")
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
-            setLoggedIn(false);
-            setUser(null);
-            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Donation.jsx b/frontend/src/components/pages/Donation.jsx
index 4376e575..3f81aaa3 100644
--- a/frontend/src/components/pages/Donation.jsx
+++ b/frontend/src/components/pages/Donation.jsx
@@ -1,8 +1,11 @@
-import React, {useState, useEffect } from "react"
+import React, {useState, useEffect, useContext } from "react"
 import { API_URL } from "../../constants"
 import { useNavigate } from "react-router-dom"
+import { AuthContext } from "../auth/AuthContext";
+import Logout from "../auth/Logout";
 
-function Donation({user}) {
+function Donation() {
+    const { user, logout } = useContext(AuthContext);
     // Add useState for first name and last name
     const [errorMessages, setErrorMessages] = useState("");
     const [firstName, setFirstName] = useState(user ? user.first_name : "");
@@ -62,7 +65,8 @@ function Donation({user}) {
         if (!jwt) {
           console.log("No user logged in. Please log in to continue.");
           // Redirect to login
-          navigate('/login')
+          logout();
+          alert("Your token has expired. Please login again.")
           return;
       }
     
@@ -83,14 +87,6 @@ function Donation({user}) {
         console.log("Donation saved.");
         alert("Donation submitted successfully. Thank you for your donation!")
 
-        // Clear input fields
-                
-        setAmount("");
-        setCardNumber("");
-        setExpirationDate("");
-        setCvv("");
-        setSavePaymentInfo(false);
-
         navigate("/")
       } else {
         // Handle request error
@@ -102,6 +98,7 @@ function Donation({user}) {
       // Handle network or other errors
       setErrorMessages("An error occurred: " + error.message);
       console.log(error)
+      logout();
     }
 
         
diff --git a/frontend/src/components/pages/Home.jsx b/frontend/src/components/pages/Home.jsx
index 22c3e822..2bd8b118 100644
--- a/frontend/src/components/pages/Home.jsx
+++ b/frontend/src/components/pages/Home.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import React from 'react'
 import Header from '../Header';
 import { Link } from 'react-router-dom';
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index b40254d4..409aa0c4 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { API_URL } from "../../constants";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
+import { AuthContext } from "../auth/AuthContext";
 
-
-function Kits({user}) {
+function Kits() {
+  const { user, setUser } = useContext(AuthContext);
   const [kits, setKits] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,9 +29,6 @@ function Kits({user}) {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/components/pages/RequestKit.jsx b/frontend/src/components/pages/RequestKit.jsx
index 48fa14ae..961ea531 100644
--- a/frontend/src/components/pages/RequestKit.jsx
+++ b/frontend/src/components/pages/RequestKit.jsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { API_URL } from "../../constants";
 import { useLocation, useNavigate } from "react-router-dom";
+import { AuthContext } from "../auth/AuthContext";
 import * as Yup from "yup";
 
 
-function RequestKit({ user }) {
-
+function RequestKit() {
+  const { user, logout } = useContext(AuthContext);
   const validationSchema = Yup.object().shape({
     phone: Yup.string().required('Phone is required'),
     schoolAddress: Yup.string().required('School address is required'),
@@ -54,14 +55,6 @@ function RequestKit({ user }) {
         comments: orderForm.comments,
       },
     };
-    
-    if (!jwt) {
-      console.log("No user logged in. Please log in to continue.");
-      // Redirect to login
-      navigate("/login");
-      return;
-    }
-
 
     try {
       // Send POST request to registration endpoint
@@ -100,6 +93,7 @@ function RequestKit({ user }) {
       } else {
         // Handle network or other errors
         setOrderMessages({general: "Network error: " + error.message});
+        logout();
       }
       console.error(error);
     }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 4041256c..25de00ef 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,12 +2,15 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
+import { AuthProvider } from './components/auth/AuthContext.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <Router>
-    <App />
+      <AuthProvider>
+        <App />
+      </AuthProvider>
     </Router>
   </StrictMode>,
 )

From d264f79bdb60690cabf2086f4e6dbeb168dd5cea Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:25:41 -0600
Subject: [PATCH 04/22] Add AuthContext

---
 frontend/src/components/auth/AuthContext.jsx | 73 ++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 frontend/src/components/auth/AuthContext.jsx

diff --git a/frontend/src/components/auth/AuthContext.jsx b/frontend/src/components/auth/AuthContext.jsx
new file mode 100644
index 00000000..ab57c0f4
--- /dev/null
+++ b/frontend/src/components/auth/AuthContext.jsx
@@ -0,0 +1,73 @@
+import React, { createContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { jwtDecode } from 'jwt-decode';
+import { API_URL2 } from '../../constants';
+
+export const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [user, setUser] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = localStorage.getItem('jwt');
+      if (token) {
+        try {
+            console.log('Token:', token); // Debugging: Log the token
+            const decoded = jwtDecode(token);
+            console.log('Decoded token:', decoded); // Debugging: Log the decoded token
+          const now = Date.now() / 1000;
+
+          if (decoded.exp > now) {
+            const response = await fetch(`${API_URL2}/current_user`, {
+              headers: {
+                Authorization: `Bearer ${token}`,
+              },
+            });
+
+            if (response.ok) {
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                  const data = await response.json();
+                  setUser(data);
+                  setLoggedIn(true);
+                } else {
+                  throw new Error('Invalid response format');
+                }
+            } else {
+              handleUnauthorized();
+            }
+          } else {
+            handleUnauthorized();
+          }
+        } catch (error) {
+          console.error('Token decoding failed:', error);
+          handleUnauthorized();
+        }
+      } else {
+        handleUnauthorized();
+      }
+    };
+
+    const handleUnauthorized = () => {
+      logout();
+    };
+
+    checkAuth();
+  }, [navigate]);
+
+  const logout = () => {
+    setLoggedIn(false);
+    setUser(null);
+    localStorage.removeItem('jwt');
+    navigate("/login");
+  };
+
+  return (
+    <AuthContext.Provider value={{ loggedIn, user, setLoggedIn, setUser, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
\ No newline at end of file

From 57a911b7f071de880e0a5aaebd3d69829e0514a7 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:56:32 -0600
Subject: [PATCH 05/22] Corrected bug from rebase and conflict merge

---
 frontend/src/App.jsx  | 2 +-
 frontend/src/main.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 807e9799..d536ae85 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
 import './App.css';
 import { useContext } from 'react';
-import {BrowserRouter as Routes, Route, Navigate } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 25de00ef..1585f524 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -13,4 +13,4 @@ createRoot(document.getElementById('root')).render(
       </AuthProvider>
     </Router>
   </StrictMode>,
-)
+);

From cc13f7ef29a0096df6b66d4a48a145d3a786a98f Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:57:56 -0600
Subject: [PATCH 06/22] Remove debug code

---
 frontend/src/components/auth/AuthContext.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/auth/AuthContext.jsx b/frontend/src/components/auth/AuthContext.jsx
index ab57c0f4..5f3b67d1 100644
--- a/frontend/src/components/auth/AuthContext.jsx
+++ b/frontend/src/components/auth/AuthContext.jsx
@@ -15,9 +15,7 @@ export const AuthProvider = ({ children }) => {
       const token = localStorage.getItem('jwt');
       if (token) {
         try {
-            console.log('Token:', token); // Debugging: Log the token
-            const decoded = jwtDecode(token);
-            console.log('Decoded token:', decoded); // Debugging: Log the decoded token
+          const decoded = jwtDecode(token);
           const now = Date.now() / 1000;
 
           if (decoded.exp > now) {

From 35e4b4bb85e1ed9e924cb646e7ccb1ae92693680 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 07/22] Trying to fix retained token bug

---
 frontend/src/App.jsx                          | 45 ++++++++++++++++---
 frontend/src/components/DashCardSet.jsx       |  5 ++-
 frontend/src/components/DashTable.jsx         |  6 ++-
 frontend/src/components/EditModal.jsx         |  2 +
 frontend/src/components/Navigation.jsx        |  3 ++
 frontend/src/components/NewKit.jsx            |  3 ++
 frontend/src/components/NewKitItem.jsx        |  3 ++
 frontend/src/components/NewUser.jsx           |  3 ++
 frontend/src/components/auth/CurrentUser.jsx  | 11 +++--
 frontend/src/components/auth/Login.jsx        | 11 +++--
 frontend/src/components/auth/Logout.jsx       |  8 +++-
 .../src/components/pages/AdminDashboard.jsx   | 31 ++++++++++---
 frontend/src/components/pages/Contact.jsx     |  5 ++-
 frontend/src/components/pages/Kits.jsx        | 17 +++----
 frontend/src/main.jsx                         |  3 ++
 15 files changed, 124 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 094ac6e4..c77d24f3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,5 @@
 import './App.css';
-import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
+import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
@@ -30,6 +30,7 @@ function App() {
   const [loggedIn, setLoggedIn] = useState();
   const [user, setUser] = useState(null);
   const [tokenExpiration, setTokenExpiration] = useState(null);
+  const navigate = useNavigate();
 
     // Method handles login state and token, checking for existence or expiration
   useEffect(() => {
@@ -49,7 +50,7 @@ function App() {
 
           // Notify 5 minutes before expiration
           if (timeUntilExpiration < 300000) {
-            alert("Your session is about to expire. Please save your work.");
+            alert("Your session will expire soon.");
           }
 
           // Set token expiration time in state
@@ -62,17 +63,23 @@ function App() {
           setLoggedIn(false);
           setUser(null);
           alert("Your session has expired. Please log in again.");
+          navigate('/login')
+          
         }
       } catch (error) {
         console.error('Token decoding failed:', error);
         localStorage.removeItem('jwt');
         setLoggedIn(false);
         setUser(null);
+        navigate('/');
+
       }
     } else {
       // No token, set to logged out state
       setLoggedIn(false);
       setUser(null);
+      navigate('/')
+      alert("A network error occurred. You have been logged out.")
     }
   }, []);
 
@@ -85,17 +92,44 @@ function App() {
         setLoggedIn(false);
         setUser(null);
         alert("Your session has expired. Please log in again.");
+        navigate('/login');
       }, tokenExpiration); 
 
       return () => clearTimeout(timer); 
     }
   }, [tokenExpiration]);
 
+  const checkToken = async () => {
+    try {
+      const response = await fetch(userUrl, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('jwt')}`,
+        },
+      });
+  
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data);
+      } else {
+        console.log("No user logged in.");
+        setUser(null);
+        setLoggedIn(false);
+        localStorage.removeItem('jwt');
+        const error = await response.json();
+        console.log(error);
+      }
+    } catch (error) {
+      console.error("Error fetching current user");
+      setUser(null);
+      setLoggedIn(false);
+      localStorage.removeItem('jwt');
+    }
+  };
+
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-      <Router>
         <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
           <ScrollToHash/>
            <Routes>
@@ -107,9 +141,9 @@ function App() {
             <Route path="/registration" element={<Registration />} />
             <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
             <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user}/>} />
+            <Route path="/donation" element={<Donation user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} /> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} setLoggedIn={setLoggedIn} setUser={setUser}/> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
@@ -118,7 +152,6 @@ function App() {
             </Route>
           </Routes>
         </PageWrapper>
-      </Router>
     </div>
   </>
   );
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index aa0faf7b..dc04877b 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
 
-const DashCardSet = () => {
+const DashCardSet = ({ setUser, setLoggedIn }) => {
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -29,6 +29,9 @@ const DashCardSet = () => {
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index 74023b28..dfb5475b 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
-const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,6 +28,10 @@ const DashTable = ({ apiEndpoint, headers, handleShow }) => {
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
+        alert("A network error occurred.")
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/components/EditModal.jsx b/frontend/src/components/EditModal.jsx
index e60c09a7..76b4abbe 100644
--- a/frontend/src/components/EditModal.jsx
+++ b/frontend/src/components/EditModal.jsx
@@ -103,6 +103,8 @@ if (recordType === 'user') {
         console.log(`${recordType} updated successfully!`);
         alert(`${recordType} updated successfully!`);
         handleClose(); // Close the modal after success
+    } else {
+      alert("An error occurred with the update.")
     }
     };
 
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index ebc64a7e..54d0dbc7 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -13,6 +13,9 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         navigate("/login")
     } else {
         // If user is logged in, navigate to the donation page
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index a8147166..3dc34fe1 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -68,6 +68,9 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index 5f10f24b..864b7a67 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -60,6 +60,9 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index af035d08..37f112d2 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -65,6 +65,9 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
   
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 2fa29326..2cfc7e45 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -21,16 +21,21 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
                 } else {
                     console.log("No user logged in.")
                     setUser(null);
-                    const error = await response.json()
+                    setLoggedIn(false);
+                    localStorage.removeItem('jwt');
+                    const error = await response.json();
                     console.log(error)
                 }
             } catch (error) {
                 console.error("Error fetching current user");
+                setUser(null);
+                setLoggedIn(false);
+                localStorage.removeItem('jwt');
             }
         }};
 
         fetchUser();
-    }, [setLoggedIn, user, setUser, userUrl]);
+    }, [setLoggedIn, user, setUser ]);
     // Stretch Goal: Add admin dashboard
     if (!user) return null;
 
@@ -40,7 +45,7 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
             <p className='text-white bold' style={{ marginRight: 100 }}>
             <em>Welcome, {user.first_name}!</em>
             </p>
-            {user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
+            {user && user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
                 </Link>}
         </div>
     );
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index 4d63c8f4..e2f11b80 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -52,7 +52,6 @@ export default function Login({setLoggedIn}) {
       if (jwt) {
         // Store the JWT in local storage 
         localStorage.setItem('jwt', jwt.split(' ')[1]);
-        console.log(localStorage.getItem('jwt'));
       }
 
           console.log("Login successful!");
@@ -69,7 +68,10 @@ export default function Login({setLoggedIn}) {
         } else {
           // Handle registration error
           const errorData = await response.json();
-          setLoginMessages(errorData.status.message || "Login failed");
+          setLoginMessages('Login failed. Please check your credentials and try again.');
+          setLoggedIn(false);
+          setUserData(null);
+          localStorage.removeItem('jwt');
           
 
       // Access the status and message in the JSON response
@@ -79,7 +81,10 @@ export default function Login({setLoggedIn}) {
      } catch (error) {
         // Handle other errors
         console.log("An error occurred:", error)
-        setLoginMessages(error)
+        setLoginMessages("Unable to connect to the server. Please try again later.");
+        setUserData(null);
+        setLoggedIn(false);
+        localStorage.removeItem("jwt");
       }
     };
   
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index 739312a6..ca2b9b2f 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -56,15 +56,19 @@ export default function Logout({ setLoggedIn, setUser }) {
         const message = response.json();
         setErrorMessage(message.error.message);
         console.error(errorMessage);
-        alert("Your session has expired, please sign in again.");
+        localStorage.removeItem("jwt");
         setLoggedIn(false);
         setUser(null);
-        navigate("/login")
+        navigate("/login");
+        alert("Your session has expired, please sign in again.");
 
     }
 
     } catch (error) {
         console.error("An error occurred:", error.message);
+        localStorage.removeItem("jwt");
+        setUser(null);
+        setLoggedIn(false);
         alert(error.message)
     }
     
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index 7fabe22c..9e68bfb2 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -8,7 +8,7 @@ import DataEndpoint from "../DataEndpoint";
 import DashTable from "../DashTable";
 import EditModal from "../EditModal";
 
-const AdminDashboard = ({ user }) => {
+const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
   // Necessary api endpoints
   const userUrl = `${API_URL}/users`;
   const kitsUrl = `${API_URL}/kits`;
@@ -143,6 +143,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -150,6 +152,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -157,6 +161,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -171,6 +177,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -178,6 +186,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
 
@@ -209,7 +219,7 @@ const AdminDashboard = ({ user }) => {
   }, [selectedEndpoint]);
   
 
-  if (user.role !== "admin") {
+  if (!user || user.role !== "admin") {
     return (
       <section className="page-section">
         <div>
@@ -218,7 +228,6 @@ const AdminDashboard = ({ user }) => {
       </section>
     );
   }
-  console.log("selectedEndpoint:", selectedEndpoint);
 
   return (
     // Displays cards, graph data, and Data tables
@@ -233,7 +242,7 @@ const AdminDashboard = ({ user }) => {
         >
           
           <a className="navbar-brand text-uppercase text-white">
-          <i class="bi bi-graph-up text-white me-3"></i> Admin Dashboard
+          <i className="bi bi-graph-up text-white me-3"></i> Admin Dashboard
           </a>
           
         </div>
@@ -280,7 +289,7 @@ const AdminDashboard = ({ user }) => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet />
+          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -312,6 +321,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.userUrl}
                             apiEndpoint={userUrl}
                             handleShow={(item) => handleShow(item, "user")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitsUrl && (
@@ -319,6 +330,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -326,6 +339,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -335,6 +350,8 @@ const AdminDashboard = ({ user }) => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -342,6 +359,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -349,6 +368,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 1118910e..1c5390d9 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../constants';
 
 
-function Contact({ user }) {
+function Contact({ user, setLoggedIn, setUser }) {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phone, setPhone] = useState("");
@@ -52,6 +52,9 @@ function Contact({ user }) {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
+            setLoggedIn(false);
+            setUser(null);
+            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index a9791132..765b0c54 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -21,7 +21,6 @@ function Kits({user}) {
         const response = await fetch(kitsUrl);
         if (response.ok) {
           const json = await response.json();
-          console.log("Fetched kits data:", json);
           setKits(json);
         } else {
           throw response;
@@ -29,6 +28,9 @@ function Kits({user}) {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
@@ -64,13 +66,9 @@ function Kits({user}) {
             {error && <p>{error}</p>}
 
             <div className="row d-flex p-2">
-              {kits.map(
-                (
-                  kit // Map through the list of kits
-                ) => (
-                  <>
-                    <div className="col-lg-6 col-sm-6 mb-4">
-                      <div className="portfolio-item" key={kit.id}>
+              {kits.map(kit => (
+                    <div className="col-lg-6 col-sm-6 mb-4" key={kit.id}>
+                      <div className="portfolio-item">
                         <a
                           className="portfolio-link"
                           data-bs-toggle="modal"
@@ -115,7 +113,7 @@ function Kits({user}) {
                         <div
                           className="portfolio-modal modal fade"
                           id={`portfolioModal${kit.id}`}
-                          tabindex="-1"
+                          tabIndex="-1"
                           role="dialog"
                           aria-hidden="true"
                           key={kit.id}
@@ -221,7 +219,6 @@ function Kits({user}) {
                         </div>
                       </div>
                     </div>
-                  </>
                 )
               )}
             </div>
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 89f91e54..4041256c 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
+    <Router>
     <App />
+    </Router>
   </StrictMode>,
 )

From 36eb2d368e369fbe741174b9f0e4898e0ce14ae7 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:23:37 -0600
Subject: [PATCH 08/22] Handle jwt auth and state management with AuthContext

---
 frontend/src/App.jsx                          | 115 ++----------------
 frontend/src/components/DashCardSet.jsx       |  14 ++-
 frontend/src/components/DashTable.jsx         |  10 +-
 frontend/src/components/Navigation.jsx        |  15 ++-
 frontend/src/components/NewKit.jsx            |  14 +--
 frontend/src/components/NewKitItem.jsx        |   9 +-
 frontend/src/components/NewUser.jsx           |   8 +-
 frontend/src/components/PageWrapper.jsx       |  11 +-
 frontend/src/components/auth/CurrentUser.jsx  |  40 +-----
 frontend/src/components/auth/Login.jsx        |  22 ++--
 frontend/src/components/auth/Logout.jsx       |  32 ++---
 frontend/src/components/auth/Registration.jsx |  11 +-
 .../src/components/pages/AdminDashboard.jsx   |  32 +----
 .../src/components/pages/Confirmation.jsx     |   7 +-
 frontend/src/components/pages/Contact.jsx     |  12 +-
 frontend/src/components/pages/Donation.jsx    |  19 ++-
 frontend/src/components/pages/Home.jsx        |   1 -
 frontend/src/components/pages/Kits.jsx        |  11 +-
 frontend/src/components/pages/RequestKit.jsx  |   9 +-
 frontend/src/main.jsx                         |   5 +-
 20 files changed, 107 insertions(+), 290 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c77d24f3..5f8175f0 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,5 @@
 import './App.css';
+import { useContext } from 'react';
 import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
@@ -21,129 +22,33 @@ import NewUser from './components/NewUser';
 import AddNew from './components/pages/AddNew';
 import NewKitItem from './components/NewKitItem';
 import AddItemToKit from './components/AddItemToKit';
+import { AuthContext } from './components/auth/AuthContext';
 
 
 
 
 
 function App() {
-  const [loggedIn, setLoggedIn] = useState();
-  const [user, setUser] = useState(null);
-  const [tokenExpiration, setTokenExpiration] = useState(null);
-  const navigate = useNavigate();
-
-    // Method handles login state and token, checking for existence or expiration
-  useEffect(() => {
-    const token = localStorage.getItem('jwt');
-
-    if (token) {
-      try {
-        const decoded = jwtDecode(token);
-        const now = Date.now() / 1000; // Current time in seconds
-
-        if (decoded.exp > now) {
-          setLoggedIn(true); // Token is valid
-          setUser(decoded.user ? decoded.user : null); // Set user data
-
-          // Calculate remaining time until token expiration
-          const timeUntilExpiration = (decoded.exp - now) * 1000;
-
-          // Notify 5 minutes before expiration
-          if (timeUntilExpiration < 300000) {
-            alert("Your session will expire soon.");
-          }
-
-          // Set token expiration time in state
-          setTokenExpiration(timeUntilExpiration);
-
-        } else {
-          // Token is expired, clear it
-          console.log("Token has expired, clearing JWT.");
-          localStorage.removeItem('jwt');
-          setLoggedIn(false);
-          setUser(null);
-          alert("Your session has expired. Please log in again.");
-          navigate('/login')
-          
-        }
-      } catch (error) {
-        console.error('Token decoding failed:', error);
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        navigate('/');
-
-      }
-    } else {
-      // No token, set to logged out state
-      setLoggedIn(false);
-      setUser(null);
-      navigate('/')
-      alert("A network error occurred. You have been logged out.")
-    }
-  }, []);
-
-  // Logs out the user when the token expires
-  useEffect(() => {
-    if (tokenExpiration) {
-      const timer = setTimeout(() => {
-        console.log("Token has expired, logging out.");
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        alert("Your session has expired. Please log in again.");
-        navigate('/login');
-      }, tokenExpiration); 
-
-      return () => clearTimeout(timer); 
-    }
-  }, [tokenExpiration]);
-
-  const checkToken = async () => {
-    try {
-      const response = await fetch(userUrl, {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('jwt')}`,
-        },
-      });
-  
-      if (response.ok) {
-        const data = await response.json();
-        setUser(data);
-      } else {
-        console.log("No user logged in.");
-        setUser(null);
-        setLoggedIn(false);
-        localStorage.removeItem('jwt');
-        const error = await response.json();
-        console.log(error);
-      }
-    } catch (error) {
-      console.error("Error fetching current user");
-      setUser(null);
-      setLoggedIn(false);
-      localStorage.removeItem('jwt');
-    }
-  };
+  const { loggedIn, user } = useContext(AuthContext);
 
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-        <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
+        <PageWrapper>                   
           <ScrollToHash/>
            <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact user={user} />} />
-            <Route path="/kits" element={<Kits user={user} />} />
-            <Route path="/orders" element={<RequestKit user={user} setUser={setUser} />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/kits" element={<Kits />} />
+            <Route path="/orders" element={<RequestKit />} />
             <Route path="/registration" element={<Registration />} />
-            <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
+            <Route path="/login" element={<Login />}/>
             <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
+            <Route path="/donation" element={<Donation />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} setLoggedIn={setLoggedIn} setUser={setUser}/> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index dc04877b..ef33db19 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
-const DashCardSet = ({ setUser, setLoggedIn }) => {
+const DashCardSet = () => {
+  const { logout } = useContext(AuthContext);
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -26,17 +28,17 @@ const DashCardSet = ({ setUser, setLoggedIn }) => {
           setTotalDonations(parseFloat(data.total_donations));
         } else {
           console.error('Failed to fetch data:', response.statusText);
+          logout();
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
+        alert("An error occurred.")
+        logout();
       }
     };
 
     fetchDashboardData();
-  }, []);
+  }, [dashUrl, logout]);
 
   return (
     // Displays data using the dashboard card component
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index dfb5475b..d04c2f34 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from './auth/AuthContext';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
-const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) => {
+const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+  const { logout } = useContext(AuthContext);
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,9 +30,7 @@ const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) =
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
+        logout();
         alert("A network error occurred.")
       } finally {
         setLoading(false);
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index 54d0dbc7..83ebe82c 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -1,10 +1,12 @@
-import React from "react"
+import React, { useContext } from "react"
 import { Link, useNavigate } from "react-router-dom";
 import CurrentUser from "./auth/CurrentUser";
 import Logout from "./auth/Logout";
+import { AuthContext } from "./auth/AuthContext";
 
 // Passed in logged in and user state
-function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
+function Navigation() {
+   const { loggedIn, user, logout } = useContext(AuthContext);
    const navigate = useNavigate();
    const handleDonateClick = (e) => {
     e.preventDefault(); 
@@ -13,10 +15,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
-        navigate("/login")
+        logout();
     } else {
         // If user is logged in, navigate to the donation page
         navigate("/donation");
@@ -35,7 +34,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
                     <ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                         {loggedIn && (
                         <>
-                        <li className="nav-item"><span className="nav-link"><CurrentUser setLoggedIn={setLoggedIn} setUser={setUser} user={user} /></span></li>
+                        <li className="nav-item"><span className="nav-link"><CurrentUser /></span></li>
 
                         </>
                         )}
@@ -51,7 +50,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
                         
                         {loggedIn ? (
                             <>
-                            <li><Logout setLoggedIn={setLoggedIn} setUser={setUser} /></li>
+                            <li><Logout /></li>
                             </>
                         ) : (
                             <>                            
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index 3dc34fe1..b1c5e842 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 // Component for creating a new kit
 const NewKit = () => {
+  const { logout } = useContext(AuthContext);
   const [image, setImage] = useState('');
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -50,12 +52,6 @@ const NewKit = () => {
           
           console.log("New Kit added successfully!");
           alert("New Kit added successfully!");
-    
-          // Clear input fields
-          setName("");
-          setDescription("");
-          setGradeLevel("");
-          setImage('');
           // Redirect to admin page
           navigate("/admin");
         } else {
@@ -68,9 +64,7 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index 864b7a67..def04ae0 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewKitItem = () => {
-  
+  const { logout } = useContext(AuthContext);
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [image, setImage] = useState(null);
@@ -60,9 +61,7 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index 37f112d2..84718b1f 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL2 } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewUser = () => {
+  const { logout } = useContext(AuthContext);
   const [userData, setUserData] = useState("");
   const [email, setEmail] = useState(''); 
   const [password, setPassword] = useState(''); 
@@ -65,9 +67,7 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
       }
     };
   
diff --git a/frontend/src/components/PageWrapper.jsx b/frontend/src/components/PageWrapper.jsx
index 566a649f..8745b0bc 100644
--- a/frontend/src/components/PageWrapper.jsx
+++ b/frontend/src/components/PageWrapper.jsx
@@ -2,16 +2,17 @@ import React from 'react'
 import Navigation from './Navigation';
 import Footer from './Footer';
 
-// Passed in the content for the middle of the page as children and the logged in and user state. Navbar and footer displayed on every page.
-const PageWrapper = ({children, loggedIn, setLoggedIn, setUser, user }) => (
+// Passed in the content for the middle of the page as children. Navbar and footer displayed on every page.
+const PageWrapper = ({children }) => {
 
-    
+    return (
     <div id="page-top">
-    <Navigation loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user} />
+    <Navigation />
     {children}     
     <Footer/>
     </div>
+    );
   
-);
+};
 
 export default PageWrapper;
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 2cfc7e45..13e1be97 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -1,42 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { API_URL2 } from '../../constants';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { AuthContext } from './AuthContext';
 
-const CurrentUser = ({ setLoggedIn, setUser, user }) => {
+const CurrentUser = () => {
+    const { user } = useContext(AuthContext);
     
-    const userUrl = `${API_URL2}/current_user`
-    // Fetches the current user whenever someone logs in
-    useEffect(() => {
-        const fetchUser = async () => {
-            if(!user) {
-            try {
-                const response = await fetch(userUrl, {
-                    headers: {
-                        Authorization: `Bearer ${localStorage.getItem('jwt')}`,
-                    },
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    setUser(data);
-                } else {
-                    console.log("No user logged in.")
-                    setUser(null);
-                    setLoggedIn(false);
-                    localStorage.removeItem('jwt');
-                    const error = await response.json();
-                    console.log(error)
-                }
-            } catch (error) {
-                console.error("Error fetching current user");
-                setUser(null);
-                setLoggedIn(false);
-                localStorage.removeItem('jwt');
-            }
-        }};
-
-        fetchUser();
-    }, [setLoggedIn, user, setUser ]);
-    // Stretch Goal: Add admin dashboard
     if (!user) return null;
 
     return (
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index e2f11b80..ded15b7d 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -1,14 +1,15 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { API_URL2 } from "../../constants";
 import { Link } from "react-router-dom";
 import CurrentUser from "./CurrentUser";
+import { AuthContext } from "./AuthContext";
 
 
 
-
-export default function Login({setLoggedIn}) {
+export default function Login() {
     // Handles login, setting the data for the user
+    const { setLoggedIn, logout } = useContext(AuthContext);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     
@@ -58,20 +59,13 @@ export default function Login({setLoggedIn}) {
           
           setLoggedIn(true);
           <CurrentUser />
-                                
-        // Clear input fields
-        setEmail("");
-        setPassword("");
-        
   
           navigate("/")
         } else {
           // Handle registration error
           const errorData = await response.json();
           setLoginMessages('Login failed. Please check your credentials and try again.');
-          setLoggedIn(false);
-          setUserData(null);
-          localStorage.removeItem('jwt');
+          logout();
           
 
       // Access the status and message in the JSON response
@@ -81,10 +75,8 @@ export default function Login({setLoggedIn}) {
      } catch (error) {
         // Handle other errors
         console.log("An error occurred:", error)
-        setLoginMessages("Unable to connect to the server. Please try again later.");
-        setUserData(null);
-        setLoggedIn(false);
-        localStorage.removeItem("jwt");
+        setLoginMessages("An error occurred, please try again.");
+        logout();
       }
     };
   
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index ca2b9b2f..e1fddc85 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { API_URL2 } from "../../constants";
 import { jwtDecode } from 'jwt-decode';
 import { useNavigate } from "react-router-dom";
+import { AuthContext } from "./AuthContext";
 
-export default function Logout({ setLoggedIn, setUser }) {
+export default function Logout() {
+  const { setLoggedIn, setUser, logout } = useContext(AuthContext);
   const [errorMessage, setErrorMessage] = useState("");
   const navigate = useNavigate();
 
@@ -12,13 +14,10 @@ export default function Logout({ setLoggedIn, setUser }) {
   const handleLogout = async () => {
     const logoutUrl = `${API_URL2}/logout`
     const jwt = localStorage.getItem('jwt');
-    console.log(jwt)
 
     if (!jwt) {
       alert('You are already logged out or your session has expired.');
-      setLoggedIn(false);
-      setUser(null);
-      navigate('/login')
+      logout();
       return;
     }
 
@@ -30,9 +29,7 @@ export default function Logout({ setLoggedIn, setUser }) {
 
       if (decoded.exp < now) {
         alert('Your session has expired. Please log in again.');
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        navigate('/login');
+        logout();
         return;
       }
         const response = await fetch(logoutUrl, {
@@ -45,30 +42,21 @@ export default function Logout({ setLoggedIn, setUser }) {
 
       if (response.ok) {
         alert('Logged out successfully.');
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        navigate("/");
+        logout();
         
         console.log("Logout successful.")
 
       } else {
         const message = response.json();
-        setErrorMessage(message.error.message);
-        console.error(errorMessage);
-        localStorage.removeItem("jwt");
-        setLoggedIn(false);
-        setUser(null);
-        navigate("/login");
+        console.error(message.error.message);
+        logout();
         alert("Your session has expired, please sign in again.");
 
     }
 
     } catch (error) {
         console.error("An error occurred:", error.message);
-        localStorage.removeItem("jwt");
-        setUser(null);
-        setLoggedIn(false);
+        logout();
         alert(error.message)
     }
     
diff --git a/frontend/src/components/auth/Registration.jsx b/frontend/src/components/auth/Registration.jsx
index 153538be..baaeab62 100644
--- a/frontend/src/components/auth/Registration.jsx
+++ b/frontend/src/components/auth/Registration.jsx
@@ -57,16 +57,7 @@ export default function Registration() {
         // Handle successful registration (e.g., redirect to another page)
         console.log("Registration successful!");
         setRegistrationMessages("Registration successful!");
-
-
-        // Clear input fields
-        setEmail("");
-        setPassword("");
-        // Removed name field and added firstName and lastName field
-        setFirstName("");
-        setLastName("");
-
-
+        
         navigate("/login");
       } else {
         // Handle registration error
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index 9e68bfb2..cae8ec99 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useContext } from "react";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import SampleChart from "../SampleChart";
 import SampleChartThree from "../SampleChartThree";
@@ -7,8 +7,10 @@ import { API_URL, API_URL2,ADMIN_URL } from "../../constants";
 import DataEndpoint from "../DataEndpoint";
 import DashTable from "../DashTable";
 import EditModal from "../EditModal";
+import { AuthContext } from "../auth/AuthContext";
 
-const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
+const AdminDashboard = () => {
+  const { user, setLoggedIn, setUser } = useContext(AuthContext);
   // Necessary api endpoints
   const userUrl = `${API_URL}/users`;
   const kitsUrl = `${API_URL}/kits`;
@@ -143,8 +145,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -152,8 +152,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -161,8 +159,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -177,8 +173,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -186,8 +180,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
 
@@ -289,7 +281,7 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
+          <DashCardSet />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -321,17 +313,13 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.userUrl}
                             apiEndpoint={userUrl}
                             handleShow={(item) => handleShow(item, "user")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
-                          />
+                            />
                         )}
                         {selectedEndpoint === kitsUrl && (
                           <DashTable
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -339,8 +327,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -350,8 +336,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -359,8 +343,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -368,8 +350,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Confirmation.jsx b/frontend/src/components/pages/Confirmation.jsx
index 6187dd27..6a38a145 100644
--- a/frontend/src/components/pages/Confirmation.jsx
+++ b/frontend/src/components/pages/Confirmation.jsx
@@ -1,9 +1,10 @@
-import React, {useEffect} from "react";
-import { API_URL } from "../../constants";
+import React, {useContext, useEffect} from "react";
+import { AuthContext } from "../auth/AuthContext";
 
 
 
-function Confirmation({user}) {
+function Confirmation() {
+    const { user } = useContext(AuthContext);
     // Displays confirmation for kit request success
     const current_user = user?.name || "Guest";
 
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 1c5390d9..922590f5 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../constants';
+import { AuthContext } from '../auth/AuthContext';
 
 
-function Contact({ user, setLoggedIn, setUser }) {
+function Contact() {
+    const { user } = useContext(AuthContext);
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phone, setPhone] = useState("");
@@ -47,14 +49,12 @@ function Contact({ user, setLoggedIn, setUser }) {
                 const errorData = await response.json();
                 setErrorMessages(errorData.errors.join(", "));
             } else {
+                // Handle success
                 alert("Contact submitted successfully!");
-                navigate("/");
+                navigate("/")
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
-            setLoggedIn(false);
-            setUser(null);
-            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Donation.jsx b/frontend/src/components/pages/Donation.jsx
index 4376e575..3f81aaa3 100644
--- a/frontend/src/components/pages/Donation.jsx
+++ b/frontend/src/components/pages/Donation.jsx
@@ -1,8 +1,11 @@
-import React, {useState, useEffect } from "react"
+import React, {useState, useEffect, useContext } from "react"
 import { API_URL } from "../../constants"
 import { useNavigate } from "react-router-dom"
+import { AuthContext } from "../auth/AuthContext";
+import Logout from "../auth/Logout";
 
-function Donation({user}) {
+function Donation() {
+    const { user, logout } = useContext(AuthContext);
     // Add useState for first name and last name
     const [errorMessages, setErrorMessages] = useState("");
     const [firstName, setFirstName] = useState(user ? user.first_name : "");
@@ -62,7 +65,8 @@ function Donation({user}) {
         if (!jwt) {
           console.log("No user logged in. Please log in to continue.");
           // Redirect to login
-          navigate('/login')
+          logout();
+          alert("Your token has expired. Please login again.")
           return;
       }
     
@@ -83,14 +87,6 @@ function Donation({user}) {
         console.log("Donation saved.");
         alert("Donation submitted successfully. Thank you for your donation!")
 
-        // Clear input fields
-                
-        setAmount("");
-        setCardNumber("");
-        setExpirationDate("");
-        setCvv("");
-        setSavePaymentInfo(false);
-
         navigate("/")
       } else {
         // Handle request error
@@ -102,6 +98,7 @@ function Donation({user}) {
       // Handle network or other errors
       setErrorMessages("An error occurred: " + error.message);
       console.log(error)
+      logout();
     }
 
         
diff --git a/frontend/src/components/pages/Home.jsx b/frontend/src/components/pages/Home.jsx
index 22c3e822..2bd8b118 100644
--- a/frontend/src/components/pages/Home.jsx
+++ b/frontend/src/components/pages/Home.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import React from 'react'
 import Header from '../Header';
 import { Link } from 'react-router-dom';
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index 765b0c54..bc512e65 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { API_URL } from "../../constants";
 import { Link } from "react-router-dom";
+import { AuthContext } from "../auth/AuthContext";
 
-
-
-function Kits({user}) {
+function Kits() {
+  const { user } = useContext(AuthContext);
   const [kits, setKits] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,9 +28,6 @@ function Kits({user}) {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/components/pages/RequestKit.jsx b/frontend/src/components/pages/RequestKit.jsx
index 2f8d5aa9..961ea531 100644
--- a/frontend/src/components/pages/RequestKit.jsx
+++ b/frontend/src/components/pages/RequestKit.jsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { API_URL } from "../../constants";
 import { useLocation, useNavigate } from "react-router-dom";
+import { AuthContext } from "../auth/AuthContext";
 import * as Yup from "yup";
 
 
-function RequestKit({ user }) {
-
+function RequestKit() {
+  const { user, logout } = useContext(AuthContext);
   const validationSchema = Yup.object().shape({
     phone: Yup.string().required('Phone is required'),
     schoolAddress: Yup.string().required('School address is required'),
@@ -55,7 +56,6 @@ function RequestKit({ user }) {
       },
     };
 
-
     try {
       // Send POST request to registration endpoint
       await validationSchema.validate(orderForm, { abortEarly: false });
@@ -93,6 +93,7 @@ function RequestKit({ user }) {
       } else {
         // Handle network or other errors
         setOrderMessages({general: "Network error: " + error.message});
+        logout();
       }
       console.error(error);
     }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 4041256c..25de00ef 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,12 +2,15 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
+import { AuthProvider } from './components/auth/AuthContext.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <Router>
-    <App />
+      <AuthProvider>
+        <App />
+      </AuthProvider>
     </Router>
   </StrictMode>,
 )

From 4b8518217468742a2f105b3d5651055834a5a9a0 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:25:41 -0600
Subject: [PATCH 09/22] Add AuthContext

---
 frontend/src/components/auth/AuthContext.jsx | 73 ++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 frontend/src/components/auth/AuthContext.jsx

diff --git a/frontend/src/components/auth/AuthContext.jsx b/frontend/src/components/auth/AuthContext.jsx
new file mode 100644
index 00000000..ab57c0f4
--- /dev/null
+++ b/frontend/src/components/auth/AuthContext.jsx
@@ -0,0 +1,73 @@
+import React, { createContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { jwtDecode } from 'jwt-decode';
+import { API_URL2 } from '../../constants';
+
+export const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [user, setUser] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = localStorage.getItem('jwt');
+      if (token) {
+        try {
+            console.log('Token:', token); // Debugging: Log the token
+            const decoded = jwtDecode(token);
+            console.log('Decoded token:', decoded); // Debugging: Log the decoded token
+          const now = Date.now() / 1000;
+
+          if (decoded.exp > now) {
+            const response = await fetch(`${API_URL2}/current_user`, {
+              headers: {
+                Authorization: `Bearer ${token}`,
+              },
+            });
+
+            if (response.ok) {
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                  const data = await response.json();
+                  setUser(data);
+                  setLoggedIn(true);
+                } else {
+                  throw new Error('Invalid response format');
+                }
+            } else {
+              handleUnauthorized();
+            }
+          } else {
+            handleUnauthorized();
+          }
+        } catch (error) {
+          console.error('Token decoding failed:', error);
+          handleUnauthorized();
+        }
+      } else {
+        handleUnauthorized();
+      }
+    };
+
+    const handleUnauthorized = () => {
+      logout();
+    };
+
+    checkAuth();
+  }, [navigate]);
+
+  const logout = () => {
+    setLoggedIn(false);
+    setUser(null);
+    localStorage.removeItem('jwt');
+    navigate("/login");
+  };
+
+  return (
+    <AuthContext.Provider value={{ loggedIn, user, setLoggedIn, setUser, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
\ No newline at end of file

From e6c2713495f316d1501fd83c440ac56324bed899 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 10/22] Trying to fix retained token bug

---
 frontend/src/App.jsx                      | 3 ++-
 frontend/src/components/auth/Logout.jsx   | 2 +-
 frontend/src/components/pages/Contact.jsx | 3 +++
 frontend/src/components/pages/Kits.jsx    | 3 +++
 frontend/src/main.jsx                     | 2 +-
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5f8175f0..e3044b76 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
 import './App.css';
 import { useContext } from 'react';
-import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
+import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
@@ -31,6 +31,7 @@ import { AuthContext } from './components/auth/AuthContext';
 function App() {
   const { loggedIn, user } = useContext(AuthContext);
 
+
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index e1fddc85..015957c3 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { AuthContext } from "./AuthContext";
 
 export default function Logout() {
-  const { setLoggedIn, setUser, logout } = useContext(AuthContext);
+  const { logout } = useContext(AuthContext);
   const [errorMessage, setErrorMessage] = useState("");
   const navigate = useNavigate();
 
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 922590f5..2d9366d6 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -55,6 +55,9 @@ function Contact() {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
+            setLoggedIn(false);
+            setUser(null);
+            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index bc512e65..09778e4b 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -28,6 +28,9 @@ function Kits() {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 25de00ef..1585f524 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -13,4 +13,4 @@ createRoot(document.getElementById('root')).render(
       </AuthProvider>
     </Router>
   </StrictMode>,
-)
+);

From 611e20d9054f795d1be89f9a9580f7da511a6726 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:56:32 -0600
Subject: [PATCH 11/22] Corrected bug from rebase and conflict merge

---
 frontend/src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e3044b76..abad67e5 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
 import './App.css';
 import { useContext } from 'react';
-import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';

From 0e5f8bdbe9f9eb2b654a01b75e327de5973b6dfd Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:57:56 -0600
Subject: [PATCH 12/22] Remove debug code

---
 frontend/src/components/auth/AuthContext.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/auth/AuthContext.jsx b/frontend/src/components/auth/AuthContext.jsx
index ab57c0f4..5f3b67d1 100644
--- a/frontend/src/components/auth/AuthContext.jsx
+++ b/frontend/src/components/auth/AuthContext.jsx
@@ -15,9 +15,7 @@ export const AuthProvider = ({ children }) => {
       const token = localStorage.getItem('jwt');
       if (token) {
         try {
-            console.log('Token:', token); // Debugging: Log the token
-            const decoded = jwtDecode(token);
-            console.log('Decoded token:', decoded); // Debugging: Log the decoded token
+          const decoded = jwtDecode(token);
           const now = Date.now() / 1000;
 
           if (decoded.exp > now) {

From 45a873fbe429ec7e80ccca8300fc3427e52951ee Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 13/22] Trying to fix retained token bug

---
 frontend/src/App.jsx                          | 45 ++++++++++++++++---
 frontend/src/components/DashCardSet.jsx       |  5 ++-
 frontend/src/components/DashTable.jsx         |  6 ++-
 frontend/src/components/EditModal.jsx         |  2 +
 frontend/src/components/Navigation.jsx        |  3 ++
 frontend/src/components/NewKit.jsx            |  3 ++
 frontend/src/components/NewKitItem.jsx        |  3 ++
 frontend/src/components/NewUser.jsx           |  3 ++
 frontend/src/components/auth/CurrentUser.jsx  | 11 +++--
 frontend/src/components/auth/Login.jsx        | 11 +++--
 frontend/src/components/auth/Logout.jsx       |  8 +++-
 .../src/components/pages/AdminDashboard.jsx   | 31 ++++++++++---
 frontend/src/components/pages/Contact.jsx     |  5 ++-
 frontend/src/components/pages/Kits.jsx        | 17 +++----
 frontend/src/main.jsx                         |  3 ++
 15 files changed, 124 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a25b7123..5d8e5673 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,5 @@
 import './App.css';
-import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
+import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
@@ -31,6 +31,7 @@ function App() {
   const [loggedIn, setLoggedIn] = useState();
   const [user, setUser] = useState(null);
   const [tokenExpiration, setTokenExpiration] = useState(null);
+  const navigate = useNavigate();
 
     // Method handles login state and token, checking for existence or expiration
   useEffect(() => {
@@ -50,7 +51,7 @@ function App() {
 
           // Notify 5 minutes before expiration
           if (timeUntilExpiration < 300000) {
-            alert("Your session is about to expire. Please save your work.");
+            alert("Your session will expire soon.");
           }
 
           // Set token expiration time in state
@@ -63,17 +64,23 @@ function App() {
           setLoggedIn(false);
           setUser(null);
           alert("Your session has expired. Please log in again.");
+          navigate('/login')
+          
         }
       } catch (error) {
         console.error('Token decoding failed:', error);
         localStorage.removeItem('jwt');
         setLoggedIn(false);
         setUser(null);
+        navigate('/');
+
       }
     } else {
       // No token, set to logged out state
       setLoggedIn(false);
       setUser(null);
+      navigate('/')
+      alert("A network error occurred. You have been logged out.")
     }
   }, []);
 
@@ -86,17 +93,44 @@ function App() {
         setLoggedIn(false);
         setUser(null);
         alert("Your session has expired. Please log in again.");
+        navigate('/login');
       }, tokenExpiration); 
 
       return () => clearTimeout(timer); 
     }
   }, [tokenExpiration]);
 
+  const checkToken = async () => {
+    try {
+      const response = await fetch(userUrl, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('jwt')}`,
+        },
+      });
+  
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data);
+      } else {
+        console.log("No user logged in.");
+        setUser(null);
+        setLoggedIn(false);
+        localStorage.removeItem('jwt');
+        const error = await response.json();
+        console.log(error);
+      }
+    } catch (error) {
+      console.error("Error fetching current user");
+      setUser(null);
+      setLoggedIn(false);
+      localStorage.removeItem('jwt');
+    }
+  };
+
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-      <Router>
         <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
           <ScrollToHash/>
            <Routes>
@@ -108,9 +142,9 @@ function App() {
             <Route path="/registration" element={<Registration />} />
             <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
             <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user}/>} />
+            <Route path="/donation" element={<Donation user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} /> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} setLoggedIn={setLoggedIn} setUser={setUser}/> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
@@ -120,7 +154,6 @@ function App() {
             <Route path="/profile/:id" element={<UserProfile/>}/>
           </Routes>
         </PageWrapper>
-      </Router>
     </div>
   </>
   );
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index aa0faf7b..dc04877b 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
 
-const DashCardSet = () => {
+const DashCardSet = ({ setUser, setLoggedIn }) => {
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -29,6 +29,9 @@ const DashCardSet = () => {
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index 74023b28..dfb5475b 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
-const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,6 +28,10 @@ const DashTable = ({ apiEndpoint, headers, handleShow }) => {
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
+        alert("A network error occurred.")
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/components/EditModal.jsx b/frontend/src/components/EditModal.jsx
index e60c09a7..76b4abbe 100644
--- a/frontend/src/components/EditModal.jsx
+++ b/frontend/src/components/EditModal.jsx
@@ -103,6 +103,8 @@ if (recordType === 'user') {
         console.log(`${recordType} updated successfully!`);
         alert(`${recordType} updated successfully!`);
         handleClose(); // Close the modal after success
+    } else {
+      alert("An error occurred with the update.")
     }
     };
 
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index ebc64a7e..54d0dbc7 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -13,6 +13,9 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         navigate("/login")
     } else {
         // If user is logged in, navigate to the donation page
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index a8147166..3dc34fe1 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -68,6 +68,9 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index 5f10f24b..864b7a67 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -60,6 +60,9 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index af035d08..37f112d2 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -65,6 +65,9 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
+        setLoggedIn(false);
+        setUserData(null);
+        localStorage.removeItem('jwt');
       }
     };
   
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 7311148e..4def604b 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -21,16 +21,21 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
                 } else {
                     console.log("No user logged in.")
                     setUser(null);
-                    const error = await response.json()
+                    setLoggedIn(false);
+                    localStorage.removeItem('jwt');
+                    const error = await response.json();
                     console.log(error)
                 }
             } catch (error) {
                 console.error("Error fetching current user");
+                setUser(null);
+                setLoggedIn(false);
+                localStorage.removeItem('jwt');
             }
         }};
 
         fetchUser();
-    }, [setLoggedIn, user, setUser, userUrl]);
+    }, [setLoggedIn, user, setUser ]);
     // Stretch Goal: Add admin dashboard
     if (!user) return null;
 
@@ -40,7 +45,7 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
             <p className='text-white bold' style={{ marginRight: 100 }}>
             <em>Welcome, {user.first_name}!</em>
             </p>
-            {user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
+            {user && user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
                 </Link>}
             {user.role != 'admin' && <Link to={`/profile/${user.id}`}><i className='fas fa-user'></i></Link>}   
         </div>
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index 4d63c8f4..e2f11b80 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -52,7 +52,6 @@ export default function Login({setLoggedIn}) {
       if (jwt) {
         // Store the JWT in local storage 
         localStorage.setItem('jwt', jwt.split(' ')[1]);
-        console.log(localStorage.getItem('jwt'));
       }
 
           console.log("Login successful!");
@@ -69,7 +68,10 @@ export default function Login({setLoggedIn}) {
         } else {
           // Handle registration error
           const errorData = await response.json();
-          setLoginMessages(errorData.status.message || "Login failed");
+          setLoginMessages('Login failed. Please check your credentials and try again.');
+          setLoggedIn(false);
+          setUserData(null);
+          localStorage.removeItem('jwt');
           
 
       // Access the status and message in the JSON response
@@ -79,7 +81,10 @@ export default function Login({setLoggedIn}) {
      } catch (error) {
         // Handle other errors
         console.log("An error occurred:", error)
-        setLoginMessages(error)
+        setLoginMessages("Unable to connect to the server. Please try again later.");
+        setUserData(null);
+        setLoggedIn(false);
+        localStorage.removeItem("jwt");
       }
     };
   
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index 739312a6..ca2b9b2f 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -56,15 +56,19 @@ export default function Logout({ setLoggedIn, setUser }) {
         const message = response.json();
         setErrorMessage(message.error.message);
         console.error(errorMessage);
-        alert("Your session has expired, please sign in again.");
+        localStorage.removeItem("jwt");
         setLoggedIn(false);
         setUser(null);
-        navigate("/login")
+        navigate("/login");
+        alert("Your session has expired, please sign in again.");
 
     }
 
     } catch (error) {
         console.error("An error occurred:", error.message);
+        localStorage.removeItem("jwt");
+        setUser(null);
+        setLoggedIn(false);
         alert(error.message)
     }
     
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index 7fabe22c..9e68bfb2 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -8,7 +8,7 @@ import DataEndpoint from "../DataEndpoint";
 import DashTable from "../DashTable";
 import EditModal from "../EditModal";
 
-const AdminDashboard = ({ user }) => {
+const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
   // Necessary api endpoints
   const userUrl = `${API_URL}/users`;
   const kitsUrl = `${API_URL}/kits`;
@@ -143,6 +143,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -150,6 +152,8 @@ const AdminDashboard = ({ user }) => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -157,6 +161,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -171,6 +177,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -178,6 +186,8 @@ const AdminDashboard = ({ user }) => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
 
@@ -209,7 +219,7 @@ const AdminDashboard = ({ user }) => {
   }, [selectedEndpoint]);
   
 
-  if (user.role !== "admin") {
+  if (!user || user.role !== "admin") {
     return (
       <section className="page-section">
         <div>
@@ -218,7 +228,6 @@ const AdminDashboard = ({ user }) => {
       </section>
     );
   }
-  console.log("selectedEndpoint:", selectedEndpoint);
 
   return (
     // Displays cards, graph data, and Data tables
@@ -233,7 +242,7 @@ const AdminDashboard = ({ user }) => {
         >
           
           <a className="navbar-brand text-uppercase text-white">
-          <i class="bi bi-graph-up text-white me-3"></i> Admin Dashboard
+          <i className="bi bi-graph-up text-white me-3"></i> Admin Dashboard
           </a>
           
         </div>
@@ -280,7 +289,7 @@ const AdminDashboard = ({ user }) => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet />
+          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -312,6 +321,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.userUrl}
                             apiEndpoint={userUrl}
                             handleShow={(item) => handleShow(item, "user")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitsUrl && (
@@ -319,6 +330,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -326,6 +339,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -335,6 +350,8 @@ const AdminDashboard = ({ user }) => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -342,6 +359,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -349,6 +368,8 @@ const AdminDashboard = ({ user }) => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 1118910e..1c5390d9 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../constants';
 
 
-function Contact({ user }) {
+function Contact({ user, setLoggedIn, setUser }) {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phone, setPhone] = useState("");
@@ -52,6 +52,9 @@ function Contact({ user }) {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
+            setLoggedIn(false);
+            setUser(null);
+            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index 169ab0bc..fdd0af87 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -21,7 +21,6 @@ function Kits({user}) {
         const response = await fetch(kitsUrl);
         if (response.ok) {
           const json = await response.json();
-          console.log("Fetched kits data:", json);
           setKits(json);
         } else {
           throw response;
@@ -29,6 +28,9 @@ function Kits({user}) {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
@@ -64,13 +66,9 @@ function Kits({user}) {
             {error && <p>{error}</p>}
 
             <div className="row d-flex p-2">
-              {kits.map(
-                (
-                  kit // Map through the list of kits
-                ) => (
-                  <>
-                    <div className="col-lg-6 col-sm-6 mb-4">
-                      <div className="portfolio-item" key={kit.id}>
+              {kits.map(kit => (
+                    <div className="col-lg-6 col-sm-6 mb-4" key={kit.id}>
+                      <div className="portfolio-item">
                         <a
                           className="portfolio-link"
                           data-bs-toggle="modal"
@@ -118,7 +116,7 @@ function Kits({user}) {
                         <div
                           className="portfolio-modal modal fade"
                           id={`portfolioModal${kit.id}`}
-                          tabindex="-1"
+                          tabIndex="-1"
                           role="dialog"
                           aria-hidden="true"
                           key={kit.id}
@@ -224,7 +222,6 @@ function Kits({user}) {
                         </div>
                       </div>
                     </div>
-                  </>
                 )
               )}
             </div>
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 89f91e54..4041256c 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
+    <Router>
     <App />
+    </Router>
   </StrictMode>,
 )

From 0d38ad9f3759124511095e2bfb615b991d3bbfdf Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:23:37 -0600
Subject: [PATCH 14/22] Handle jwt auth and state management with AuthContext

---
 frontend/src/App.jsx                          | 115 ++----------------
 frontend/src/components/DashCardSet.jsx       |  14 ++-
 frontend/src/components/DashTable.jsx         |  10 +-
 frontend/src/components/Navigation.jsx        |  15 ++-
 frontend/src/components/NewKit.jsx            |  14 +--
 frontend/src/components/NewKitItem.jsx        |   9 +-
 frontend/src/components/NewUser.jsx           |   8 +-
 frontend/src/components/PageWrapper.jsx       |  11 +-
 frontend/src/components/auth/CurrentUser.jsx  |  40 +-----
 frontend/src/components/auth/Login.jsx        |  22 ++--
 frontend/src/components/auth/Logout.jsx       |  32 ++---
 frontend/src/components/auth/Registration.jsx |  11 +-
 .../src/components/pages/AdminDashboard.jsx   |  32 +----
 .../src/components/pages/Confirmation.jsx     |   7 +-
 frontend/src/components/pages/Contact.jsx     |  12 +-
 frontend/src/components/pages/Donation.jsx    |  19 ++-
 frontend/src/components/pages/Home.jsx        |   1 -
 frontend/src/components/pages/Kits.jsx        |  11 +-
 frontend/src/components/pages/RequestKit.jsx  |  11 +-
 frontend/src/main.jsx                         |   5 +-
 20 files changed, 108 insertions(+), 291 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5d8e5673..255afb03 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,5 @@
 import './App.css';
+import { useContext } from 'react';
 import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
@@ -22,129 +23,33 @@ import AddNew from './components/pages/AddNew';
 import NewKitItem from './components/NewKitItem';
 import AddItemToKit from './components/AddItemToKit';
 import UserProfile from './components/pages/UserProfile';
+import { AuthContext } from './components/auth/AuthContext';
 
 
 
 
 
 function App() {
-  const [loggedIn, setLoggedIn] = useState();
-  const [user, setUser] = useState(null);
-  const [tokenExpiration, setTokenExpiration] = useState(null);
-  const navigate = useNavigate();
-
-    // Method handles login state and token, checking for existence or expiration
-  useEffect(() => {
-    const token = localStorage.getItem('jwt');
-
-    if (token) {
-      try {
-        const decoded = jwtDecode(token);
-        const now = Date.now() / 1000; // Current time in seconds
-
-        if (decoded.exp > now) {
-          setLoggedIn(true); // Token is valid
-          setUser(decoded.user ? decoded.user : null); // Set user data
-
-          // Calculate remaining time until token expiration
-          const timeUntilExpiration = (decoded.exp - now) * 1000;
-
-          // Notify 5 minutes before expiration
-          if (timeUntilExpiration < 300000) {
-            alert("Your session will expire soon.");
-          }
-
-          // Set token expiration time in state
-          setTokenExpiration(timeUntilExpiration);
-
-        } else {
-          // Token is expired, clear it
-          console.log("Token has expired, clearing JWT.");
-          localStorage.removeItem('jwt');
-          setLoggedIn(false);
-          setUser(null);
-          alert("Your session has expired. Please log in again.");
-          navigate('/login')
-          
-        }
-      } catch (error) {
-        console.error('Token decoding failed:', error);
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        navigate('/');
-
-      }
-    } else {
-      // No token, set to logged out state
-      setLoggedIn(false);
-      setUser(null);
-      navigate('/')
-      alert("A network error occurred. You have been logged out.")
-    }
-  }, []);
-
-  // Logs out the user when the token expires
-  useEffect(() => {
-    if (tokenExpiration) {
-      const timer = setTimeout(() => {
-        console.log("Token has expired, logging out.");
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        alert("Your session has expired. Please log in again.");
-        navigate('/login');
-      }, tokenExpiration); 
-
-      return () => clearTimeout(timer); 
-    }
-  }, [tokenExpiration]);
-
-  const checkToken = async () => {
-    try {
-      const response = await fetch(userUrl, {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('jwt')}`,
-        },
-      });
-  
-      if (response.ok) {
-        const data = await response.json();
-        setUser(data);
-      } else {
-        console.log("No user logged in.");
-        setUser(null);
-        setLoggedIn(false);
-        localStorage.removeItem('jwt');
-        const error = await response.json();
-        console.log(error);
-      }
-    } catch (error) {
-      console.error("Error fetching current user");
-      setUser(null);
-      setLoggedIn(false);
-      localStorage.removeItem('jwt');
-    }
-  };
+  const { loggedIn, user } = useContext(AuthContext);
 
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-        <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
+        <PageWrapper>                   
           <ScrollToHash/>
            <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact user={user} />} />
-            <Route path="/kits" element={<Kits user={user} />} />
-            <Route path="/orders" element={<RequestKit user={user} setUser={setUser} />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/kits" element={<Kits />} />
+            <Route path="/orders" element={<RequestKit />} />
             <Route path="/registration" element={<Registration />} />
-            <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
+            <Route path="/login" element={<Login />}/>
             <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user} setLoggedIn={setLoggedIn} setUser={setUser} />} />
+            <Route path="/donation" element={<Donation />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} setLoggedIn={setLoggedIn} setUser={setUser}/> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index dc04877b..ef33db19 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
-const DashCardSet = ({ setUser, setLoggedIn }) => {
+const DashCardSet = () => {
+  const { logout } = useContext(AuthContext);
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -26,17 +28,17 @@ const DashCardSet = ({ setUser, setLoggedIn }) => {
           setTotalDonations(parseFloat(data.total_donations));
         } else {
           console.error('Failed to fetch data:', response.statusText);
+          logout();
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
+        alert("An error occurred.")
+        logout();
       }
     };
 
     fetchDashboardData();
-  }, []);
+  }, [dashUrl, logout]);
 
   return (
     // Displays data using the dashboard card component
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index dfb5475b..d04c2f34 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from './auth/AuthContext';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
-const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) => {
+const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+  const { logout } = useContext(AuthContext);
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,9 +30,7 @@ const DashTable = ({ apiEndpoint, headers, handleShow, setLoggedIn, setUser }) =
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
+        logout();
         alert("A network error occurred.")
       } finally {
         setLoading(false);
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index 54d0dbc7..83ebe82c 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -1,10 +1,12 @@
-import React from "react"
+import React, { useContext } from "react"
 import { Link, useNavigate } from "react-router-dom";
 import CurrentUser from "./auth/CurrentUser";
 import Logout from "./auth/Logout";
+import { AuthContext } from "./auth/AuthContext";
 
 // Passed in logged in and user state
-function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
+function Navigation() {
+   const { loggedIn, user, logout } = useContext(AuthContext);
    const navigate = useNavigate();
    const handleDonateClick = (e) => {
     e.preventDefault(); 
@@ -13,10 +15,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
-        navigate("/login")
+        logout();
     } else {
         // If user is logged in, navigate to the donation page
         navigate("/donation");
@@ -35,7 +34,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
                     <ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                         {loggedIn && (
                         <>
-                        <li className="nav-item"><span className="nav-link"><CurrentUser setLoggedIn={setLoggedIn} setUser={setUser} user={user} /></span></li>
+                        <li className="nav-item"><span className="nav-link"><CurrentUser /></span></li>
 
                         </>
                         )}
@@ -51,7 +50,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
                         
                         {loggedIn ? (
                             <>
-                            <li><Logout setLoggedIn={setLoggedIn} setUser={setUser} /></li>
+                            <li><Logout /></li>
                             </>
                         ) : (
                             <>                            
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index 3dc34fe1..b1c5e842 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 // Component for creating a new kit
 const NewKit = () => {
+  const { logout } = useContext(AuthContext);
   const [image, setImage] = useState('');
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -50,12 +52,6 @@ const NewKit = () => {
           
           console.log("New Kit added successfully!");
           alert("New Kit added successfully!");
-    
-          // Clear input fields
-          setName("");
-          setDescription("");
-          setGradeLevel("");
-          setImage('');
           // Redirect to admin page
           navigate("/admin");
         } else {
@@ -68,9 +64,7 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index 864b7a67..def04ae0 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewKitItem = () => {
-  
+  const { logout } = useContext(AuthContext);
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [image, setImage] = useState(null);
@@ -60,9 +61,7 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index 37f112d2..84718b1f 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL2 } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewUser = () => {
+  const { logout } = useContext(AuthContext);
   const [userData, setUserData] = useState("");
   const [email, setEmail] = useState(''); 
   const [password, setPassword] = useState(''); 
@@ -65,9 +67,7 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
-        setLoggedIn(false);
-        setUserData(null);
-        localStorage.removeItem('jwt');
+        logout();
       }
     };
   
diff --git a/frontend/src/components/PageWrapper.jsx b/frontend/src/components/PageWrapper.jsx
index 566a649f..8745b0bc 100644
--- a/frontend/src/components/PageWrapper.jsx
+++ b/frontend/src/components/PageWrapper.jsx
@@ -2,16 +2,17 @@ import React from 'react'
 import Navigation from './Navigation';
 import Footer from './Footer';
 
-// Passed in the content for the middle of the page as children and the logged in and user state. Navbar and footer displayed on every page.
-const PageWrapper = ({children, loggedIn, setLoggedIn, setUser, user }) => (
+// Passed in the content for the middle of the page as children. Navbar and footer displayed on every page.
+const PageWrapper = ({children }) => {
 
-    
+    return (
     <div id="page-top">
-    <Navigation loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user} />
+    <Navigation />
     {children}     
     <Footer/>
     </div>
+    );
   
-);
+};
 
 export default PageWrapper;
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 4def604b..0aa4070b 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -1,42 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { API_URL2 } from '../../constants';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { AuthContext } from './AuthContext';
 
-const CurrentUser = ({ setLoggedIn, setUser, user }) => {
+const CurrentUser = () => {
+    const { user } = useContext(AuthContext);
     
-    const userUrl = `${API_URL2}/current_user`
-    // Fetches the current user whenever someone logs in
-    useEffect(() => {
-        const fetchUser = async () => {
-            if(!user) {
-            try {
-                const response = await fetch(userUrl, {
-                    headers: {
-                        Authorization: `Bearer ${localStorage.getItem('jwt')}`,
-                    },
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    setUser(data);
-                } else {
-                    console.log("No user logged in.")
-                    setUser(null);
-                    setLoggedIn(false);
-                    localStorage.removeItem('jwt');
-                    const error = await response.json();
-                    console.log(error)
-                }
-            } catch (error) {
-                console.error("Error fetching current user");
-                setUser(null);
-                setLoggedIn(false);
-                localStorage.removeItem('jwt');
-            }
-        }};
-
-        fetchUser();
-    }, [setLoggedIn, user, setUser ]);
-    // Stretch Goal: Add admin dashboard
     if (!user) return null;
 
     return (
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index e2f11b80..ded15b7d 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -1,14 +1,15 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { API_URL2 } from "../../constants";
 import { Link } from "react-router-dom";
 import CurrentUser from "./CurrentUser";
+import { AuthContext } from "./AuthContext";
 
 
 
-
-export default function Login({setLoggedIn}) {
+export default function Login() {
     // Handles login, setting the data for the user
+    const { setLoggedIn, logout } = useContext(AuthContext);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     
@@ -58,20 +59,13 @@ export default function Login({setLoggedIn}) {
           
           setLoggedIn(true);
           <CurrentUser />
-                                
-        // Clear input fields
-        setEmail("");
-        setPassword("");
-        
   
           navigate("/")
         } else {
           // Handle registration error
           const errorData = await response.json();
           setLoginMessages('Login failed. Please check your credentials and try again.');
-          setLoggedIn(false);
-          setUserData(null);
-          localStorage.removeItem('jwt');
+          logout();
           
 
       // Access the status and message in the JSON response
@@ -81,10 +75,8 @@ export default function Login({setLoggedIn}) {
      } catch (error) {
         // Handle other errors
         console.log("An error occurred:", error)
-        setLoginMessages("Unable to connect to the server. Please try again later.");
-        setUserData(null);
-        setLoggedIn(false);
-        localStorage.removeItem("jwt");
+        setLoginMessages("An error occurred, please try again.");
+        logout();
       }
     };
   
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index ca2b9b2f..e1fddc85 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { API_URL2 } from "../../constants";
 import { jwtDecode } from 'jwt-decode';
 import { useNavigate } from "react-router-dom";
+import { AuthContext } from "./AuthContext";
 
-export default function Logout({ setLoggedIn, setUser }) {
+export default function Logout() {
+  const { setLoggedIn, setUser, logout } = useContext(AuthContext);
   const [errorMessage, setErrorMessage] = useState("");
   const navigate = useNavigate();
 
@@ -12,13 +14,10 @@ export default function Logout({ setLoggedIn, setUser }) {
   const handleLogout = async () => {
     const logoutUrl = `${API_URL2}/logout`
     const jwt = localStorage.getItem('jwt');
-    console.log(jwt)
 
     if (!jwt) {
       alert('You are already logged out or your session has expired.');
-      setLoggedIn(false);
-      setUser(null);
-      navigate('/login')
+      logout();
       return;
     }
 
@@ -30,9 +29,7 @@ export default function Logout({ setLoggedIn, setUser }) {
 
       if (decoded.exp < now) {
         alert('Your session has expired. Please log in again.');
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        navigate('/login');
+        logout();
         return;
       }
         const response = await fetch(logoutUrl, {
@@ -45,30 +42,21 @@ export default function Logout({ setLoggedIn, setUser }) {
 
       if (response.ok) {
         alert('Logged out successfully.');
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        navigate("/");
+        logout();
         
         console.log("Logout successful.")
 
       } else {
         const message = response.json();
-        setErrorMessage(message.error.message);
-        console.error(errorMessage);
-        localStorage.removeItem("jwt");
-        setLoggedIn(false);
-        setUser(null);
-        navigate("/login");
+        console.error(message.error.message);
+        logout();
         alert("Your session has expired, please sign in again.");
 
     }
 
     } catch (error) {
         console.error("An error occurred:", error.message);
-        localStorage.removeItem("jwt");
-        setUser(null);
-        setLoggedIn(false);
+        logout();
         alert(error.message)
     }
     
diff --git a/frontend/src/components/auth/Registration.jsx b/frontend/src/components/auth/Registration.jsx
index c8aad629..05e32828 100644
--- a/frontend/src/components/auth/Registration.jsx
+++ b/frontend/src/components/auth/Registration.jsx
@@ -67,16 +67,7 @@ export default function Registration() {
         // Handle successful registration (e.g., redirect to another page)
         console.log("Registration successful!");
         setRegistrationMessages("Registration successful!");
-
-
-        // Clear input fields
-        setEmail("");
-        setPassword("");
-        // Removed name field and added firstName and lastName field
-        setFirstName("");
-        setLastName("");
-
-
+        
         navigate("/login");
       } else {
         // Handle registration error
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index 9e68bfb2..cae8ec99 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useContext } from "react";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import SampleChart from "../SampleChart";
 import SampleChartThree from "../SampleChartThree";
@@ -7,8 +7,10 @@ import { API_URL, API_URL2,ADMIN_URL } from "../../constants";
 import DataEndpoint from "../DataEndpoint";
 import DashTable from "../DashTable";
 import EditModal from "../EditModal";
+import { AuthContext } from "../auth/AuthContext";
 
-const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
+const AdminDashboard = () => {
+  const { user, setLoggedIn, setUser } = useContext(AuthContext);
   // Necessary api endpoints
   const userUrl = `${API_URL}/users`;
   const kitsUrl = `${API_URL}/kits`;
@@ -143,8 +145,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -152,8 +152,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -161,8 +159,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -177,8 +173,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -186,8 +180,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
 
@@ -289,7 +281,7 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
+          <DashCardSet />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -321,17 +313,13 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.userUrl}
                             apiEndpoint={userUrl}
                             handleShow={(item) => handleShow(item, "user")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
-                          />
+                            />
                         )}
                         {selectedEndpoint === kitsUrl && (
                           <DashTable
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -339,8 +327,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -350,8 +336,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -359,8 +343,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -368,8 +350,6 @@ const AdminDashboard = ({ user, setLoggedIn, setUser }) => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Confirmation.jsx b/frontend/src/components/pages/Confirmation.jsx
index 6187dd27..6a38a145 100644
--- a/frontend/src/components/pages/Confirmation.jsx
+++ b/frontend/src/components/pages/Confirmation.jsx
@@ -1,9 +1,10 @@
-import React, {useEffect} from "react";
-import { API_URL } from "../../constants";
+import React, {useContext, useEffect} from "react";
+import { AuthContext } from "../auth/AuthContext";
 
 
 
-function Confirmation({user}) {
+function Confirmation() {
+    const { user } = useContext(AuthContext);
     // Displays confirmation for kit request success
     const current_user = user?.name || "Guest";
 
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 1c5390d9..922590f5 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../constants';
+import { AuthContext } from '../auth/AuthContext';
 
 
-function Contact({ user, setLoggedIn, setUser }) {
+function Contact() {
+    const { user } = useContext(AuthContext);
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phone, setPhone] = useState("");
@@ -47,14 +49,12 @@ function Contact({ user, setLoggedIn, setUser }) {
                 const errorData = await response.json();
                 setErrorMessages(errorData.errors.join(", "));
             } else {
+                // Handle success
                 alert("Contact submitted successfully!");
-                navigate("/");
+                navigate("/")
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
-            setLoggedIn(false);
-            setUser(null);
-            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Donation.jsx b/frontend/src/components/pages/Donation.jsx
index 4376e575..3f81aaa3 100644
--- a/frontend/src/components/pages/Donation.jsx
+++ b/frontend/src/components/pages/Donation.jsx
@@ -1,8 +1,11 @@
-import React, {useState, useEffect } from "react"
+import React, {useState, useEffect, useContext } from "react"
 import { API_URL } from "../../constants"
 import { useNavigate } from "react-router-dom"
+import { AuthContext } from "../auth/AuthContext";
+import Logout from "../auth/Logout";
 
-function Donation({user}) {
+function Donation() {
+    const { user, logout } = useContext(AuthContext);
     // Add useState for first name and last name
     const [errorMessages, setErrorMessages] = useState("");
     const [firstName, setFirstName] = useState(user ? user.first_name : "");
@@ -62,7 +65,8 @@ function Donation({user}) {
         if (!jwt) {
           console.log("No user logged in. Please log in to continue.");
           // Redirect to login
-          navigate('/login')
+          logout();
+          alert("Your token has expired. Please login again.")
           return;
       }
     
@@ -83,14 +87,6 @@ function Donation({user}) {
         console.log("Donation saved.");
         alert("Donation submitted successfully. Thank you for your donation!")
 
-        // Clear input fields
-                
-        setAmount("");
-        setCardNumber("");
-        setExpirationDate("");
-        setCvv("");
-        setSavePaymentInfo(false);
-
         navigate("/")
       } else {
         // Handle request error
@@ -102,6 +98,7 @@ function Donation({user}) {
       // Handle network or other errors
       setErrorMessages("An error occurred: " + error.message);
       console.log(error)
+      logout();
     }
 
         
diff --git a/frontend/src/components/pages/Home.jsx b/frontend/src/components/pages/Home.jsx
index 22c3e822..2bd8b118 100644
--- a/frontend/src/components/pages/Home.jsx
+++ b/frontend/src/components/pages/Home.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import React from 'react'
 import Header from '../Header';
 import { Link } from 'react-router-dom';
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index fdd0af87..7cd81574 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { API_URL } from "../../constants";
 import { Link } from "react-router-dom";
+import { AuthContext } from "../auth/AuthContext";
 
-
-
-function Kits({user}) {
+function Kits() {
+  const { user } = useContext(AuthContext);
   const [kits, setKits] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,9 +28,6 @@ function Kits({user}) {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/components/pages/RequestKit.jsx b/frontend/src/components/pages/RequestKit.jsx
index 12ee19bf..03cdee55 100644
--- a/frontend/src/components/pages/RequestKit.jsx
+++ b/frontend/src/components/pages/RequestKit.jsx
@@ -1,12 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { API_URL } from "../../constants";
 import { useLocation, useNavigate } from "react-router-dom";
+import { AuthContext } from "../auth/AuthContext";
 import * as Yup from "yup";
 import Address from "../Address";
 
 
-function RequestKit({ user, setUser }) {
-
+function RequestKit() {
+  const { user, logout } = useContext(AuthContext);
   const validationSchema = Yup.object().shape({
     phone: Yup.string().required('Phone is required'),
     schoolYear: Yup.string().required('School year is required'),
@@ -102,7 +103,6 @@ function RequestKit({ user, setUser }) {
       },
     };
 
-
     try {
       // Send POST request to registration endpoint
       await validationSchema.validate(orderForm, { abortEarly: false });
@@ -139,7 +139,8 @@ function RequestKit({ user, setUser }) {
         setOrderMessages(newErrors);
       } else {
         // Handle network or other errors
-        setOrderMessages({general: "Network error: " + error});
+        setOrderMessages({general: "Network error: " + error.message});
+        logout();
       }
       console.error(error);
     }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 4041256c..25de00ef 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,12 +2,15 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
+import { AuthProvider } from './components/auth/AuthContext.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <Router>
-    <App />
+      <AuthProvider>
+        <App />
+      </AuthProvider>
     </Router>
   </StrictMode>,
 )

From f1d0ce8b3aa1286f917c2ba84bc91651c7acc454 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:25:41 -0600
Subject: [PATCH 15/22] Add AuthContext

---
 frontend/src/components/auth/AuthContext.jsx | 73 ++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 frontend/src/components/auth/AuthContext.jsx

diff --git a/frontend/src/components/auth/AuthContext.jsx b/frontend/src/components/auth/AuthContext.jsx
new file mode 100644
index 00000000..ab57c0f4
--- /dev/null
+++ b/frontend/src/components/auth/AuthContext.jsx
@@ -0,0 +1,73 @@
+import React, { createContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { jwtDecode } from 'jwt-decode';
+import { API_URL2 } from '../../constants';
+
+export const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [user, setUser] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = localStorage.getItem('jwt');
+      if (token) {
+        try {
+            console.log('Token:', token); // Debugging: Log the token
+            const decoded = jwtDecode(token);
+            console.log('Decoded token:', decoded); // Debugging: Log the decoded token
+          const now = Date.now() / 1000;
+
+          if (decoded.exp > now) {
+            const response = await fetch(`${API_URL2}/current_user`, {
+              headers: {
+                Authorization: `Bearer ${token}`,
+              },
+            });
+
+            if (response.ok) {
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                  const data = await response.json();
+                  setUser(data);
+                  setLoggedIn(true);
+                } else {
+                  throw new Error('Invalid response format');
+                }
+            } else {
+              handleUnauthorized();
+            }
+          } else {
+            handleUnauthorized();
+          }
+        } catch (error) {
+          console.error('Token decoding failed:', error);
+          handleUnauthorized();
+        }
+      } else {
+        handleUnauthorized();
+      }
+    };
+
+    const handleUnauthorized = () => {
+      logout();
+    };
+
+    checkAuth();
+  }, [navigate]);
+
+  const logout = () => {
+    setLoggedIn(false);
+    setUser(null);
+    localStorage.removeItem('jwt');
+    navigate("/login");
+  };
+
+  return (
+    <AuthContext.Provider value={{ loggedIn, user, setLoggedIn, setUser, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
\ No newline at end of file

From 44ca80bbc066caa21ab34f7d411eaa57cadc8856 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 16/22] Trying to fix retained token bug

---
 frontend/src/App.jsx                      | 3 ++-
 frontend/src/components/auth/Logout.jsx   | 2 +-
 frontend/src/components/pages/Contact.jsx | 3 +++
 frontend/src/components/pages/Kits.jsx    | 3 +++
 frontend/src/main.jsx                     | 2 +-
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 255afb03..4c4473f2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
 import './App.css';
 import { useContext } from 'react';
-import {BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from "react-router-dom";
+import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
@@ -32,6 +32,7 @@ import { AuthContext } from './components/auth/AuthContext';
 function App() {
   const { loggedIn, user } = useContext(AuthContext);
 
+
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index e1fddc85..015957c3 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { AuthContext } from "./AuthContext";
 
 export default function Logout() {
-  const { setLoggedIn, setUser, logout } = useContext(AuthContext);
+  const { logout } = useContext(AuthContext);
   const [errorMessage, setErrorMessage] = useState("");
   const navigate = useNavigate();
 
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 922590f5..2d9366d6 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -55,6 +55,9 @@ function Contact() {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
+            setLoggedIn(false);
+            setUser(null);
+            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index 7cd81574..4a66f50e 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -28,6 +28,9 @@ function Kits() {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 25de00ef..1585f524 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -13,4 +13,4 @@ createRoot(document.getElementById('root')).render(
       </AuthProvider>
     </Router>
   </StrictMode>,
-)
+);

From 50db65efd8f53df8a2daaa441f0a40bb5fa7c545 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:56:32 -0600
Subject: [PATCH 17/22] Corrected bug from rebase and conflict merge

---
 frontend/src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4c4473f2..f39496d8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
 import './App.css';
 import { useContext } from 'react';
-import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';

From da2572c7fcabd818ae6740c462a505c6ca2600e6 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:57:56 -0600
Subject: [PATCH 18/22] Remove debug code

---
 frontend/src/components/auth/AuthContext.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/auth/AuthContext.jsx b/frontend/src/components/auth/AuthContext.jsx
index ab57c0f4..5f3b67d1 100644
--- a/frontend/src/components/auth/AuthContext.jsx
+++ b/frontend/src/components/auth/AuthContext.jsx
@@ -15,9 +15,7 @@ export const AuthProvider = ({ children }) => {
       const token = localStorage.getItem('jwt');
       if (token) {
         try {
-            console.log('Token:', token); // Debugging: Log the token
-            const decoded = jwtDecode(token);
-            console.log('Decoded token:', decoded); // Debugging: Log the decoded token
+          const decoded = jwtDecode(token);
           const now = Date.now() / 1000;
 
           if (decoded.exp > now) {

From fc8be45999ad9c4c7e6870b5e9f39d5a31dea755 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 19/22] Trying to fix retained token bug

---
 frontend/src/components/auth/Login.jsx        |  2 --
 .../src/components/pages/AdminDashboard.jsx   | 22 ++++++++++++++++++-
 frontend/src/main.jsx                         |  1 +
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index ded15b7d..afb48810 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -166,5 +166,3 @@ export default function Login() {
   
     );
   }
-
-
diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index cae8ec99..cf2f7e46 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -145,6 +145,8 @@ const AdminDashboard = () => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -152,6 +154,8 @@ const AdminDashboard = () => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -159,6 +163,8 @@ const AdminDashboard = () => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -173,6 +179,8 @@ const AdminDashboard = () => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -180,6 +188,8 @@ const AdminDashboard = () => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
 
@@ -281,7 +291,7 @@ const AdminDashboard = () => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet />
+          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -320,6 +330,8 @@ const AdminDashboard = () => {
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -327,6 +339,8 @@ const AdminDashboard = () => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -336,6 +350,8 @@ const AdminDashboard = () => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -343,6 +359,8 @@ const AdminDashboard = () => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -350,6 +368,8 @@ const AdminDashboard = () => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 1585f524..a30b91d7 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
+import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
 import { AuthProvider } from './components/auth/AuthContext.jsx'
 import './index.css'

From 137ea8bc2f456ff584c23c0a230486e8c718a0e3 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 18:23:37 -0600
Subject: [PATCH 20/22] Handle jwt auth and state management with AuthContext

---
 .../src/components/pages/AdminDashboard.jsx   | 22 +------------------
 frontend/src/components/pages/Contact.jsx     |  3 ---
 frontend/src/components/pages/Kits.jsx        |  3 ---
 3 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index cf2f7e46..cae8ec99 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -145,8 +145,6 @@ const AdminDashboard = () => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -154,8 +152,6 @@ const AdminDashboard = () => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -163,8 +159,6 @@ const AdminDashboard = () => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -179,8 +173,6 @@ const AdminDashboard = () => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -188,8 +180,6 @@ const AdminDashboard = () => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
-      setLoggedIn={setLoggedIn}
-      setUser={setUser}
     />
   );
 
@@ -291,7 +281,7 @@ const AdminDashboard = () => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
+          <DashCardSet />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -330,8 +320,6 @@ const AdminDashboard = () => {
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -339,8 +327,6 @@ const AdminDashboard = () => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -350,8 +336,6 @@ const AdminDashboard = () => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -359,8 +343,6 @@ const AdminDashboard = () => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -368,8 +350,6 @@ const AdminDashboard = () => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
-                            setLoggedIn={setLoggedIn}
-                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 2d9366d6..922590f5 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -55,9 +55,6 @@ function Contact() {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
-            setLoggedIn(false);
-            setUser(null);
-            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index 4a66f50e..7cd81574 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -28,9 +28,6 @@ function Kits() {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
-        setLoggedIn(false);
-        setUser(null);
-        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }

From 7946095249c841edf2f09d62dab4d3852df2fc75 Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Mon, 9 Dec 2024 22:06:46 -0600
Subject: [PATCH 21/22] Trying to fix retained token bug

---
 .../src/components/pages/AdminDashboard.jsx   | 22 ++++++++++++++++++-
 frontend/src/components/pages/Contact.jsx     |  3 +++
 frontend/src/components/pages/Kits.jsx        |  3 +++
 frontend/src/main.jsx                         |  1 -
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/AdminDashboard.jsx b/frontend/src/components/pages/AdminDashboard.jsx
index cae8ec99..cf2f7e46 100644
--- a/frontend/src/components/pages/AdminDashboard.jsx
+++ b/frontend/src/components/pages/AdminDashboard.jsx
@@ -145,6 +145,8 @@ const AdminDashboard = () => {
       headers={headers.userUrl}
       apiEndpoint={userUrl}
       handleShow={(item) => handleShow(item, "user")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitsTable = () => (
@@ -152,6 +154,8 @@ const AdminDashboard = () => {
       headers={headers.kitsUrl}
       apiEndpoint={kitsUrl}
       handleShow={(item) => handleShow(item, "kit")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const KitItemsTable = () => (
@@ -159,6 +163,8 @@ const AdminDashboard = () => {
       header={headers.kitItemsUrl}
       apiEndpoint={kitItemsUrl}
       handleShow={(item) => handleShow(item, "kitItem")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const OrdersTable = () => (
@@ -173,6 +179,8 @@ const AdminDashboard = () => {
       header={headers.donationUrl}
       apiEndpoint={donationUrl}
       handleShow={(item) => handleShow(item, "donation")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
   const ContactsTable = () => (
@@ -180,6 +188,8 @@ const AdminDashboard = () => {
       header={headers.contactsUrl}
       apiEndpoint={contactsUrl}
       handleShow={(item) => handleShow(item, "contact")}
+      setLoggedIn={setLoggedIn}
+      setUser={setUser}
     />
   );
 
@@ -281,7 +291,7 @@ const AdminDashboard = () => {
       </div>
       <main className="mt-3 pt-3" style={{ zIndex: -500 }}>
         <div className="container-fluid">
-          <DashCardSet />
+          <DashCardSet user={user} setUser={setUser} setLoggedIn={setLoggedIn} />
           <div className="row">
             <div className="col-md-6 mb-3">
               <div className="card">
@@ -320,6 +330,8 @@ const AdminDashboard = () => {
                             headers={headers.kitsUrl}
                             apiEndpoint={kitsUrl}
                             handleShow={(item) => handleShow(item, "kit")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === kitItemsUrl && (
@@ -327,6 +339,8 @@ const AdminDashboard = () => {
                             headers={headers.kitItemsUrl}
                             apiEndpoint={kitItemsUrl}
                             handleShow={(item) => handleShow(item, "kitItem")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === ordersUrl && (
@@ -336,6 +350,8 @@ const AdminDashboard = () => {
                             handleShow={(item) =>
                               handleShow(item, "order")
                             }
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === donationUrl && (
@@ -343,6 +359,8 @@ const AdminDashboard = () => {
                             headers={headers.donationUrl}
                             apiEndpoint={donationUrl}
                             handleShow={(item) => handleShow(item, "donation")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                         {selectedEndpoint === contactsUrl && (
@@ -350,6 +368,8 @@ const AdminDashboard = () => {
                             headers={headers.contactsUrl}
                             apiEndpoint={contactsUrl}
                             handleShow={(item) => handleShow(item, "contact")}
+                            setLoggedIn={setLoggedIn}
+                            setUser={setUser}
                           />
                         )}
                       </>
diff --git a/frontend/src/components/pages/Contact.jsx b/frontend/src/components/pages/Contact.jsx
index 922590f5..2d9366d6 100644
--- a/frontend/src/components/pages/Contact.jsx
+++ b/frontend/src/components/pages/Contact.jsx
@@ -55,6 +55,9 @@ function Contact() {
             }
         } catch (error) {
             setErrorMessages("An error occurred. Please try again.");
+            setLoggedIn(false);
+            setUser(null);
+            localStorage.removeItem('jwt');
         }
     };
 
diff --git a/frontend/src/components/pages/Kits.jsx b/frontend/src/components/pages/Kits.jsx
index 7cd81574..4a66f50e 100644
--- a/frontend/src/components/pages/Kits.jsx
+++ b/frontend/src/components/pages/Kits.jsx
@@ -28,6 +28,9 @@ function Kits() {
       } catch (e) {
         setError("An error occurred.");
         console.log("An error occurred", e);
+        setLoggedIn(false);
+        setUser(null);
+        localStorage.removeItem('jwt');
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index a30b91d7..1585f524 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,7 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
 import { AuthProvider } from './components/auth/AuthContext.jsx'
 import './index.css'

From 46825e1f25bb53ff320843cf3a9f742435c1905d Mon Sep 17 00:00:00 2001
From: Marcia <juddhope@gmail.com>
Date: Wed, 18 Dec 2024 23:45:30 -0600
Subject: [PATCH 22/22] Modified auth context error handling for better ux

---
 app/controllers/current_user_controller.rb   | 2 +-
 config/routes.rb                             | 2 +-
 frontend/src/components/DashCardSet.jsx      | 8 ++------
 frontend/src/components/DashTable.jsx        | 5 +----
 frontend/src/components/Navigation.jsx       | 6 +++---
 frontend/src/components/NewKit.jsx           | 5 +----
 frontend/src/components/NewKitItem.jsx       | 5 +----
 frontend/src/components/NewUser.jsx          | 5 +----
 frontend/src/components/auth/AuthContext.jsx | 1 +
 frontend/src/components/auth/CurrentUser.jsx | 2 +-
 frontend/src/components/auth/Login.jsx       | 5 +----
 frontend/src/components/pages/Donation.jsx   | 7 +++----
 frontend/src/components/pages/RequestKit.jsx | 3 +--
 13 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/app/controllers/current_user_controller.rb b/app/controllers/current_user_controller.rb
index dc0b2990..2fcd3c9a 100644
--- a/app/controllers/current_user_controller.rb
+++ b/app/controllers/current_user_controller.rb
@@ -2,7 +2,7 @@ class CurrentUserController < ApplicationController
   before_action :authenticate_user!
 
   # If a user is authenticated, they are set as the current user.
-  def index
+  def show
     render json: UserSerializer.new(current_user).serializable_hash[:data][:attributes], status: :ok
   end
 end
diff --git a/config/routes.rb b/config/routes.rb
index 84093104..f212e4b9 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
-  get "/current_user", to: "current_user#index"
+  get "/current_user", to: "current_user#show"
   devise_for :users, path: "", path_names: {
     sign_in: "login",
     sign_out: "logout",
diff --git a/frontend/src/components/DashCardSet.jsx b/frontend/src/components/DashCardSet.jsx
index ef33db19..96b62abb 100644
--- a/frontend/src/components/DashCardSet.jsx
+++ b/frontend/src/components/DashCardSet.jsx
@@ -1,10 +1,8 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
-import { AuthContext } from './auth/AuthContext';
 
 const DashCardSet = () => {
-  const { logout } = useContext(AuthContext);
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -28,17 +26,15 @@ const DashCardSet = () => {
           setTotalDonations(parseFloat(data.total_donations));
         } else {
           console.error('Failed to fetch data:', response.statusText);
-          logout();
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
         alert("An error occurred.")
-        logout();
       }
     };
 
     fetchDashboardData();
-  }, [dashUrl, logout]);
+  }, [dashUrl]);
 
   return (
     // Displays data using the dashboard card component
diff --git a/frontend/src/components/DashTable.jsx b/frontend/src/components/DashTable.jsx
index d04c2f34..1c29e0a8 100644
--- a/frontend/src/components/DashTable.jsx
+++ b/frontend/src/components/DashTable.jsx
@@ -1,9 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { AuthContext } from './auth/AuthContext';
+import React, { useEffect, useState } from 'react';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
 const DashTable = ({ apiEndpoint, headers, handleShow }) => {
-  const { logout } = useContext(AuthContext);
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -30,7 +28,6 @@ const DashTable = ({ apiEndpoint, headers, handleShow }) => {
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
-        logout();
         alert("A network error occurred.")
       } finally {
         setLoading(false);
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
index 83ebe82c..1a7b79e9 100644
--- a/frontend/src/components/Navigation.jsx
+++ b/frontend/src/components/Navigation.jsx
@@ -1,12 +1,12 @@
 import React, { useContext } from "react"
 import { Link, useNavigate } from "react-router-dom";
 import CurrentUser from "./auth/CurrentUser";
-import Logout from "./auth/Logout";
 import { AuthContext } from "./auth/AuthContext";
+import Logout from "./auth/Logout";
 
 // Passed in logged in and user state
 function Navigation() {
-   const { loggedIn, user, logout } = useContext(AuthContext);
+   const { loggedIn, user } = useContext(AuthContext);
    const navigate = useNavigate();
    const handleDonateClick = (e) => {
     e.preventDefault(); 
@@ -15,7 +15,7 @@ function Navigation() {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
-        logout();
+        navigate("/login");
     } else {
         // If user is logged in, navigate to the donation page
         navigate("/donation");
diff --git a/frontend/src/components/NewKit.jsx b/frontend/src/components/NewKit.jsx
index b1c5e842..9d39fa68 100644
--- a/frontend/src/components/NewKit.jsx
+++ b/frontend/src/components/NewKit.jsx
@@ -1,12 +1,10 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
-import { AuthContext } from './auth/AuthContext';
 
 // Component for creating a new kit
 const NewKit = () => {
-  const { logout } = useContext(AuthContext);
   const [image, setImage] = useState('');
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -64,7 +62,6 @@ const NewKit = () => {
       } catch (error) {
         
         setMessages("An error occurred: " + error.message);
-        logout();
         console.log(error.message);
       }
     };
diff --git a/frontend/src/components/NewKitItem.jsx b/frontend/src/components/NewKitItem.jsx
index def04ae0..b8713d02 100644
--- a/frontend/src/components/NewKitItem.jsx
+++ b/frontend/src/components/NewKitItem.jsx
@@ -1,11 +1,9 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
-import { AuthContext } from './auth/AuthContext';
 
 const NewKitItem = () => {
-  const { logout } = useContext(AuthContext);
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [image, setImage] = useState(null);
@@ -61,7 +59,6 @@ const NewKitItem = () => {
         
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
-        logout();
       }
     };
 
diff --git a/frontend/src/components/NewUser.jsx b/frontend/src/components/NewUser.jsx
index 84718b1f..af035d08 100644
--- a/frontend/src/components/NewUser.jsx
+++ b/frontend/src/components/NewUser.jsx
@@ -1,11 +1,9 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL2 } from '../constants';
-import { AuthContext } from './auth/AuthContext';
 
 const NewUser = () => {
-  const { logout } = useContext(AuthContext);
   const [userData, setUserData] = useState("");
   const [email, setEmail] = useState(''); 
   const [password, setPassword] = useState(''); 
@@ -67,7 +65,6 @@ const NewUser = () => {
         
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
-        logout();
       }
     };
   
diff --git a/frontend/src/components/auth/AuthContext.jsx b/frontend/src/components/auth/AuthContext.jsx
index 5f3b67d1..10998704 100644
--- a/frontend/src/components/auth/AuthContext.jsx
+++ b/frontend/src/components/auth/AuthContext.jsx
@@ -30,6 +30,7 @@ export const AuthProvider = ({ children }) => {
                 if (contentType && contentType.includes('application/json')) {
                   const data = await response.json();
                   setUser(data);
+                  console.log("Current user data: ", data)
                   setLoggedIn(true);
                 } else {
                   throw new Error('Invalid response format');
diff --git a/frontend/src/components/auth/CurrentUser.jsx b/frontend/src/components/auth/CurrentUser.jsx
index 0aa4070b..537367f1 100644
--- a/frontend/src/components/auth/CurrentUser.jsx
+++ b/frontend/src/components/auth/CurrentUser.jsx
@@ -11,7 +11,7 @@ const CurrentUser = () => {
         // Displays a welcome message and if admin, a link to access admin dashboard.
         <div className='m-0 p-0 d-inline-flex'>
             <p className='text-white bold' style={{ marginRight: 100 }}>
-            <em>Welcome, {user.first_name}!</em>
+            <em>Welcome, {user.name ? user.name.split(" ")[0] : "Guest"}!</em>
             </p>
             {user && user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
                 </Link>}
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index afb48810..81d926be 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -9,7 +9,7 @@ import { AuthContext } from "./AuthContext";
 
 export default function Login() {
     // Handles login, setting the data for the user
-    const { setLoggedIn, logout } = useContext(AuthContext);
+    const { setLoggedIn } = useContext(AuthContext);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     
@@ -58,14 +58,12 @@ export default function Login() {
           console.log("Login successful!");
           
           setLoggedIn(true);
-          <CurrentUser />
   
           navigate("/")
         } else {
           // Handle registration error
           const errorData = await response.json();
           setLoginMessages('Login failed. Please check your credentials and try again.');
-          logout();
           
 
       // Access the status and message in the JSON response
@@ -76,7 +74,6 @@ export default function Login() {
         // Handle other errors
         console.log("An error occurred:", error)
         setLoginMessages("An error occurred, please try again.");
-        logout();
       }
     };
   
diff --git a/frontend/src/components/pages/Donation.jsx b/frontend/src/components/pages/Donation.jsx
index 3f81aaa3..aee373ad 100644
--- a/frontend/src/components/pages/Donation.jsx
+++ b/frontend/src/components/pages/Donation.jsx
@@ -2,10 +2,10 @@ import React, {useState, useEffect, useContext } from "react"
 import { API_URL } from "../../constants"
 import { useNavigate } from "react-router-dom"
 import { AuthContext } from "../auth/AuthContext";
-import Logout from "../auth/Logout";
+
 
 function Donation() {
-    const { user, logout } = useContext(AuthContext);
+    const { user } = useContext(AuthContext);
     // Add useState for first name and last name
     const [errorMessages, setErrorMessages] = useState("");
     const [firstName, setFirstName] = useState(user ? user.first_name : "");
@@ -65,7 +65,7 @@ function Donation() {
         if (!jwt) {
           console.log("No user logged in. Please log in to continue.");
           // Redirect to login
-          logout();
+          navigate("/login")
           alert("Your token has expired. Please login again.")
           return;
       }
@@ -98,7 +98,6 @@ function Donation() {
       // Handle network or other errors
       setErrorMessages("An error occurred: " + error.message);
       console.log(error)
-      logout();
     }
 
         
diff --git a/frontend/src/components/pages/RequestKit.jsx b/frontend/src/components/pages/RequestKit.jsx
index 03cdee55..36bcc564 100644
--- a/frontend/src/components/pages/RequestKit.jsx
+++ b/frontend/src/components/pages/RequestKit.jsx
@@ -7,7 +7,7 @@ import Address from "../Address";
 
 
 function RequestKit() {
-  const { user, logout } = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
   const validationSchema = Yup.object().shape({
     phone: Yup.string().required('Phone is required'),
     schoolYear: Yup.string().required('School year is required'),
@@ -140,7 +140,6 @@ function RequestKit() {
       } else {
         // Handle network or other errors
         setOrderMessages({general: "Network error: " + error.message});
-        logout();
       }
       console.error(error);
     }