From ab7d7b94c6dddfe7f48e06159c87bc82e5a1283b Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Tue, 8 Jun 2021 09:51:59 +0200
Subject: [PATCH] Install controller.
---
.../Reservation/SeniorSearch.tsx | 84 +++++++++++--------
1 file changed, 51 insertions(+), 33 deletions(-)
diff --git a/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx b/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx
index 6460a84..4863134 100644
--- a/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx
+++ b/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx
@@ -4,50 +4,68 @@ 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 { ReservationProps } from './ReservationProps';
-export const SeniorSearch: FC = () => {
+type SeniorSearchProps = {
+ control: Control<ReservationProps>;
+};
+
+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 => {
- if (newValue !== undefined) {
- const MIN_SEARCH_LENGTH = 3;
- if (newValue.length >= MIN_SEARCH_LENGTH)
- getSeniorList(newValue).then((list) => {
+ 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 (
- <Autocomplete
- value={value}
- id="senior-searcher"
- onInputChange={(event, newValue) => handleChange(newValue)}
- onChange={(event, newValue) => {
- setValue(newValue);
- }}
- options={seniors}
- getOptionSelected={(option, val) => option.id === val.id}
- getOptionLabel={(option) => {
- if (Object.prototype.hasOwnProperty.call({ user: true }, 'user')) {
- return option.user.lastName;
- }
- return '';
- }}
- renderOption={(option) => (
- <>
- {option.user.firstName} {option.user.lastName} {option.user.username}
- </>
- )}
- renderInput={(params) => (
- <TextField
- {...params}
- label="Search a senior"
- variant="outlined"
- InputProps={{
- ...params.InputProps,
+ <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,
+ }}
+ />
+ )}
/>
)}
/>
--
GitLab