edit current participant arrival and password

Author: applepie7864

frontend/src/components/pages/participants/CurrentParticipantCard.tsx

@@ -1,5 +1,6 @@
 import { Button, Flex, Text } from '@chakra-ui/react';
-import React from 'react'
+import React, { useState } from 'react'
+import EditParticipantCard from './EditParticipantCard';
 
 type CurrentParticipantCardProps = {
     roomNumber: string;
@@ -9,32 +10,50 @@ type CurrentParticipantCardProps = {
 }
 
 const CurrentParticipantCard = ({roomNumber, participantId, arrival, password}: CurrentParticipantCardProps) => {
-  return (
-    <Flex 
-        w="180px"
-        h="130px"
-        border="2px solid"
-        borderColor="#E2E8F0"
-        borderRadius="5px"
-        flexDir="column"
-        justifyContent="top"
-        alignItems="center"
-    >
-        <Flex w="full" justifyContent="center" p="5px" bg="#E3ECEB" fontSize="small" fontWeight="700">Room {roomNumber}</Flex>
-        <Flex
-            w="full"
-            h="full"
+    const [editParticipant, setEditParticipant] = useState(false);
+    return (
+        <Flex 
+            w="180px"
+            h="130px"
+            border="2px solid"
+            borderColor="#E2E8F0"
+            borderRadius="5px"
             flexDir="column"
+            justifyContent="top"
             alignItems="center"
-            justifyContent="center"
-            gap="5px"
         >
-            <Flex fontSize="xs">ID Number: { participantId }</Flex>
-            <Flex fontSize="xs">Arrival Date: { arrival }</Flex>
-            <Button size="xs" bg="orange.500" color="white" mt="3px">Edit Participant</Button>
+            <Flex w="full" justifyContent="center" p="5px" bg="#E3ECEB" fontSize="small" fontWeight="700">Room {roomNumber}</Flex>
+            <Flex
+                w="full"
+                h="full"
+                flexDir="column"
+                alignItems="center"
+                justifyContent="center"
+                gap="5px"
+            >
+                <Flex fontSize="xs">ID Number: { participantId }</Flex>
+                <Flex fontSize="xs">Arrival Date: { arrival }</Flex>
+                <Button 
+                    size="xs" 
+                    bg="orange.500" 
+                    color="white" 
+                    mt="3px"
+                    onClick={() => setEditParticipant(true)}
+                >
+                    Edit Participant
+                </Button>
+            </Flex>
+            {editParticipant && 
+                <EditParticipantCard 
+                    selectedRoomNumber={roomNumber} 
+                    selectedParticipantId={participantId} 
+                    selectedArrival={arrival} 
+                    selectedPassword={password} 
+                    close={() => setEditParticipant(false)}
+                /> 
+            }
         </Flex>
-    </Flex>
-  )
+    )
 }
 
 export default CurrentParticipantCard

frontend/src/components/pages/participants/EditParticipantCard.tsx

@@ -9,49 +9,50 @@ import { UPDATE_PARTICIPANT_BY_ID } from "../../../gql/mutations";
 import ModalContainer from "../../common/ModalContainer";
 import FormInputField from "../../common/FormInputField";
 import FormSelectField from "../../common/FormSelectField";
-import { TableData } from "../../common/CommonTable";
 
 type EditParticipantCardProps = {
-  selected: TableData;
+  selectedRoomNumber: string;
+  selectedParticipantId: string;
+  selectedArrival: string;
+  selectedPassword: string;
   close: () => void;
 };
 
 const EditParticipantCard = ({
-  selected,
+  selectedRoomNumber,
+  selectedParticipantId,
+  selectedArrival,
+  selectedPassword,
   close,
 }: EditParticipantCardProps): React.ReactElement => {
-  const [roomNumber, setRoomNumber] = useState(selected.roomNumber);
-  const [arrivalDate, setArrivalDate] = useState(selected.arrival);
-  const [departureDate, setDepartureDate] = useState(selected.departure);
-  const [password, setPassword] = useState(selected.password);
+  // eslint-disable-next-line prefer-template
+  const title = "Edit Participant in Room " + selectedRoomNumber;
 
+  const [arrivalDate, setArrivalDate] = useState(selectedArrival);
+  const [password, setPassword] = useState(selectedPassword);
   const [error, setError] = useState("");
 
-  const {
-    loading: getAvailableRoomsLoading,
-    error: getAvailableRoomsError,
-    data: getAvailableRoomsData,
-  } = useQuery(GET_AVAILABLE_ROOMS);
+  // const {
+  //   loading: getAvailableRoomsLoading,
+  //   error: getAvailableRoomsError,
+  //   data: getAvailableRoomsData,
+  // } = useQuery(GET_AVAILABLE_ROOMS);
   const [updateParticipantById] = useMutation(UPDATE_PARTICIPANT_BY_ID);
 
   const reset = () => {
-    setRoomNumber(selected.roomNumber);
-    setArrivalDate(selected.arrival);
-    setDepartureDate(selected.departure);
-    setPassword(selected.password);
+    setArrivalDate(selectedArrival);
+    setPassword(selectedPassword);
     setError("");
   };
 
-  const validate = async () => {
-    if (!roomNumber || !arrivalDate || !password) {
+  const validate = () => {
+    if (!arrivalDate || !password) {
       setError("Missing fields.");
       return false;
     }
     if (
-      roomNumber === selected.roomNumber &&
-      arrivalDate === selected.arrival &&
-      departureDate === selected.departure &&
-      password === selected.password
+      arrivalDate === selectedArrival &&
+      password === selectedPassword
     ) {
       setError("No changes made.");
       return false;
@@ -62,15 +63,12 @@ const EditParticipantCard = ({
   const handleSubmit = async () => {
     setError("");
     try {
-      const valid: boolean = await validate();
+      const valid: boolean = validate();
       if (valid) {
-        const room = parseInt(roomNumber, 10);
         await updateParticipantById({
-          variables: {
-            participantId: selected.participantId,
-            roomNumber: room,
+          variables: { 
+            participantId: selectedParticipantId,
             arrival: arrivalDate,
-            departure: departureDate,
             password,
           },
         });
@@ -85,18 +83,18 @@ const EditParticipantCard = ({
   };
 
   return (
-    <ModalContainer title="Edit Participant">
+    <ModalContainer title={title}>
       <Flex flexDir="column" gap="20px">
         {error && <Flex textColor="red.500">{error}</Flex>}
 
         <Flex flexDir="column">
           <Flex mb="5px" color="gray.main" fontWeight="700">
             ID Number
           </Flex>
-          <Flex>{selected.participantId}</Flex>
+          <Flex>{selectedParticipantId}</Flex>
         </Flex>
 
-        {getAvailableRoomsLoading ? (
+        {/* {getAvailableRoomsLoading ? (
           <Spinner />
         ) : getAvailableRoomsError || !getAvailableRoomsData ? (
           <Flex p="10px">Error getting rooms.</Flex>
@@ -116,7 +114,7 @@ const EditParticipantCard = ({
               setRoomNumber(e.target.value || selected.roomNumber)
             }
           />
-        )}
+        )} */}
 
         <FormInputField
           label="Arrival Date"
@@ -127,15 +125,6 @@ const EditParticipantCard = ({
           }}
         />
 
-        <FormInputField
-          label="Departure Date"
-          value={departureDate}
-          type="date"
-          onChange={(e) => {
-            setDepartureDate(e.target.value);
-          }}
-        />
-
         <FormInputField
           label="Password"
           value={password}

frontend/src/components/pages/participants/ParticipantsPage.tsx

@@ -20,7 +20,6 @@ import CommonTable, {
 } from "../../common/CommonTable";
 import SideBar from "../../common/SideBar";
 import AddParticipantCard from "./AddParticipantCard";
-import EditParticipantCard from "./EditParticipantCard";
 import EditPastParticipantCard from "./EditPastParticipantCard";
 import CurrentParticipantCard from "./CurrentParticipantCard";
 import EmptyParticipantCard from "./EmptyParticipantCard";