updated table logic & added editing for residents + tasks

frontend/src/components/common/CommonTable.tsx

@@ -53,8 +53,8 @@ const CommonTable = ({
   const [page, setPage] = useState(1);
   const [pageArray, setPageArray] = useState<number[]>([]);
   const [sortingColumn, setSortingColumn] = useState<SortState>({});
-  const [originalData, setOriginalData] = useState(data);
-  const [sortedData, setSortedData] = useState(data);
+  const [originalData, setOriginalData] = useState<TableData[]>([]);
+  const [sortedData, setSortedData] = useState<TableData[]>([]);
   const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
   const [selectedRow, setSelectedRow] = useState<TableData>({});
 
@@ -70,9 +70,16 @@ const CommonTable = ({
   }, [data, maxResults]);
 
   useEffect(() => {
-    setOriginalData(data);
-    setSortedData(data);
-  }, [data]);
+    const displayedData = data.map((item) => {
+      const filteredItem: TableData = {};
+      columnInfo.forEach((col) => {
+        filteredItem[col.key] = item[col.key] || "";
+      });
+      return filteredItem;
+    });
+    setOriginalData(displayedData);
+    setSortedData(displayedData);
+  }, [data, columnInfo]);
 
   const handleRowClick = (row: TableData) => {
     setSelectedRow(row);

frontend/src/components/common/ModalContainer.tsx

@@ -13,6 +13,7 @@ import CloseIcon from "@mui/icons-material/Close";
 type Props = {
   title: string;
   onDelete?: () => void;
+  onCloseModal?: () => void;
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   children: React.ReactNode;
@@ -21,6 +22,7 @@ type Props = {
 const ModalContainer = ({
   title,
   onDelete,
+  onCloseModal,
   isOpen,
   setIsOpen,
   children,
@@ -31,6 +33,10 @@ const ModalContainer = ({
       isOpen={isOpen}
       onClose={() => setIsOpen(false)}
       isCentered
+      onOverlayClick={() => {
+        setIsOpen(false);
+        if (onCloseModal) onCloseModal();
+      }}
     >
       <ModalOverlay />
       <ModalContent>
@@ -46,7 +52,10 @@ const ModalContainer = ({
               bg="transparent"
               h="auto"
               _hover={{ bg: "transparent" }}
-              onClick={() => setIsOpen(false)}
+              onClick={() => {
+                setIsOpen(false);
+                if (onCloseModal) onCloseModal();
+              }}
             >
               <CloseIcon />
             </Button>

frontend/src/components/pages/residents/ResidentEditModal.tsx

@@ -1,13 +1,17 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Button, Text, Flex } from "@chakra-ui/react";
+import { useMutation } from "@apollo/client";
+import { UPDATE_RESIDENT } from "../../../APIClients/Mutations/ResidentsMutations";
+import { GET_ALL_RESIDENTS } from "../../../APIClients/Queries/ResidentsQueries";
 import ModalContainer from "../../common/ModalContainer";
 import FormField from "../../common/FormField";
 
 export type ResidentEditInfo = {
+  userId: string;
   residentId: number;
   roomNumber: number;
-  arrivalDate: string;
-  departureDate: string;
+  dateJoined: string;
+  dateLeft: string;
   password: string;
 };
 
@@ -24,14 +28,9 @@ const ResidentEditModal = ({
   residentInfo,
   onCloseEditModal,
 }: Props): React.ReactElement => {
-  const [residentId, setResidentId] = useState(residentInfo.residentId);
-  const [password, setPassword] = useState(residentInfo.password);
-  const [arrivalDate, setArrivalDate] = useState(residentInfo.arrivalDate);
-  const [departureDate, setDepartureDate] = useState(
-    residentInfo.departureDate,
-  );
-
-  const [roomNumber, setRoomNumber] = useState(residentInfo.roomNumber);
+  const [residentEdits, setResidentEdits] = useState<ResidentEditInfo>({
+    ...residentInfo,
+  });
 
   const [showPassword, setShowPassword] = useState(false);
   const [submitPressed, setSubmitPressed] = useState(false);
@@ -44,54 +43,76 @@ const ResidentEditModal = ({
 
   const [invalidRoomNumber, setInvalidRoomNumber] = useState("");
   const [invalidResidentId, setInvalidResidentId] = useState("");
-  // useEffect(() => {
-  //   // TODO: get roomList, residentIdList
-  // }, []);
+
+  const [updateResident] = useMutation(UPDATE_RESIDENT);
+  useEffect(() => {
+    // TODO: get roomList, residentIdList
+  }, []);
 
   const handleSubmit = () => {
     setSubmitPressed(true);
-    if (roomNumber !== residentInfo.roomNumber && roomNumber in roomList) {
-      setInvalidRoomNumber(
-        "This room number is already taken. Note: To set this field, please remove the room number from the Resident who occupies the room.",
-      );
-    } else {
-      setInvalidRoomNumber("");
-    }
-
-    if (
-      residentId !== residentInfo.residentId &&
-      residentIdList.includes(residentId)
-    ) {
-      setInvalidResidentId("This ID number is already taken.");
-    } else {
-      setInvalidResidentId("");
-    }
-
-    if (invalidRoomNumber || invalidResidentId) {
-      return;
-    }
+    // if (roomNumber !== residentInfo.roomNumber && roomNumber in roomList) {
+    //   setInvalidRoomNumber(
+    //     "This room number is already taken. Note: To set this field, please remove the room number from the Resident who occupies the room.",
+    //   );
+    // } else {
+    //   setInvalidRoomNumber("");
+    // }
+
+    // if (
+    //   residentId !== residentInfo.residentId &&
+    //   residentIdList.includes(residentId)
+    // ) {
+    //   setInvalidResidentId("This ID number is already taken.");
+    // } else {
+    //   setInvalidResidentId("");
+    // }
+
+    // if (invalidRoomNumber || invalidResidentId) {
+    //   return;
+    // }
 
     // TODO: API POST to Residents/Participants
-
-    if (!residentId || !password || !arrivalDate) {
-      // TODO: Add error handling
-    }
+    updateResident({
+      variables: {
+        userId: residentInfo.userId,
+        resident: {
+          residentId: residentEdits.residentId,
+          roomNumber: residentEdits.roomNumber,
+          dateJoined: residentEdits.dateJoined,
+          dateLeft: residentEdits.dateLeft,
+          password: residentEdits.password,
+        },
+      },
+      refetchQueries: [{ query: GET_ALL_RESIDENTS }],
+    });
+
+    // if (!residentId || !password || !dateJoined) {
+    //   // TODO: Add error handling
+    // }
     // TODO: API call to add resident
-  };
-
-  const resetFormState = () => {
-    onCloseEditModal();
+    setIsOpen(false);
   };
 
   return (
-    <ModalContainer title="Edit Resident" isOpen={isOpen} setIsOpen={setIsOpen}>
+    <ModalContainer
+      title="Edit Resident"
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      onCloseModal={() => onCloseEditModal()}
+    >
       <Flex flexDir="column" gap="20px">
         <Flex flexDir="column">
           <FormField
             label="ID Number"
-            value={residentId.toString()}
+            value={residentEdits.residentId.toString()}
             type="number"
-            onChange={(e) => setResidentId(parseInt(e.target.value, 10))}
+            onChange={(e) =>
+              setResidentEdits({
+                ...residentEdits,
+                residentId: parseInt(e.target.value, 10),
+              })
+            }
             submitPressed={submitPressed}
             required
             error={invalidResidentId !== ""}
@@ -106,9 +127,14 @@ const ResidentEditModal = ({
         <Flex flexDir="column">
           <FormField
             label="Room Number (Optional)"
-            value={roomNumber.toString()}
+            value={residentEdits.roomNumber.toString()}
             type="number"
-            onChange={(e) => setRoomNumber(parseInt(e.target.value, 10))}
+            onChange={(e) =>
+              setResidentEdits({
+                ...residentEdits,
+                roomNumber: parseInt(e.target.value, 10),
+              })
+            }
             submitPressed={submitPressed}
             error={invalidRoomNumber !== ""}
           />
@@ -122,25 +148,29 @@ const ResidentEditModal = ({
         <Flex gap="20px">
           <FormField
             label="Arrival Date"
-            value={arrivalDate.toString()}
+            value={residentEdits.dateJoined.toString()}
             type="date"
-            onChange={() => {}}
+            onChange={(e) =>
+              setResidentEdits({ ...residentEdits, dateJoined: e.target.value })
+            }
             submitPressed={submitPressed}
             required
           />
           <FormField
             label="Departure Date (Optional)"
-            value={departureDate.toString()}
+            value={residentEdits.dateLeft?.toString() || ""}
             type="date"
-            onChange={(e) => setDepartureDate(e.target.value)}
+            onChange={(e) =>
+              setResidentEdits({ ...residentEdits, dateLeft: e.target.value })
+            }
             submitPressed={submitPressed}
           />
         </Flex>
         <Flex>
           <FormField
             label="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            value={residentEdits.password}
+            onChange={() => {}}
             submitPressed={submitPressed}
             required
             isPassword
@@ -154,13 +184,13 @@ const ResidentEditModal = ({
             variant="cancel"
             mr="8px"
             onClick={() => {
-              resetFormState();
+              onCloseEditModal();
               setIsOpen(false);
             }}
           >
             Cancel
           </Button>
-          <Button variant="primary" onClick={handleSubmit}>
+          <Button variant="primary" onClick={() => handleSubmit()}>
             Save
           </Button>
         </Flex>

frontend/src/components/pages/residents/ResidentsPage.tsx

@@ -46,11 +46,11 @@ const columnTypes: ColumnInfoTypes[] = [
   },
   {
     header: "Arrival Date",
-    key: "arrivalDate",
+    key: "dateJoined",
   },
   {
     header: "Departure Date",
-    key: "departureDate",
+    key: "dateLeft",
   },
 ];
 
@@ -137,28 +137,19 @@ const ResidentsPage = (): React.ReactElement => {
   } = useQuery(GET_ALL_RESIDENTS);
 
   useEffect(() => {
+    console.log("useEffect triggered", residentAllData);
     if (residentAllData?.getAllResidents) {
       setResidents(residentAllData.getAllResidents);
     }
-  }, [residentAllData]);
+  }, [residentAllData, residentEditInfo]);
 
   const handleResidentEdit = (row: any) => {
+    const selectedResident = residents.find(
+      (resident) => resident.residentId === row.residentId,
+    ) as ResidentEditInfo;
+    console.log(selectedResident);
+    setEditInfo(selectedResident);
     setIsModalOpen("edit");
-    // console.log(row);
-    setEditInfo(row);
-  };
-
-  // CHANGE
-  const handleRowClick = (row: any) => {
-    setIsModalOpen("edit");
-    // console.log(row);
-    setEditInfo(row);
-  };
-
-  const handleResidentSubmitEdit = () => {
-    setEditInfo(undefined);
-
-    // TODO: modify data
   };
 
   return (
@@ -180,14 +171,7 @@ const ResidentsPage = (): React.ReactElement => {
         </Button>
       </Flex>
       <CommonTable
-        data={residents.map((item: TableData) => {
-          return {
-            roomNumber: item.roomNumber,
-            arrivalDate: item.dateJoined,
-            departureDate: item.dateLeft ? item.dateLeft : "",
-            residentId: item.residentId,
-          };
-        })}
+        data={residents}
         columnInfo={columnTypes}
         onEdit={handleResidentEdit}
       />
@@ -201,7 +185,7 @@ const ResidentsPage = (): React.ReactElement => {
           residentInfo={residentEditInfo}
           isOpen={isModalOpen === "edit"}
           setIsOpen={() => setIsModalOpen("none")}
-          onCloseEditModal={handleResidentSubmitEdit}
+          onCloseEditModal={() => setEditInfo(undefined)}
         />
       )}
     </Flex>

frontend/src/components/pages/tasks/TaskModal.tsx

@@ -114,11 +114,14 @@ const TaskModal = ({
           setSelectedDays([day]);
         }
       } else {
+        console.log("test")
+        console.log(task)
         setSelectedDays(
           task.repeatDays
             .map((day) => dayIdMap.find((dayMp) => dayMp.key === day)?.short)
             .filter((day): day is string => day !== undefined),
         );
+        console.log("test")
       }
 
       setTitle(task.title);
@@ -133,6 +136,7 @@ const TaskModal = ({
       setDueDate("");
       setDueTime("");
     }
+    console.log(task);
   }, [task, isOpen]);
 
   const handleSubmit = () => {

frontend/src/components/pages/tasks/columnKeys.ts

@@ -5,6 +5,10 @@ export const tasksColumnTypes: ColumnInfoTypes[] = [
     header: "Task Name",
     key: "title",
   },
+  {
+    header: "Recurrence",
+    key: "recurrenceFrequency",
+  },
   {
     header: "Due Date",
     key: "endDate",