SeniorSearch.tsx

/* 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,
              }}
            />
          )}
        />
      )}
    />
  );
};