Pass state to avoid controlled component.

Work on #12.

src/components/Dashboard/ReservationPage/Reservation/InsertReservationProps.ts

@@ -3,7 +3,7 @@ export type Location = {
 };
 
 export type InsertReservationProps = {
-  senior: number;
+  senior: number | undefined;
   insertedBy: number;
   tripStages: string[];
   driverShift: string;

src/components/Dashboard/ReservationPage/Reservation/SeniorSearch/SeniorSearch.tsx

@@ -8,13 +8,14 @@ import { Control, Controller } from 'react-hook-form';
 import { InsertReservationProps } from '../InsertReservationProps';
 
 type SeniorSearchProps = {
-  control: Control<InsertReservationProps>;
+  senior: ResponseProps | null;
+  setSenior: React.Dispatch<React.SetStateAction<ResponseProps | null>>;
 };
 
 export const SeniorSearch: FC<SeniorSearchProps> = ({
-  control,
+  senior,
+  setSenior,
 }: SeniorSearchProps) => {
-  const [value, setValue] = useState<ResponseProps | null>(null);
   const [seniors, setSeniors] = useState<ResponseProps[]>([]);
 
   // FIX: Input closing when the data is changed.
@@ -22,7 +23,7 @@ export const SeniorSearch: FC<SeniorSearchProps> = ({
   // attaching the value manually or to isolate this component.
   const handleChange = (newValue: string): void => {
     const MIN_SEARCH_LENGTH = 4;
-    if (newValue.length >= MIN_SEARCH_LENGTH && value == null) {
+    if (newValue.length >= MIN_SEARCH_LENGTH && senior == null) {
       getSeniorList(newValue).then((list) => {
         if (list.length !== 0) {
           setSeniors([...seniors, ...list]);
@@ -34,37 +35,30 @@ export const SeniorSearch: FC<SeniorSearchProps> = ({
   };
 
   return (
-    <Controller
-      control={control}
-      name="senior"
-      as={(field) => (
-        <Autocomplete
-          value={value}
-          id="senior-searcher"
-          onInputChange={(_, newValue) => handleChange(newValue)}
-          onChange={(_, val) => {
-            field.onChange(val?.id);
-            setValue(val);
+    <Autocomplete
+      value={senior}
+      id="senior-searcher"
+      onInputChange={(_, newValue) => handleChange(newValue)}
+      onChange={(_, val) => {
+        setSenior(val);
+      }}
+      options={seniors}
+      getOptionSelected={(option, val) => option.id === val.id}
+      getOptionLabel={(option) => option.user.lastName}
+      renderOption={(option) => (
+        <>
+          {option.user.firstName} {option.user.lastName} {option.user.username}{' '}
+          {option.memberCardNumber}
+        </>
+      )}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Search a senior"
+          variant="outlined"
+          InputProps={{
+            ...params.InputProps,
           }}
-          options={seniors}
-          getOptionSelected={(option, val) => option.id === val.id}
-          getOptionLabel={(option) => option.user.lastName}
-          renderOption={(option) => (
-            <>
-              {option.user.firstName} {option.user.lastName}{' '}
-              {option.user.username} {option.memberCardNumber}
-            </>
-          )}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label="Search a senior"
-              variant="outlined"
-              InputProps={{
-                ...params.InputProps,
-              }}
-            />
-          )}
         />
       )}
     />

src/components/Dashboard/ReservationPage/ReservationDialog.tsx

@@ -9,6 +9,7 @@ import {
   Button,
 } from '@material-ui/core';
 
+import { ResponseProps } from 'api/ResponseProps';
 import { getRoleObject } from 'api/getRoleObject';
 import { setReservation } from 'api/setReservation';
 import { SubmitHandler, useForm } from 'react-hook-form';
@@ -25,10 +26,12 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
   handleClose,
   isOpen,
 }: ReservationDialogProps) => {
-  const { control, handleSubmit, register } = useForm<InsertReservationProps>({
+  const { control, handleSubmit } = useForm<InsertReservationProps>({
     mode: 'onSubmit',
   });
 
+  const [senior, setSenior] = useState<ResponseProps | null>(null);
+
   const onSubmit: SubmitHandler<InsertReservationProps> = (
     reservation: InsertReservationProps,
   ) => {
@@ -37,6 +40,7 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
       filledReservation.insertedBy = role.id;
     });
     filledReservation.driverShift = '';
+    filledReservation.senior = senior?.id;
     console.log(filledReservation);
     setReservation(filledReservation);
     handleClose();
@@ -56,7 +60,7 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
               Write here below the details of your next reservation
             </DialogContentText>
 
-            <SeniorSearch control={control} />
+            <SeniorSearch senior={senior} setSenior={setSenior} />
             <InputField
               name="number"
               label="Phone number"