refactor(all): add events collection to firebase. Home page based o…

…n `user.role` BREAKING CHANGE: Schema modified. Now all user have joinedEvents array which only have eventID correspond to the event they have joined. Also, `events` collection added to firebase which have all the events. Home page is now based on `user.role`. If user is donor, they will see the `DonorDashboard` and if user is organization, they will see `OrganizationDashboard`.
392-f24 · Nov 21, 2024 · 15b94d4 · 15b94d4
1 parent f29add1
commit 15b94d4
Show file tree

Hide file tree

Showing 19 changed files with 940 additions and 785 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,17 +27,15 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.1.0",
-    "@mui/icons-material": "^6.1.7",
+    "@mui/icons-material": "^6.1.8",
     "@mui/lab": "^6.0.0-beta.15",
     "@mui/material": "^6.1.7",
-    "@mui/x-date-pickers": "^7.22.2",
+    "@mui/x-date-pickers": "^7.22.3",
     "@zl-asica/react": "^0.3.4",
-    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
     "es-toolkit": "^1.27.0",
     "firebase": "^11.0.2",
-    "moment": "^2.30.1",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.15.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,6 @@ import { ThemeProvider } from '@mui/material';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { UserProvider } from '@/context/UserContext';
-import { EventsProvider } from '@/context/EventsContext';
 import AppRoutes from '@/routes';
 
 import { Header, Footer } from '@/components/common';
@@ -15,25 +14,23 @@ const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <UserProvider>
-        <EventsProvider>
-          <div className='App'>
-            <Router
-              future={{
-                v7_relativeSplatPath: true,
-                v7_startTransition: true,
-              }}
-            >
-              <Header />
-              <div className='content'>
-                {/* Main content area where pages will render */}
-                <AppRoutes />
-              </div>
+        <div className='App'>
+          <Router
+            future={{
+              v7_relativeSplatPath: true,
+              v7_startTransition: true,
+            }}
+          >
+            <Header />
+            <div className='content'>
+              {/* Main content area where pages will render */}
+              <AppRoutes />
+            </div>
 
-              {/* Bottom Navigation with React Router links */}
-              <Footer />
-            </Router>
-          </div>
-        </EventsProvider>
+            {/* Bottom Navigation with React Router links */}
+            <Footer />
+          </Router>
+        </div>
       </UserProvider>
     </ThemeProvider>
   );

diff --git a/src/components/Home/DonorDashboard/DonationModal.tsx b/src/components/Home/DonorDashboard/DonationModal.tsx
@@ -7,8 +7,11 @@ import {
   RadioGroup,
   FormControlLabel,
   Radio,
-  TextField,
+  Divider,
 } from '@mui/material';
+import { LocalizationProvider, DateTimePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type dayjs from 'dayjs';
 
 import { useEvents } from '@/hooks';
 
@@ -17,40 +20,49 @@ import { MessageDialog } from '@/components/common';
 interface DonationModalProps {
   open: boolean;
   onClose: () => void;
-  organization: {
-    name: string;
-    location: string;
-    pickup: boolean;
-  };
+  organization: OrganizationProfile;
   selectedNeeds: string[];
+  donor: DonorProfile;
 }
 
-const DonationModal: React.FC<DonationModalProps> = ({
+const DonationModal = ({
   open,
   onClose,
   organization,
   selectedNeeds,
-}) => {
+  donor,
+}: DonationModalProps) => {
   const [method, setMethod] = useState<string>('drop-off');
-  const [selectedTime, setSelectedTime] = useState<string>('');
+  const [selectedTime, setSelectedTime] = useState<dayjs.Dayjs | null>(null);
   const [openMessageDialog, setOpenMessageDialog] = useState(false);
   const [message, setMessage] = useState<string>('');
-  const { addEvent } = useEvents();
+  const { addOrUpdateEvent } = useEvents();
 
   const handleConfirm = () => {
     if (selectedNeeds.length === 0 || !selectedTime || !method) {
-      setMessage('Please fill out all fields and select at least one need');
+      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,
-    });
+    const newEvent: DonationEvent = {
+      eventId: `${organization.uid}-${new Date().toISOString()}`, // unique ID
+      title: `Donation to ${organization.name}`,
+      description: `Donation of items: ${selectedNeeds.join(', ')}`,
+      date: selectedTime.toDate(),
+      supplies: selectedNeeds.map(
+        (item) =>
+          ({
+            itemName: item,
+            quantityNeeded: 1, // Default assumption
+            quantityProvided: 1, // Donor provides these items
+            providedBy: [donor.uid],
+            status: true,
+          }) as Supply
+      ),
+    };
+
+    addOrUpdateEvent(newEvent, selectedNeeds);
 
     setMessage('Donation successfully added to your schedule!');
     setOpenMessageDialog(true);
@@ -63,6 +75,13 @@ const DonationModal: React.FC<DonationModalProps> = ({
       <Modal
         open={open}
         onClose={onClose}
+        disableEnforceFocus
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: 5,
+        }}
       >
         <Box
           sx={{
@@ -73,58 +92,86 @@ const DonationModal: React.FC<DonationModalProps> = ({
             bgcolor: 'background.paper',
             boxShadow: 24,
             p: 4,
-            borderRadius: 2,
+            borderRadius: 3,
             width: '90%',
-            maxWidth: 400,
+            maxWidth: 500,
           }}
         >
           <Typography
             variant='h6'
-            mb={2}
+            fontWeight='bold'
+            mb={3}
+            textAlign='center'
           >
             Schedule Your Donation
           </Typography>
-          <RadioGroup
-            value={method}
-            onChange={(e) => setMethod(e.target.value)}
-            sx={{ mb: 2 }}
-          >
-            <FormControlLabel
-              value='drop-off'
-              control={<Radio />}
-              label='Drop-off'
-            />
-            {organization.pickup && (
+          <Divider sx={{ mb: 3 }} />
+          <Box sx={{ mb: 3 }}>
+            <Typography
+              variant='subtitle1'
+              fontWeight='bold'
+              mb={1}
+            >
+              Select a Delivery Method:
+            </Typography>
+            <RadioGroup
+              value={method}
+              onChange={(e) => setMethod(e.target.value)}
+            >
               <FormControlLabel
-                value='pick-up'
+                value='drop-off'
                 control={<Radio />}
-                label='Pick-up'
+                label='Drop-off'
               />
-            )}
-          </RadioGroup>
-          <Typography
-            variant='body2'
-            mb={1}
-          >
-            Select a time:
-          </Typography>
-          <TextField
-            type='datetime-local'
-            fullWidth
-            value={selectedTime}
-            onChange={(e) => setSelectedTime(e.target.value)}
-            sx={{ mb: 2 }}
-          />
-          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
+              {organization.pickup && (
+                <FormControlLabel
+                  value='pick-up'
+                  control={<Radio />}
+                  label='Pick-up'
+                />
+              )}
+            </RadioGroup>
+          </Box>
+          <Box sx={{ mb: 3 }}>
+            <Typography
+              variant='subtitle1'
+              fontWeight='bold'
+              mb={1}
+            >
+              Select a Time:
+            </Typography>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DateTimePicker
+                value={selectedTime}
+                onChange={setSelectedTime}
+                slotProps={{
+                  textField: {
+                    fullWidth: true,
+                    sx: {
+                      '& .MuiInputBase-root': {
+                        fontSize: '1rem',
+                      },
+                    },
+                  },
+                }}
+              />
+            </LocalizationProvider>
+          </Box>
+          <Divider sx={{ mb: 3 }} />
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             <Button
               onClick={onClose}
               color='secondary'
+              size='large'
+              sx={{ px: 3 }}
             >
               Cancel
             </Button>
             <Button
               onClick={handleConfirm}
               variant='contained'
+              size='large'
+              sx={{ px: 3 }}
             >
               Confirm
             </Button>

diff --git a/src/components/Home/DonorDashboard/OrganizationCard.tsx b/src/components/Home/DonorDashboard/OrganizationCard.tsx
@@ -27,6 +27,7 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
   const theme = useTheme();
   const { user } = useUser();
   const { savedOrgs, updateSavedOrgs } = useSavedOrgs();
+  const hasNeeds = organization.needs.length > 0 ? true : false;
   const [isModalOpen, toggleModal] = useToggle();
   const [isExpanded, toggleExpand] = useToggle();
   const [roleDialogOpen, toggleRoleDialog] = useToggle();
@@ -108,10 +109,12 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
           </Button>
         </CardContent>
         <CardActions>
-          <Button onClick={toggleExpand}>
-            {isExpanded ? 'Hide Needs' : 'Show Needs'}
-            {isExpanded ? <ExpandLess /> : <ExpandMore />}
-          </Button>
+          {hasNeeds && (
+            <Button onClick={toggleExpand}>
+              {isExpanded ? 'Hide Needs' : 'Show Needs'}
+              {isExpanded ? <ExpandLess /> : <ExpandMore />}
+            </Button>
+          )}
           {organization.loanable && <Button variant='outlined'>Loan</Button>}
           {user && (
             <Button
@@ -126,6 +129,7 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
             onClose={toggleModal}
             organization={organization}
             selectedNeeds={checkedItemsList}
+            donor={user as DonorProfile}
           />
         </CardActions>
         <Collapse

diff --git a/src/components/Home/SavedCard.tsx → src/components/Saved/SavedCard.tsx b/src/components/Home/SavedCard.tsx → src/components/Saved/SavedCard.tsx