From bf8a2dad2361f45e7fc8c2362cf95e182bca9763 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Mon, 2 Sep 2024 16:48:37 -0700
Subject: [PATCH] feat: actually fix protected route

---
 src/components/BusinessForm/BusinessForm.tsx  | 10 +-----
 src/components/BusinessSetup/SetupSignup.tsx  |  2 +-
 src/components/CatchAll.tsx                   | 14 +++------
 .../DonationItemsTable/DonationItemsTable.tsx | 11 -------
 .../DonationTrackingTable.tsx                 | 12 -------
 src/components/Sidebar/Sidebar.tsx            | 17 ++--------
 src/components/ViewBusiness/ViewBusiness.tsx  | 10 ------
 src/contexts/AuthContext.tsx                  | 21 +++++++++----
 src/utils/ProtectedRoute.tsx                  | 31 ++-----------------
 9 files changed, 27 insertions(+), 101 deletions(-)

diff --git a/src/components/BusinessForm/BusinessForm.tsx b/src/components/BusinessForm/BusinessForm.tsx
index 40e4e4d..f30dcd7 100644
--- a/src/components/BusinessForm/BusinessForm.tsx
+++ b/src/components/BusinessForm/BusinessForm.tsx
@@ -76,7 +76,7 @@ const ADDITIONAL_INFO_ITEMS = [
 export const BusinessForm = ({ edit = true }) => {
   const { id } = useParams();
   const { backend } = useBackend();
-  const { isAdmin, currentUser } = useAuth();
+  const { currentUser } = useAuth();
   const navigate = useNavigate();
 
   const deleteDisclosure = useDisclosure();
@@ -108,14 +108,6 @@ export const BusinessForm = ({ edit = true }) => {
   const [notification, setNotification] = useState([]);
 
   useEffect(() => {
-    const checkIsAdmin = async () => {
-      if (!(await isAdmin())) {
-        navigate('/BusinessDashboard');
-      }
-    };
-
-    checkIsAdmin();
-
     const fetchNotifications = async () => {
       const response = await backend.get('/notification/0');
       setNotification(response.data);
diff --git a/src/components/BusinessSetup/SetupSignup.tsx b/src/components/BusinessSetup/SetupSignup.tsx
index 021988f..2c0cc86 100644
--- a/src/components/BusinessSetup/SetupSignup.tsx
+++ b/src/components/BusinessSetup/SetupSignup.tsx
@@ -74,7 +74,7 @@ export const SetupSignup = ({ admin, nextStep }: SetUpFirstFormProps) => {
       setLoading(true);
 
       if (admin) {
-        if (await isAdmin()) {
+        if (isAdmin) {
           await signup({ email, password });
           navigate('/AdminDashboard');
         } else {
diff --git a/src/components/CatchAll.tsx b/src/components/CatchAll.tsx
index 82d6178..91623b5 100644
--- a/src/components/CatchAll.tsx
+++ b/src/components/CatchAll.tsx
@@ -8,15 +8,11 @@ export const CatchAll = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    const checkIsAdmin = async () => {
-      if (await isAdmin()) {
-        navigate('/AdminDashboard');
-      } else {
-        navigate('/BusinessDashboard');
-      }
-    };
-
-    checkIsAdmin();
+    if (isAdmin) {
+      navigate('/AdminDashboard');
+    } else {
+      navigate('/BusinessDashboard');
+    }
   }, []);
 
   return <p>Route not found... redirecting...</p>;
diff --git a/src/components/DonationItemsTable/DonationItemsTable.tsx b/src/components/DonationItemsTable/DonationItemsTable.tsx
index b413f58..cc76a17 100644
--- a/src/components/DonationItemsTable/DonationItemsTable.tsx
+++ b/src/components/DonationItemsTable/DonationItemsTable.tsx
@@ -21,9 +21,7 @@ import {
   Tr,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useNavigate } from 'react-router-dom';
 
-import { useAuth } from '../../contexts/AuthContext';
 import { useBackend } from '../../contexts/BackendContext';
 import { pageStyle, pageTitleStyle } from '../../styles/sharedStyles';
 import { Donation } from '../../types/donation';
@@ -32,24 +30,15 @@ import DonationsDeleteConfirmationModal from './DonationsDeleteConfirmationModal
 import { DonationsModal } from './DonationsModal';
 
 export const DonationItemsTable = () => {
-  const { isAdmin } = useAuth();
   const [notifications, setNotifications] = useState([]);
   const { backend } = useBackend();
-  const navigate = useNavigate();
 
   useEffect(() => {
-    const checkIsAdmin = async () => {
-      if (!(await isAdmin())) {
-        navigate('/BusinessDashboard');
-      }
-    };
-
     const fetchNotifications = async () => {
       const response = await backend.get('/notification/0');
       setNotifications(response.data);
     };
 
-    checkIsAdmin();
     fetchNotifications();
   }, [backend]);
 
diff --git a/src/components/DonationTrackingTable/DonationTrackingTable.tsx b/src/components/DonationTrackingTable/DonationTrackingTable.tsx
index 1081c2b..4b3a91f 100644
--- a/src/components/DonationTrackingTable/DonationTrackingTable.tsx
+++ b/src/components/DonationTrackingTable/DonationTrackingTable.tsx
@@ -22,9 +22,7 @@ import {
   Tr,
   useToast,
 } from '@chakra-ui/react';
-import { useNavigate } from 'react-router-dom';
 
-import { useAuth } from '../../contexts/AuthContext';
 import { useBackend } from '../../contexts/BackendContext';
 import { pageStyle, pageTitleStyle } from '../../styles/sharedStyles';
 import { Donation } from '../../types/donation';
@@ -51,9 +49,7 @@ const TAB_HEADERS = ['month', 'quarter', 'year', 'all'];
 
 export const DonationTrackingTable = () => {
   const { backend } = useBackend();
-  const { isAdmin } = useAuth();
   const toast = useToast();
-  const navigate = useNavigate();
 
   const [donationTrackingTableData, setDonationTrackingTableData] = useState<Donation[]>([]);
   const [checkedSet, setCheckedSet] = useState<Set<number>>(new Set());
@@ -74,12 +70,6 @@ export const DonationTrackingTable = () => {
   };
 
   useEffect(() => {
-    const checkIsAdmin = async () => {
-      if (!(await isAdmin())) {
-        navigate('/BusinessDashboard');
-      }
-    };
-
     const getNotifications = async () => {
       try {
         const notificationResponse = await backend.get(`/notification/0`);
@@ -89,8 +79,6 @@ export const DonationTrackingTable = () => {
       }
     };
 
-    checkIsAdmin();
-
     try {
       getNotifications();
     } catch (error) {
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 7457fe5..776fab3 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -46,19 +46,8 @@ const ADMIN_SIDEBAR = [
 export const Sidebar = () => {
   const { backend } = useBackend();
 
-  const [isAdminUser, setIsAdminUser] = useState(false);
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  useEffect(() => {
-    const checkIsAdmin = async () => {
-      if (await isAdmin()) {
-        setIsAdminUser(true);
-      }
-    };
-
-    checkIsAdmin();
-  }, []);
-
   useEffect(() => {
     getBusinessName();
   }, [backend]);
@@ -83,7 +72,7 @@ export const Sidebar = () => {
     }
   };
 
-  const navList = isAdminUser ? ADMIN_SIDEBAR : BUSINESS_SIDEBAR;
+  const navList = isAdmin ? ADMIN_SIDEBAR : BUSINESS_SIDEBAR;
 
   return (
     <>
@@ -109,7 +98,7 @@ export const Sidebar = () => {
 
               {/* fix me */}
               <Text color="teal" fontWeight="bold">
-                {isAdminUser ? 'Feeding Pets of the Homeless' : businessName}
+                {isAdmin ? 'Feeding Pets of the Homeless' : businessName}
               </Text>
             </HStack>
 
@@ -131,7 +120,7 @@ export const Sidebar = () => {
 
           <Flex flexDirection="column" w="100%">
             <VStack>
-              {!isAdminUser && (
+              {!isAdmin && (
                 <Button
                   onClick={onOpen}
                   width="full"
diff --git a/src/components/ViewBusiness/ViewBusiness.tsx b/src/components/ViewBusiness/ViewBusiness.tsx
index cea3d69..6ceb2ea 100644
--- a/src/components/ViewBusiness/ViewBusiness.tsx
+++ b/src/components/ViewBusiness/ViewBusiness.tsx
@@ -47,7 +47,6 @@ import {
 import { BiEnvelope, BiPackage, BiPencil, BiTrash } from 'react-icons/bi';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { useAuth } from '../../contexts/AuthContext';
 import { useBackend } from '../../contexts/BackendContext';
 import { pageStyle, pageTitleStyle } from '../../styles/sharedStyles';
 import { Business } from '../../types/business';
@@ -75,7 +74,6 @@ const formatCreatedBy = (createdBy: string) => {
 };
 
 export const ViewBusiness = () => {
-  const { isAdmin } = useAuth();
   const { backend } = useBackend();
   const { id } = useParams();
   const navigate = useNavigate();
@@ -220,14 +218,6 @@ export const ViewBusiness = () => {
   };
 
   useEffect(() => {
-    const checkIsAdmin = async () => {
-      if (!(await isAdmin())) {
-        navigate('/BusinessDashboard');
-      }
-    };
-
-    checkIsAdmin();
-
     if (id) {
       fetchBusiness();
     }
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
index 7a3099f..592a961 100644
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@@ -13,11 +13,12 @@ import { useBackend } from './BackendContext';
 
 interface AuthContextType {
   currentUser?: User | null;
+  isAdmin: boolean;
   signup: (credentials: EmailPassword) => Promise<UserCredential>;
   login: (credentials: EmailPassword) => Promise<UserCredential>;
   logout: () => Promise<void>;
   resetPassword: (email: { email: string }) => Promise<void>;
-  isAdmin: (user?: User | null) => Promise<boolean | undefined>;
+  getIsAdmin: () => Promise<boolean | undefined>;
 }
 
 type EmailPassword = {
@@ -38,8 +39,9 @@ export function useAuth() {
 }
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [currentUser, setCurrentUser] = useState<User>();
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [isAdmin, setIsAdmin] = useState<boolean | undefined>(undefined);
 
   const { backend } = useBackend();
 
@@ -66,22 +68,28 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return sendPasswordResetEmail(auth, email);
   };
 
-  const isAdmin = async (user = currentUser) => {
+  const getIsAdmin = async (user = currentUser) => {
     if (user !== null) {
       try {
         const response = await backend.get(`/adminUser/${user.email}`);
-
         return response.data.length > 0;
       } catch (error) {
         console.error('Error checking isAdmin', error);
         return false;
       }
     }
+    return false;
   };
 
   useEffect(() => {
-    const unsubscribe = auth.onAuthStateChanged((user) => {
+    const unsubscribe = auth.onAuthStateChanged(async (user) => {
       setCurrentUser(user);
+      if (user) {
+        const adminStatus = await getIsAdmin(user);
+        setIsAdmin(adminStatus);
+      } else {
+        setIsAdmin(false);
+      }
       setLoading(false);
     });
 
@@ -90,11 +98,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   const value: AuthContextType = {
     currentUser,
+    isAdmin,
     signup,
     login,
     logout,
     resetPassword,
-    isAdmin,
+    getIsAdmin,
   };
 
   return <AuthContext.Provider value={value}>{!loading && children}</AuthContext.Provider>;
diff --git a/src/utils/ProtectedRoute.tsx b/src/utils/ProtectedRoute.tsx
index 2ef55d2..cd524c3 100644
--- a/src/utils/ProtectedRoute.tsx
+++ b/src/utils/ProtectedRoute.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { useAuth } from '../contexts/AuthContext';
@@ -11,35 +10,9 @@ interface ProtectedRouteProps {
 export const ProtectedRoute = ({ Component, isAdminRoute = false }: ProtectedRouteProps) => {
   const { currentUser, isAdmin } = useAuth();
 
-  const [isLoading, setIsLoading] = useState(true);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [isNonAdminOnAdminRoute, setIsNonAdminOnAdminRoute] = useState(false);
-
-  useEffect(() => {
-    const checkAuth = async () => {
-      setIsAuthenticated(currentUser !== null);
-
-      const isUserAdmin = await isAdmin(currentUser);
-
-      if (!isUserAdmin && isAdminRoute) {
-        setIsNonAdminOnAdminRoute(true);
-      }
-
-      setIsLoading(false);
-    };
-
-    checkAuth();
-    setIsAuthenticated(currentUser !== null);
-    setIsLoading(false);
-  }, []);
-
-  if (isLoading) {
-    return <h1>Loading...</h1>;
-  }
-
-  if (isNonAdminOnAdminRoute) {
+  if (!isAdmin && isAdminRoute) {
     return <Navigate to={'/BusinessDashboard'} />;
   }
 
-  return isAuthenticated ? <Component /> : <Navigate to={'/login'} />;
+  return currentUser ? <Component /> : <Navigate to={'/login'} />;
 };