displaying incoming donations for the organization side

src/components/Alerts/OrganizationAlerts.tsx

@@ -1,8 +1,128 @@
+import { useEffect, useState } from 'react';
+import {
+  Box,
+  Typography,
+  Card,
+  CardContent,
+  List,
+  ListItem,
+  ListItemText,
+} from '@mui/material';
+import dayjs from 'dayjs';
+
+import { useUser } from '@/hooks';
+
 const OrganizationAlerts = () => {
+  const { user, events, fetchDonorById } = useUser();
+  const [donorNames, setDonorNames] = useState<Record<string, string>>({}); // Store donor names by donorId
+
+  // Fetch donor names when events change
+  useEffect(() => {
+    const fetchDonorNames = async () => {
+      const namesMap: Record<string, string> = {};
+
+      for (const event of events) {
+        if (!namesMap[event.donorId]) {
+          const donor = await fetchDonorById(event.donorId); // Fetch donor by ID
+          namesMap[event.donorId] = donor?.name || 'Unknown Donor';
+        }
+      }
+
+      setDonorNames(namesMap); // Update state with donor names
+    };
+
+    if (events.length > 0) {
+      fetchDonorNames();
+    }
+  }, [events, fetchDonorById]);
+
+  if (!user || user.role !== 'organization') {
+    return (
+      <Typography
+        variant='h5'
+        textAlign='center'
+      >
+        You are not authorized to view this page.
+      </Typography>
+    );
+  }
+
   return (
-    <div>
-      <h1>Organization Alerts</h1>
-    </div>
+    <Box sx={{ padding: 3 }}>
+      <Typography
+        variant='h4'
+        sx={{ fontWeight: 'bold', mb: 3 }}
+      >
+        Incoming Donations
+      </Typography>
+      {events.length > 0 ? (
+        events.map((event) => (
+          <Card
+            key={event.eventId}
+            sx={{
+              mb: 3,
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 2,
+              boxShadow: 1,
+            }}
+          >
+            <CardContent>
+              <Typography
+                variant='body2'
+                sx={{ mb: 1 }}
+              >
+                <strong>Donor:</strong>{' '}
+                {donorNames[event.donorId] || 'Loading...'}{' '}
+                {/* Display donor name */}
+              </Typography>
+              <Typography
+                variant='body2'
+                sx={{ mb: 1 }}
+              >
+                <strong>Description:</strong> {event.description}
+              </Typography>
+              <Typography
+                variant='body2'
+                sx={{ mb: 1 }}
+              >
+                <strong>Drop Off Date & Time:</strong>{' '}
+                {dayjs(event.date).format('MMMM D, YYYY, h:mm A')}
+              </Typography>
+              <Typography
+                variant='body2'
+                sx={{ mb: 2 }}
+              >
+                <strong>Supplies:</strong>
+              </Typography>
+              <List>
+                {event.supplies.map((supply, index) => (
+                  <ListItem
+                    key={index}
+                    sx={{ py: 0 }}
+                  >
+                    <ListItemText
+                      primary={`${supply.itemName} - ${supply.quantityProvided} provided`}
+                      primaryTypographyProps={{
+                        variant: 'body2',
+                      }}
+                    />
+                  </ListItem>
+                ))}
+              </List>
+            </CardContent>
+          </Card>
+        ))
+      ) : (
+        <Typography
+          variant='body1'
+          color='text.secondary'
+          textAlign='center'
+        >
+          No incoming donations at the moment.
+        </Typography>
+      )}
+    </Box>
   );
 };
 

src/context/UserContext.tsx

@@ -12,6 +12,7 @@ import {
   updateDocument,
   fetchAllOrganizationProfiles,
   fetchEventsByIds,
+  getOrCreateDocument,
 } from '@/utils/firebase';
 
 interface UserContextType {
@@ -23,6 +24,7 @@ interface UserContextType {
   login: (userType: UserType, navigate: NavigateFunction) => Promise<void>;
   logout: (navigate: NavigateFunction) => Promise<void>;
   updateProfile: (updates: Partial<User>) => Promise<void>;
+  fetchDonorById: (donorId: string) => Promise<DonorProfile | undefined>;
 }
 
 const UserContext = createContext<UserContextType>({} as UserContextType);
@@ -122,6 +124,31 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
       alert('Profile update failed. Please try again.');
     }
   };
+  /**
+   * Fetch donor profile using `getOrCreateDocument`.
+   *
+   * @param donorId - The UID of the donor.
+   * @returns The donor profile if it exists
+   */
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  const fetchDonorById = async (
+    donorId: string
+  ): Promise<DonorProfile | undefined> => {
+    // Default donor data, used only if the document does not exist
+    const defaultDonorData: DonorProfile = {
+      uid: donorId,
+      name: 'Unknown Donor', // Placeholder name
+      email: '',
+      profilePic: '',
+      joinedEvents: [],
+      providedSupplies: [],
+      saved: [],
+      role: 'donor',
+      createdAt: new Date().toISOString(), // Add the createdAt field
+    };
+
+    return await getOrCreateDocument<DonorProfile>(donorId, defaultDonorData);
+  };
 
   return (
     <UserContext.Provider
@@ -134,6 +161,7 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
         login,
         logout,
         updateProfile,
+        fetchDonorById,
       }}
     >
       {loading ? <LoadingCircle /> : children}

src/utils/firebase/index.ts

@@ -1,4 +1,8 @@
 export { loginUser, logoutUser } from './auth';
 export { auth } from './firebaseConfig';
-export { updateDocument, fetchAllOrganizationProfiles } from './firebaseUtils';
+export {
+  getOrCreateDocument,
+  updateDocument,
+  fetchAllOrganizationProfiles,
+} from './firebaseUtils';
 export { fetchEventsByIds, updateEvent, removeEvent } from './eventsUtils';