From 93a3e75f708188e058a9fc1a13b8b23bac16803a 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                               | 23 +++++++++++
 3 files changed, 34 insertions(+), 35 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..c3de8b2 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,25 @@ const AppRoutes = () => {
     { path: 'alerts', element: <Alerts /> },
   ];
 
+  const loading = useUserStore((state) => state.loading);
+  const user = useUserStore((state) => state.user);
+
+  if (!loading && (!user || user.role !== 'organization')) {
+    const subscribeToProfiles = useOrganizationStore(
+      (state) => state.subscribeToProfiles
+    );
+    const error = useOrganizationStore((state) => state.error);
+
+    useEffect(() => {
+      const unsubscribe = subscribeToProfiles;
+
+      return () => unsubscribe && unsubscribe();
+    }, [subscribeToProfiles]);
+    if (error) {
+      toast.error(error);
+    }
+  }
+
   return (
     <Routes>
       <Route