diff --git a/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx b/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx deleted file mode 100644 index 6638af6d5e3867f798a7e74dd007b0b31cf2fc91..0000000000000000000000000000000000000000 --- a/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx +++ /dev/null @@ -1,73 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading */ -import React, { FC, useState } from 'react'; -import TextField from '@material-ui/core/TextField'; -import Autocomplete from '@material-ui/lab/Autocomplete'; -import { getSeniorList } from 'api/getSeniorList'; -import { ResponseProps } from 'api/ResponseProps'; -import { Control, Controller } from 'react-hook-form'; -import { InsertReservationProps } from './InsertReservationProps'; - -type SeniorSearchProps = { - control: Control<InsertReservationProps>; -}; - -export const SeniorSearch: FC<SeniorSearchProps> = ({ - control, -}: SeniorSearchProps) => { - const [value, setValue] = useState<ResponseProps | null>(null); - const [seniors, setSeniors] = useState<ResponseProps[]>([]); - const [query, setQuery] = useState<string>(''); - - // FIX: Input closing when the data is changed. - // The issue is caused by the stopped re-rendering of react hook form. Consider - // 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) { - getSeniorList(newValue).then((list) => { - if (list.length !== 0) { - setSeniors(list); - } else { - setSeniors([]); - } - }); - } - }; - - return ( - <Controller - control={control} - name="senior" - as={({ onChange }) => ( - <Autocomplete - value={value} - id="senior-searcher" - onInputChange={(_, newValue) => handleChange(newValue)} - onChange={(_, val) => { - onChange(val?.id); - setValue(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, - }} - /> - )} - /> - )} - /> - ); -};