edit profile

hack4impact-upenn · Apr 21, 2024 · 183d25f · 183d25f
1 parent e52a42e
commit 183d25f
Show file tree

Hide file tree

Showing 5 changed files with 271 additions and 38 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';

diff --git a/client/src/DonationInfo/DonationInfoPage.tsx b/client/src/DonationInfo/DonationInfoPage.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from 'react';
 import {
   Typography,
@@ -11,13 +12,22 @@ import {
   TableCell,
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
 import { useData } from '../util/api';
 import { useAppDispatch } from '../util/redux/hooks';
-import axios from 'axios';
 
-function BasicTable({ customRows }: { customRows: { label: string; value: string }[] }) {
+function BasicTable({
+  customRows,
+}: {
+  customRows: { label: string; value: string }[];
+}) {
   return (
-    <Box border="none" borderRadius={4} p={2} sx={{ width: 'min(500px, 100%)' }}>
+    <Box
+      border="none"
+      borderRadius={4}
+      p={2}
+      sx={{ width: 'min(500px, 100%)' }}
+    >
       <TableContainer component={Paper}>
         <Table sx={{ minWidth: 300 }} aria-label="simple table">
           <TableBody>
@@ -40,12 +50,14 @@ function DonationInfoPage() {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const [donationData, setDonationData] = useState<any>([]);
-  const [customRows, setCustomRows] = useState<{ label: string; value: string }[]>([]);
+  const [customRows, setCustomRows] = useState<
+    { label: string; value: string }[]
+  >([]);
   const [donorName, setDonorName] = useState('');
   const [purpose, setPurpose] = useState('');
 
   // Fetch donation data from API
-  const donationID = "65daa89e6c34e8adb9f2d2c7";
+  const donationID = '65daa89e6c34e8adb9f2d2c7';
   const donation = useData(`donation/${donationID}`);
 
   useEffect(() => {
@@ -54,7 +66,9 @@ function DonationInfoPage() {
         setDonationData(donation.data);
         if (donation.data.donor_id) {
           try {
-            const res = await axios.get(`http://localhost:4000/api/donor/${donation.data.donor_id}`);
+            const res = await axios.get(
+              `http://localhost:4000/api/donor/${donation.data.donor_id}`,
+            );
             setDonorName(res.data.contact_name);
           } catch (error) {
             console.error('Failed to fetch donor name:', error);
@@ -63,7 +77,9 @@ function DonationInfoPage() {
 
         if (donation.data.purpose_id) {
           try {
-            const res = await axios.get(`http://localhost:4000/api/purpose/${donation.data.purpose_id}`);
+            const res = await axios.get(
+              `http://localhost:4000/api/purpose/${donation.data.purpose_id}`,
+            );
             setPurpose(res.data.name);
           } catch (error) {
             console.error('Failed to fetch donor name:', error);
@@ -75,36 +91,54 @@ function DonationInfoPage() {
     fetchDonorAndPurpose();
   }, [donation?.data]);
 
-  function formatDateString(dateString: string): string{
-    if (dateString) {const date = new Date(dateString);
+  function formatDateString(dateString: string): string {
+    if (dateString) {
+      const date = new Date(dateString);
       const formattedDate = date.toISOString().slice(0, 10);
       return formattedDate;
     }
-    return "";
+    return '';
   }
-
 
   function setTableWithDonation() {
     if (donationData) {
-        const updatedCustomRows = [
-            { label: 'Donation Amount', value: `$ ${donationData.amount}` || 'N/A' },
-            { label: 'Date Donated', value: formatDateString(donationData.date) || 'N/A' },
-            { label: 'Donor', value: donorName || 'N/A' },
-            { label: 'Payment Information', value: donationData.payment_type || 'N/A' },
-            { label: 'Campaign Category', value: purpose || 'N/A' },
-            { label: 'Acknowledged?', value: donationData.acknowledged ? 'Yes' : 'No' },
-        ];
-        setCustomRows(updatedCustomRows);
+      const updatedCustomRows = [
+        {
+          label: 'Donation Amount',
+          value: `$ ${donationData.amount}` || 'N/A',
+        },
+        {
+          label: 'Date Donated',
+          value: formatDateString(donationData.date) || 'N/A',
+        },
+        { label: 'Donor', value: donorName || 'N/A' },
+        {
+          label: 'Payment Information',
+          value: donationData.payment_type || 'N/A',
+        },
+        { label: 'Campaign Category', value: purpose || 'N/A' },
+        {
+          label: 'Acknowledged?',
+          value: donationData.acknowledged ? 'Yes' : 'No',
+        },
+      ];
+      setCustomRows(updatedCustomRows);
     }
   }
 
   useEffect(() => {
     setTableWithDonation();
-  }, [donationData, donorName, purpose]);
+  }, [donationData, donorName, purpose, setTableWithDonation]);
 
   return (
     <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <Box display="flex" flexDirection="row" alignItems="center" marginBottom={2} marginLeft={2}>
+      <Box
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        marginBottom={2}
+        marginLeft={2}
+      >
         <Typography variant="h5" gutterBottom>
           Donation Information
         </Typography>
@@ -114,20 +148,18 @@ function DonationInfoPage() {
       <BasicTable customRows={customRows} />
 
       {!donationData.acknowledged && (
-        <>
-          <p style={{ marginTop: '16px', marginLeft: '16px' }}>
-            This donation has not been acknowledged.
-          </p>
-        </>
+        <p style={{ marginTop: '16px', marginLeft: '16px' }}>
+          This donation has not been acknowledged.
+        </p>
       )}
       <Button
         onClick={() => navigate('/home')}
-            style={{ marginLeft: '16px', background: 'blue', color: 'white' }}
-        >
-          Send them a message now ->
+        style={{ marginLeft: '16px', background: 'blue', color: 'white' }}
+      >
+        Send them a message now
       </Button>
     </Box>
   );
 }
 
-export default DonationInfoPage;
+export default DonationInfoPage;
diff --git a/client/src/donorProfile/DonorProfilePage.tsx b/client/src/donorProfile/DonorProfilePage.tsx
@@ -1,9 +1,63 @@
-import React from 'react';
-import { Box, Button } from '@mui/material';
-import ProfileInfo from './ProfileInfo'; // Adjust the import path as needed
-import DateInfoBox from './DateInfoBox'; // Adjust the import path as needed
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from 'react';
+import { Box, Button, TextField, MenuItem, Popover, Grid } from '@mui/material';
+import ProfileInfo from './ProfileInfo';
+import DateInfoBox from './DateInfoBox';
 
 function DonorProfilePage() {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [address, setAddress] = useState('');
+  const [orgName, setOrgName] = useState('');
+  const [orgEmail, setOrgEmail] = useState('');
+  const [orgAddress, setOrgAddress] = useState('');
+  const [selectedDonorGroup, setSelectedDonorGroup] = useState('');
+  const [selectedDonorType, setSelectedDonorType] = useState('');
+  const [confirmDisabled, setConfirmDisabled] = useState(true);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setName('');
+    setEmail('');
+    setPhone('');
+    setAddress('');
+    setOrgName('');
+    setOrgEmail('');
+    setOrgAddress('');
+    setSelectedDonorGroup('');
+    setSelectedDonorType('');
+    setConfirmDisabled(true); // Reset confirm button state
+  };
+
+  const handleConfirm = () => {
+    // update donor
+    handleClose(); // Close the popover after confirming changes
+  };
+
+  const isFormValid = () => {
+    return (
+      name !== '' &&
+      email !== '' &&
+      phone !== '' &&
+      address !== '' &&
+      selectedDonorGroup !== '' &&
+      selectedDonorType !== ''
+    );
+  };
+
+  const handleFieldChange = () => {
+    setConfirmDisabled(!isFormValid());
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
   return (
     <Box sx={{ p: 3 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
@@ -13,9 +67,155 @@ function DonorProfilePage() {
 
       {/* Buttons */}
       <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
-        <Button variant="contained" sx={{ mr: 1 }}>
+        <Button variant="contained" sx={{ mr: 1 }} onClick={handleClick}>
           Edit Profile
         </Button>
+        <Popover
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+        >
+          <Box sx={{ p: 2 }}>
+            <h1>Edit Donor Profile</h1>
+            <Grid container spacing={2}>
+              <Grid item xs={6}>
+                <TextField
+                  label="Name* (required)"
+                  value={name}
+                  onChange={(e) => {
+                    setName(e.target.value);
+                    handleFieldChange();
+                  }}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Email*"
+                  value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                    handleFieldChange();
+                  }}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Phone Number*"
+                  value={phone}
+                  onChange={(e) => {
+                    setPhone(e.target.value);
+                    handleFieldChange();
+                  }}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Address*"
+                  value={address}
+                  onChange={(e) => {
+                    setAddress(e.target.value);
+                    handleFieldChange();
+                  }}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  select
+                  label="Donor Group"
+                  value={selectedDonorGroup}
+                  onChange={(e) => {
+                    setSelectedDonorGroup(e.target.value);
+                    handleFieldChange();
+                  }}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                >
+                  <MenuItem value="Individual">Individual</MenuItem>
+                  <MenuItem value="Board Member">Board Member</MenuItem>
+                  <MenuItem value="Foundation">Foundation</MenuItem>
+                  <MenuItem value="Corporate">Corporate</MenuItem>
+                  <MenuItem value="Gov/State">Gov/State</MenuItem>
+                  <MenuItem value="Gov/Fed">Gov/Fed</MenuItem>
+                  <MenuItem value="Gov/Municipal">Gov/Municipal</MenuItem>
+                </TextField>
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  select
+                  label="Donation Type"
+                  value={selectedDonorType}
+                  onChange={(e) => {
+                    setSelectedDonorType(e.target.value);
+                    handleFieldChange();
+                  }}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                >
+                  <MenuItem value="Donation">Donation</MenuItem>
+                  <MenuItem value="Sponsor">Sponsor</MenuItem>
+                  <MenuItem value="Grant">Grant</MenuItem>
+                </TextField>
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Organization name"
+                  value={orgName}
+                  onChange={(e) => setOrgName(e.target.value)}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Organization email"
+                  value={orgEmail}
+                  onChange={(e) => setOrgEmail(e.target.value)}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Organization address"
+                  value={orgAddress}
+                  onChange={(e) => setOrgAddress(e.target.value)}
+                  fullWidth
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+            </Grid>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Button variant="outlined" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={handleConfirm}
+                disabled={confirmDisabled}
+              >
+                Confirm
+              </Button>
+            </Box>
+          </Box>
+        </Popover>
         <Button variant="contained" color="primary">
           Message
         </Button>