new add participant flow

Author: applepie7864

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

@@ -1,49 +1,39 @@
 import React, { useState } from "react";
-import { Button, Flex, Spinner } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
 
-import { useMutation, useQuery, useLazyQuery } from "@apollo/client";
-import {
-  GET_AVAILABLE_ROOMS,
-  GET_PARTICIPANT_BY_ID,
-} from "../../../gql/queries";
+import { useMutation, useLazyQuery } from "@apollo/client";
+import { GET_PARTICIPANT_BY_ID } from "../../../gql/queries";
 import { CREATE_PARTICIPANT } from "../../../gql/mutations";
 
 import ModalContainer from "../../common/ModalContainer";
 import FormInputField from "../../common/FormInputField";
-import FormSelectField from "../../common/FormSelectField";
 
 type AddParticipantCardProps = {
+  roomNumber: string;
   close: () => void;
 };
 
-const AddParticipantCard = ({
-  close,
-}: AddParticipantCardProps): React.ReactElement => {
+const AddParticipantCard = ({roomNumber, close}: AddParticipantCardProps): React.ReactElement => {
+  // eslint-disable-next-line prefer-template
+  const title = "Add Participant to Room " + roomNumber;
   const [participantId, setParticipantId] = useState("");
-  const [roomNumber, setRoomNumber] = useState("");
   const [arrivalDate, setArrivalDate] = useState("");
   const [password, setPassword] = useState("");
 
   const [error, setError] = useState("");
 
-  const {
-    loading: getAvailableRoomsLoading,
-    error: getAvailableRoomsError,
-    data: getAvailableRoomsData,
-  } = useQuery(GET_AVAILABLE_ROOMS);
   const [getParticipantById] = useLazyQuery(GET_PARTICIPANT_BY_ID);
   const [createParticipant] = useMutation(CREATE_PARTICIPANT);
 
   const reset = () => {
     setParticipantId("");
-    setRoomNumber("");
     setArrivalDate("");
     setPassword("");
     setError("");
   };
 
   const validate = async () => {
-    if (!participantId || !roomNumber || !arrivalDate || !password) {
+    if (!participantId || !arrivalDate || !password) {
       setError("Missing fields.");
       return false;
     }
@@ -88,7 +78,7 @@ const AddParticipantCard = ({
   };
 
   return (
-    <ModalContainer title="Add Participant">
+    <ModalContainer title={title}>
       <Flex flexDir="column" gap="20px">
         {error && <Flex textColor="red.500">{error}</Flex>}
 
@@ -102,27 +92,6 @@ const AddParticipantCard = ({
           required
         />
 
-        {getAvailableRoomsLoading ? (
-          <Spinner />
-        ) : getAvailableRoomsError || !getAvailableRoomsData ? (
-          <Flex p="10px">Error getting rooms.</Flex>
-        ) : (
-          <FormSelectField
-            label="Room Number"
-            placeholder="Please select a room"
-            value={roomNumber}
-            options={getAvailableRoomsData.getAvailableRooms.map(
-              (room: number) => ({
-                key: room,
-                value: room,
-                display: `Room ${room}`,
-              }),
-            )}
-            onChange={(e) => setRoomNumber(e.target.value)}
-            required
-          />
-        )}
-
         <FormInputField
           label="Arrival Date"
           value={arrivalDate}

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

@@ -1,36 +1,47 @@
 import { Button, Flex, Text } from '@chakra-ui/react';
-import React from 'react'
+import React, { useState } from 'react'
+import AddParticipantCard from './AddParticipantCard';
 
 type EmptyParticipantCardProps = {
     roomNumber: string;
 }
 
 const EmptyParticipantCard = ({roomNumber}: EmptyParticipantCardProps) => {
-  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 [addParticipant, setAddParticipant] = 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">The room is empty.</Flex>
-            <Button size="xs" bg="orange.500" color="white" mt="3px">Add 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">The room is empty.</Flex>
+                <Button 
+                    size="xs" 
+                    bg="orange.500" 
+                    color="white" 
+                    mt="3px"
+                    onClick={() => setAddParticipant(true)}
+                >
+                    Add Participant
+                </Button>
+            </Flex>
+            {addParticipant && <AddParticipantCard roomNumber={roomNumber} close={() => setAddParticipant(false)} />}
         </Flex>
-    </Flex>
-  )
+    )
 }
 
 export default EmptyParticipantCard