From 805e3f22d56e1192efe57a142c86fd7a21b4fdef Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Fri, 6 Dec 2024 12:00:46 -0600
Subject: [PATCH] fix: fetching org profiles on mount

---
 src/components/Home/DonorDashboard/index.tsx |  5 ++-
 src/components/common/ProtectedRoute.tsx     | 41 ++++----------------
 src/routes.tsx                               | 25 ++++++++++++
 src/stores/userStore.ts                      | 15 ++++---
 4 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/src/components/Home/DonorDashboard/index.tsx b/src/components/Home/DonorDashboard/index.tsx
index 3e2985a..5a4e7ec 100644
--- a/src/components/Home/DonorDashboard/index.tsx
+++ b/src/components/Home/DonorDashboard/index.tsx
@@ -6,10 +6,13 @@ import OrganizationCard from './OrganizationCard';
 
 import { useOrganizationStore } from '@/stores';
 
-import SearchBar from '@/components/common/SearchBar';
+import { SearchBar, LoadingCircle } from '@/components/common';
 
 const DonorDashboard = () => {
   const [searchQuery, setSearchQuery] = useState('');
+  const loading = useOrganizationStore((state) => state.loading);
+  if (loading) return <LoadingCircle />;
+
   const organizationProfiles = useOrganizationStore(
     (state) => state.organizationProfiles
   );
diff --git a/src/components/common/ProtectedRoute.tsx b/src/components/common/ProtectedRoute.tsx
index e2140f0..3da9f3e 100644
--- a/src/components/common/ProtectedRoute.tsx
+++ b/src/components/common/ProtectedRoute.tsx
@@ -1,8 +1,7 @@
 import { Typography } from '@mui/material';
-import { useEffect, type ReactElement } from 'react';
-import { toast } from 'sonner';
+import { type ReactElement } from 'react';
 
-import { useOrganizationStore, useUserStore } from '@/stores';
+import { useUserStore, useOrganizationStore } from '@/stores';
 
 import LoadingCircle from '@/components/common/LoadingCircle';
 
@@ -13,8 +12,12 @@ type ProtectedRouteProps = {
 const ProtectedRoute = ({ element }: ProtectedRouteProps) => {
   const user = useUserStore((state) => state.user);
   const loading = useUserStore((state) => state.loading);
+  const orgLoading = useOrganizationStore((state) => state.loading);
+
+  if (loading || (user && user.role !== 'organization' && orgLoading)) {
+    return <LoadingCircle />;
+  }
 
-  if (loading) return <LoadingCircle />;
   if (!user) {
     return (
       <Typography
@@ -29,36 +32,6 @@ const ProtectedRoute = ({ element }: ProtectedRouteProps) => {
     );
   }
 
-  if (user.role !== 'organization') {
-    const orgLoading = useOrganizationStore((state) => state.loading);
-    const subscribeToProfiles = useOrganizationStore(
-      (state) => state.subscribeToProfiles
-    );
-    const error = useOrganizationStore((state) => state.error);
-
-    useEffect(() => {
-      const unsubscribe = subscribeToProfiles;
-
-      return () => unsubscribe && unsubscribe();
-    }, [subscribeToProfiles]);
-
-    if (orgLoading) return <LoadingCircle />;
-
-    if (error) {
-      toast.error(error);
-      return (
-        <Typography
-          variant='body1'
-          color='error'
-          align='center'
-          sx={{ mt: 4 }}
-        >
-          {error}
-        </Typography>
-      );
-    }
-  }
-
   return element;
 };
 
diff --git a/src/routes.tsx b/src/routes.tsx
index 11b4a17..f7ed885 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,4 +1,8 @@
 import { Routes, Route } from 'react-router-dom';
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+import { useOrganizationStore, useUserStore } from './stores';
 
 import Home from '@/pages/Home';
 import Schedule from '@/pages/Schedule';
@@ -14,6 +18,27 @@ const AppRoutes = () => {
     { path: 'alerts', element: <Alerts /> },
   ];
 
+  const loading = useUserStore((state) => state.loading);
+  const user = useUserStore((state) => state.user);
+  const subscribeToProfiles = useOrganizationStore(
+    (state) => state.subscribeToProfiles
+  );
+  const error = useOrganizationStore((state) => state.error);
+
+  useEffect(() => {
+    if (!loading && (!user || user.role !== 'organization')) {
+      const unsubscribe = subscribeToProfiles;
+
+      return () => unsubscribe && unsubscribe();
+    }
+  }, [loading, user, subscribeToProfiles]);
+
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+    }
+  }, [error]);
+
   return (
     <Routes>
       <Route
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 869c796..40c3079 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -32,13 +32,18 @@ const useUserStore = create<UserState>()(
           async (firebaseUser) => {
             if (firebaseUser) {
               const currentUser = get().user;
-              if (currentUser) {
-                await fetchEventsByIds(currentUser.joinedEvents);
+
+              if (currentUser && currentUser.joinedEvents?.length > 0) {
+                try {
+                  await fetchEventsByIds(currentUser.joinedEvents);
+                } catch (error) {
+                  console.error('Error fetching events:', error);
+                }
               }
+              set({ user: currentUser || undefined });
             } else {
               set({ user: undefined });
-              const eventStore = useEventStore.getState();
-              eventStore.setEvents([]);
+              useEventStore.getState().setEvents([]);
             }
             set({ loading: false });
           }
@@ -69,8 +74,6 @@ const useUserStore = create<UserState>()(
         try {
           set({ loading: true });
           await logoutUser(navigate);
-          const eventStore = useEventStore.getState();
-          eventStore.setEvents([]);
 
           set({ user: undefined, error: null });
         } catch (error) {