Merge branch 'main' into donorEmail

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
   );

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;
 };
 

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