diff --git a/src/components/Home/SavedCard.tsx b/src/components/Saved/SavedCard.tsx
similarity index 100%
rename from src/components/Home/SavedCard.tsx
rename to src/components/Saved/SavedCard.tsx
diff --git a/src/components/Schedule/index.tsx b/src/components/Schedule/index.tsx
new file mode 100644
index 0000000..b954199
--- /dev/null
+++ b/src/components/Schedule/index.tsx
@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import {
+ Box,
+ Typography,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Button,
+} from '@mui/material';
+import type { PickersDayProps } from '@mui/x-date-pickers';
+import { LocalizationProvider, StaticDatePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { useToggle } from '@zl-asica/react';
+
+interface ScheduleBaseProps {
+ events: DonationEvent[];
+ title: string;
+ description: string;
+}
+
+const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
+ const [selectedDate, setSelectedDate] = useState
(dayjs());
+ const [selectedEvent, setSelectedEvent] = useState(
+ null
+ );
+ const [open, toggleOpen] = useToggle();
+
+ const eventsForSelectedDate = events.filter((event) =>
+ dayjs(event.date).isSame(selectedDate, 'day')
+ );
+
+ const handleEventClick = (event: DonationEvent) => {
+ setSelectedEvent(event);
+ toggleOpen();
+ };
+
+ const handleClose = () => {
+ toggleOpen();
+ setSelectedEvent(null);
+ };
+
+ const hasEventOnDate = (date: Dayjs) =>
+ events.some((event) => dayjs(event.date).isSame(date, 'day'));
+
+ return (
+
+
+ {title}
+
+
+ {description}
+
+
+ setSelectedDate(newDate)}
+ displayStaticWrapperAs='desktop'
+ // ! NEEDS TO BE FIXED
+ // @ts-expect-error: Ignore for now
+ renderDay={(
+ day: Dayjs,
+ _value: Dayjs,
+ DayComponentProps: PickersDayProps
+ ) => {
+ const isEventDay = hasEventOnDate(day);
+
+ return (
+
+ {DayComponentProps.children}
+ {isEventDay && (
+
+ )}
+
+ );
+ }}
+ />
+
+
+
+ Events for {selectedDate?.format('MMMM D, YYYY')}:
+
+ {eventsForSelectedDate.length > 0 ? (
+ eventsForSelectedDate.map((event) => (
+ handleEventClick(event)}
+ >
+
+ {event.title}
+
+ {event.description}
+
+ {dayjs(event.date).format('MMMM D, YYYY, h:mm A')}
+
+
+ ))
+ ) : (
+
+ No events for this date.
+
+ )}
+
+
+ {/* Event Details Modal */}
+
+
+ );
+};
+
+export default ScheduleBase;
diff --git a/src/components/common/DonationModal.tsx b/src/components/common/DonationModal.tsx
deleted file mode 100644
index 7cda9c7..0000000
--- a/src/components/common/DonationModal.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { useState } from 'react';
-import {
- Modal,
- Box,
- Typography,
- Button,
- RadioGroup,
- FormControlLabel,
- Radio,
- TextField,
-} from '@mui/material';
-
-import { useEvents } from '@/hooks';
-
-import { MessageDialog } from '@/components/common';
-
-interface DonationModalProps {
- open: boolean;
- onClose: () => void;
- organization: {
- name: string;
- location: string;
- pickup: boolean;
- };
- selectedNeeds: string[];
-}
-
-const DonationModal: React.FC = ({
- open,
- onClose,
- organization,
- selectedNeeds,
-}) => {
- const [method, setMethod] = useState('drop-off');
- const [selectedTime, setSelectedTime] = useState('');
- const [openMessageDialog, setOpenMessageDialog] = useState(false);
- const [message, setMessage] = useState('');
- const { addEvent } = useEvents();
-
- const handleConfirm = () => {
- if (selectedNeeds.length === 0 || !selectedTime || !method) {
- setMessage('Please fill out all fields and select at least one need');
- setOpenMessageDialog(true);
- return;
- }
-
- addEvent({
- organizationName: organization.name,
- organizationLocation: organization.location,
- items: selectedNeeds,
- time: selectedTime,
- method,
- });
-
- setMessage('Donation successfully added to your schedule!');
- setOpenMessageDialog(true);
-
- onClose();
- };
-
- return (
- <>
-
-
-
- Schedule Your Donation
-
- setMethod(e.target.value)}
- sx={{ mb: 2 }}
- >
- }
- label='Drop-off'
- />
- {organization.pickup && (
- }
- label='Pick-up'
- />
- )}
-
-
- Select a time:
-
- setSelectedTime(e.target.value)}
- sx={{ mb: 2 }}
- />
-
-
-
-
-
-
-
- setOpenMessageDialog(false)}
- message={message}
- />
-
- );
-};
-
-export default DonationModal;
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 38bd1c8..0d591be 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -13,10 +13,10 @@ import { useToggle } from '@zl-asica/react';
import { useUser } from '@/hooks';
-import { CustomDialog, ConfirmationDialog } from '@/components/common';
+import { RoleSelectionModal, ConfirmationDialog } from '@/components/common';
const Header = () => {
- const { user, login, logout } = useUser();
+ const { user, logout } = useUser();
const location = useLocation();
const navigate = useNavigate();
@@ -107,28 +107,10 @@ const Header = () => {
- {/* Role Selection Dialog */}
- {
- await login('donor', navigate);
- toggleRoleDialog();
- },
- },
- {
- text: 'Organization',
- onClick: async () => {
- await login('organization', navigate);
- toggleRoleDialog();
- },
- },
- ]}
/>
);
diff --git a/src/components/common/RoleSelectionModal.tsx b/src/components/common/RoleSelectionModal.tsx
new file mode 100644
index 0000000..66cb790
--- /dev/null
+++ b/src/components/common/RoleSelectionModal.tsx
@@ -0,0 +1,43 @@
+import { useNavigate } from 'react-router-dom';
+
+import CustomDialog from './CustomDialog';
+
+import { useUser } from '@/hooks';
+
+interface RoleSelectionModalProps {
+ open: boolean;
+ onClose: () => void;
+}
+
+const RoleSelectionModal = ({ open, onClose }: RoleSelectionModalProps) => {
+ const { login } = useUser();
+ const navigate = useNavigate();
+
+ return (
+ // Role Selection Dialog
+ {
+ await login('donor', navigate);
+ onClose();
+ },
+ },
+ {
+ text: 'Organization',
+ onClick: async () => {
+ await login('organization', navigate);
+ onClose();
+ },
+ },
+ ]}
+ />
+ );
+};
+
+export default RoleSelectionModal;
diff --git a/src/components/common/index.tsx b/src/components/common/index.tsx
index bd3542c..29bd5ad 100644
--- a/src/components/common/index.tsx
+++ b/src/components/common/index.tsx
@@ -5,5 +5,5 @@ export { default as SearchBar } from './SearchBar';
export { default as ConfirmationDialog } from './ConfirmationDialog';
export { default as ProtectedRoute } from './ProtectedRoute';
export { default as MessageDialog } from './MessageDialog';
-export { default as DonationModal } from './DonationModal';
export { default as CustomDialog } from './CustomDialog';
+export { default as RoleSelectionModal } from './RoleSelectionModal';
diff --git a/src/context/EventsContext.tsx b/src/context/EventsContext.tsx
deleted file mode 100644
index 40fd6fd..0000000
--- a/src/context/EventsContext.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createContext, useState } from 'react';
-
-interface EventsContextType {
- events: ScheduledDonation[];
- addEvent: (newEvent: ScheduledDonation) => void;
-}
-
-const EventsContext = createContext(undefined);
-
-const EventsProvider: React.FC<{ children: React.ReactNode }> = ({
- children,
-}) => {
- const [events, setEvents] = useState([]);
-
- const addEvent = (newEvent: ScheduledDonation) => {
- setEvents((prevEvents) => [...prevEvents, newEvent]);
- };
-
- return (
-
- {children}
-
- );
-};
-
-export { EventsContext, EventsProvider };
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
index 356b702..b84522f 100644
--- a/src/context/UserContext.tsx
+++ b/src/context/UserContext.tsx
@@ -11,11 +11,13 @@ import {
auth,
updateDocument,
getAllOrganizationProfiles,
+ listenToEventsByIds,
} from '@/utils/firebase';
interface UserContextType {
user: User | undefined;
organizationProfiles: OrganizationProfile[];
+ events: DonationEvent[];
loading: boolean;
login: (userType: UserType, navigate: NavigateFunction) => Promise;
logout: (navigate: NavigateFunction) => Promise;
@@ -32,18 +34,25 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
);
const { value: organizationProfiles, setValue: setOrganizationProfiles } =
useSessionStorage('organizationProfiles', []);
+ const { value: events, setValue: setEvents } = useSessionStorage<
+ DonationEvent[]
+ >('events', []);
+
const [loading, setLoading] = useState(true);
// Monitor auth state changes
useEffect(() => {
let unsubscribeProfiles: (() => void) | undefined;
+ let unsubscribeEvents: (() => void) | undefined;
if (organizationProfiles.length === 0) {
unsubscribeProfiles = getAllOrganizationProfiles(setOrganizationProfiles);
}
const unsubscribeAuth = onAuthStateChanged(auth, async (firebaseUser) => {
if (firebaseUser) {
- if (!user) {
+ if (user) {
+ unsubscribeEvents = listenToEventsByIds(user.joinedEvents, setEvents);
+ } else {
// if user logged in but not in local storage
// clear user and let the user login again
setUser(undefined);
@@ -56,6 +65,7 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
return () => {
if (unsubscribeProfiles) unsubscribeProfiles();
+ if (unsubscribeEvents) unsubscribeEvents();
unsubscribeAuth();
};
}, []);
@@ -117,6 +127,7 @@ const UserProvider = ({ children }: { children: React.ReactNode }) => {
value={{
user,
organizationProfiles,
+ events,
loading,
login,
logout,
diff --git a/src/hooks/useEvents.ts b/src/hooks/useEvents.ts
index cc7658a..d541895 100644
--- a/src/hooks/useEvents.ts
+++ b/src/hooks/useEvents.ts
@@ -1,13 +1,69 @@
-import { useContext } from 'react';
+import useUser from './useUser';
-import { EventsContext } from '@/context/EventsContext';
+import { updateEvent, removeEvent } from '@/utils/firebase';
const useEvents = () => {
- const context = useContext(EventsContext);
- if (!context) {
- throw new Error('useEvents must be used within an EventsProvider');
+ const { user, updateProfile } = useUser();
+
+ if (!user) {
+ return {
+ events: [],
+ addOrUpdateEvent: async () => {
+ console.warn('No user logged in.');
+ },
+ removeEvent: async () => {
+ console.warn('No user logged in.');
+ },
+ };
}
- return context;
+
+ const { joinedEvents = [] } = user;
+
+ const addOrUpdateEvent = async (event: DonationEvent): Promise => {
+ const isAlreadyJoined = joinedEvents.includes(event.eventId);
+
+ const updatedEvents = isAlreadyJoined
+ ? joinedEvents
+ : [...joinedEvents, event.eventId];
+
+ try {
+ // Update the user profile's joinedEvents
+ await updateProfile({ joinedEvents: updatedEvents });
+
+ // Add or update the event in the Firestore collection
+ await updateEvent(event);
+
+ console.info(
+ isAlreadyJoined
+ ? `Event ${event.eventId} updated successfully.`
+ : `Event ${event.eventId} added successfully.`
+ );
+ } catch (error) {
+ console.error('Error adding/updating event:', error);
+ alert('Failed to add/update event. Please try again.');
+ }
+ };
+
+ const removeEventFromUser = async (eventId: string): Promise => {
+ const updatedEvents = joinedEvents.filter((id) => id !== eventId);
+
+ try {
+ // Update the user profile's joinedEvents
+ await updateProfile({ joinedEvents: updatedEvents });
+
+ // Remove the event from the Firestore collection
+ await removeEvent(eventId);
+ } catch (error) {
+ console.error('Error removing event:', error);
+ alert('Failed to remove event. Please try again.');
+ }
+ };
+
+ return {
+ events: joinedEvents, // Return user's joined events (IDs only)
+ addOrUpdateEvent,
+ removeEvent: removeEventFromUser,
+ };
};
export default useEvents;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 26a8175..109c543 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,50 +1,16 @@
-import { Box, Typography } from '@mui/material';
-import { filter, lowerCase, some } from 'es-toolkit/compat';
-import { useState } from 'react';
-
import { useUser } from '@/hooks';
-import { SearchBar } from '@/components/common';
-import OrganizationCard from '@/components/Home/OrganizationCard';
+import OrganizationDashboard from '@/components/Home/OrganizationDashboard';
+import DonorDashboard from '@/components/Home/DonorDashboard';
const Home = () => {
- const [searchQuery, setSearchQuery] = useState(''); // New state for search query
- const { organizationProfiles } = useUser(); // Get organization profiles from context
+ const { user } = useUser();
- // Filtered organizations based on search query
- const filteredOrganizations = filter(organizationProfiles, (org) => {
- const searchTerm = lowerCase(searchQuery);
- return (
- lowerCase(org.name).includes(searchTerm) ||
- lowerCase(org.location).includes(searchTerm) ||
- some(org.needs, (need) => lowerCase(need).includes(searchTerm))
- );
- });
+ if (user && user.role === 'organization') {
+ return ;
+ }
- return organizationProfiles.length > 0 ? (
-
-
-
- {filteredOrganizations.map((org) => (
-
- ))}
-
-
- ) : (
-
- No organizations.
-
- );
+ return ;
};
export default Home;
diff --git a/src/pages/Saved.tsx b/src/pages/Saved.tsx
index 6b4c39e..5d1a5d5 100644
--- a/src/pages/Saved.tsx
+++ b/src/pages/Saved.tsx
@@ -2,7 +2,7 @@ import { Box, Typography } from '@mui/material';
import { useSavedOrgs } from '@/hooks';
-import SavedOrganizationCard from '@/components/Home/SavedCard';
+import SavedOrganizationCard from '@/components/Saved/SavedCard';
const Saved = () => {
const { savedOrgs, updateSavedOrgs } = useSavedOrgs();
diff --git a/src/pages/Schedule.tsx b/src/pages/Schedule.tsx
index e8afc4a..843bbdd 100644
--- a/src/pages/Schedule.tsx
+++ b/src/pages/Schedule.tsx
@@ -1,99 +1,27 @@
-import { useState } from 'react';
-import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
-import moment from 'moment';
-import 'react-big-calendar/lib/css/react-big-calendar.css';
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- Button,
-} from '@mui/material';
-import { useToggle } from '@zl-asica/react';
-
-import { useEvents } from '@/hooks';
-
-// Set the localizer to use moment.js
-const localizer = momentLocalizer(moment); // Create localizer using moment
-
-const Schedule = () => {
- const { events }: { events: ScheduledDonation[] } = useEvents();
- const [selectedEvent, setSelectedEvent] = useState(
- null
- ); // For the modal event details
- const [open, toggleOpen] = useToggle();
-
- // Convert ScheduledDonation to a calendar event format
- const calendarEvents: CalendarEvent[] = events.map((donation) => ({
- title: `${donation.organizationName}`,
- start: new Date(donation.time), // Convert string time to Date object
- end: new Date(new Date(donation.time).getTime() + 30 * 60 * 1000),
- donationDetails: donation, // Store the donation details in the event object
- }));
-
- // Event click handler to open the modal
- const handleEventClick = (event: CalendarEvent) => {
- setSelectedEvent(event.donationDetails); // Set the selected event's details
- toggleOpen();
- };
-
- // Handle closing the modal
- const handleClose = () => {
- toggleOpen();
- setSelectedEvent(null); // Clear selected event data
- };
-
- return (
-
-
Schedule
-
-
- {/* Modal to show event details */}
-
-