Newer
Older
/* eslint-disable react/jsx-props-no-spreading */
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';
};
export const SeniorSearch: FC<SeniorSearchProps> = ({
control,
}: SeniorSearchProps) => {
const [value, setValue] = useState<ResponseProps | null>(null);
const [seniors, setSeniors] = useState<ResponseProps[]>([]);
// 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) {
<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,
}}
/>
)}