Merge pull request #20 from hack4impact-upenn/modal2_backend

Modal2 backend
hack4impact-upenn · May 18, 2024 · 6e6cb1d · 6e6cb1d
2 parents 7951283 + faf7434
commit 6e6cb1d
Show file tree

Hide file tree

Showing 21 changed files with 956 additions and 90 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
@@ -26,6 +27,8 @@ import DonorProfilePage from './donorProfile/DonorProfilePage';
 import ReportsPage from './Reports/ReportsPage';
 import CommunicationsPage from './Communications/CommunicationsPage';
 import HomeDashboardPage from './HomeDashboard/HomeDashboard';
+import EmailModal from './components/EmailModal';
+import AddEditGroupsModal from './components/AddEditGroupsModal';
 import NewDonationPage from './NewDonation/NewDonationPage';
 import Sidebar from './Sidebar/Sidebar';
 import DonationInfoPage from './DonationInfo/DonationInfoPage';
@@ -73,30 +76,32 @@ function App() {
                         element={<InviteRegisterPage />}
                       />
                       <Route
-                        path="/donor-profile"
+                        path="/donor-profile/:donatorId"
                         element={<DonorProfilePage />}
                       />
                       <Route path="/home" element={<HomeDashboardPage />} />
 
                       {/* Routes accessed only if user is authenticated */}
                       <Route element={<ProtectedRoutesWrapper />}>
                         <Route path="/home" element={<HomePage />} />
+                         <Route
+                            path="/donationInfo"
+                            element={<DonationInfoPage />}
+                          />
+                        <Route path="/reports" element={<ReportsPage />} />
+                        <Route
+                          path="/communications"
+                          element={<CommunicationsPage />}
+                        />
+                        <Route path="/emailmodal" element={<EmailModal />} />
+                        <Route
+                          path="/addeditgroupsmodal"
+                          element={<AddEditGroupsModal />}
+                        />
                       </Route>
-                      <Route
-                        path="/donationInfo"
-                        element={<DonationInfoPage />}
-                      />
                       <Route element={<AdminRoutesWrapper />}>
                         <Route path="/users" element={<AdminDashboardPage />} />
                       </Route>
-                      <Route path="/reports" element={<ReportsPage />} />
-                      <Route
-                        path="/communications"
-                        element={<CommunicationsPage />}
-                      />
-                      {/* <Route element={<ReportsPage />}>
-                    <Route path="/reports" element={<ReportsPage />} />
-                  </Route> */}
 
                       {/* Route which redirects to a different page depending on if the user is an authenticated or not by utilizing the DynamicRedirect component */}
                       <Route

diff --git a/client/src/Communications/CommunicationsPage.tsx b/client/src/Communications/CommunicationsPage.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import SearchDonorsButton from '../components/buttons/SearchDonorsButton';
 import axios from 'axios';
-
 import {
   Typography,
   Grid,
@@ -21,7 +20,7 @@ import {
   TableHead,
   Link,
 } from '@mui/material';
-
+import AddEditGroupsModal from '../components/AddEditGroupsModal';
 import IDonor from '../util/types/donor';
 import IGroup from '../util/types/group';
 import IDonation from '../util/types/donation';
@@ -134,10 +133,10 @@ interface DonorInfo {
 
 function CommunicationsPage() {
   const [unackDonoModalOpen, setUnackDonoModalOpen] = React.useState(false);
+  const [editGroupModalOpen, setEditGroupModalOpen] = React.useState(false);
   const [unacknowledgedDonations, setUnacknowledgedDonations] = useState<any[]>(
     [],
   );
-  const handleUnackDonoModalClose = () => setUnackDonoModalOpen(false);
   const [groupSearchValue, setGroupSearchValue] = useState(null);
   const [rows, setRows] = useState<RowItem[]>([]);
 
@@ -149,6 +148,7 @@ function CommunicationsPage() {
   const allDonations: any | null = useData('donation/all');
   const allGroups: any | null = useData('group/all');
 
+
   const handleUnackDonoModalOpen = async () => {
     try {
       console.log('opened');
@@ -179,6 +179,16 @@ function CommunicationsPage() {
     setUnackDonoModalOpen(true);
   };
 
+  const handleUnackDonoModalClose = () => setUnackDonoModalOpen(false);
+
+  const handleGroupModalOpen = () => {
+    setEditGroupModalOpen(true);
+  };
+
+  const handleGroupModalClose = () => {
+    setEditGroupModalOpen(false);
+  };
+
   useEffect(() => {
     if (allDonors?.data) {
       setDonors(allDonors.data);
@@ -379,9 +389,11 @@ function CommunicationsPage() {
           color="inherit"
           sx={{ marginBottom: '5px' }}
           fullWidth
+          onClick={handleGroupModalOpen}
         >
           Add / Edit Groups
         </Button>
+        <AddEditGroupsModal open={editGroupModalOpen} onClose={handleGroupModalClose} />
         <Stack
           spacing={{ xs: 2 }}
           direction="row"

diff --git a/client/src/DonationInfo/DonationInfoPage.tsx b/client/src/DonationInfo/DonationInfoPage.tsx
@@ -51,7 +51,7 @@ const style = {
   overflow: 'scroll',
   height: '80%',
 };
-
+  
 function BasicTable({
   customRows,
 }: {
@@ -88,7 +88,8 @@ function DonationInfoPage() {
   const [purpose, setPurpose] = useState('');
 
   // Fetch donation data from API
-  const donationID = '65ff8dae78febaeaa6e02651';
+
+  const donationID = '65ff8dd5ef350bba76ecaaa6';
   const donation = useData(`donation/${donationID}`);
 
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
@@ -132,9 +133,8 @@ function DonationInfoPage() {
         if (donation.data.donor_id) {
           try {
             const res = await axios.get(
-              `http://localhost:4000/api/donor/${donation.data.donor_id}`,
+              `http://localhost:4000/api/donor/id/${donation.data.donor_id}`,
             );
-            console.log(res.data);
             setDonorName(res.data.contact_name);
             setDonator(res.data);
           } catch (error) {
@@ -399,7 +399,6 @@ function DonationInfoPage() {
 
       <Box width="100%">
         <BasicTable customRows={customRows} />
-
         {!donationData.acknowledged && (
           <p style={{ marginTop: '16px', marginLeft: '16px' }}>
             This donation has not been acknowledged.
@@ -449,8 +448,8 @@ function DonationInfoPage() {
             </Button>
             <ConfirmModal
               buttonText="Delete"
-              title="Are you sure you want to delete this donation?"
-              body=""
+              title="Deleting"
+              body="Are you sure you want to delete this donation?"
               onConfirm={handleDelete}
             />
           </Box>