New component to search senior (see #12). Enhance responsiveness and solve #10 and #11

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

 /* eslint-disable react/jsx-props-no-spreading */
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { getSeniorList } from 'api/getSeniorList';
+import { CircularProgress } from '@material-ui/core';
+import { ResponseProps } from 'api/ResponseProps';
+
+type DataProps = {
+  lastName: string;
+  id: number;
+};
 
 export const SeniorSearch: FC = () => {
-  const [value, setValue] = useState<string | null>(null);
-  const [inputValue, setInputValue] = useState<string>('');
-  const [options, setOptions] = useState<string[]>(['']);
+  const [value, setValue] = useState<ResponseProps | null>(null);
+  const [lastNameInput, setLastNameInput] = useState<string>('');
+  const [seniors, setSeniors] = useState<ResponseProps[]>([
+    {
+      id: 0,
+      user: {
+        username: '',
+        firstName: '',
+        lastName: '',
+        email: '',
+      },
+    },
+  ]);
 
   const handleChange = (newValue: string): void => {
-    setInputValue(newValue);
-    const MIN_SEARCH_LENGTH = 3;
-    if (newValue.length >= MIN_SEARCH_LENGTH) {
-      getSeniorList(newValue).then((list) => console.log(list));
+    if (newValue !== undefined) {
+      const MIN_SEARCH_LENGTH = 3;
+      if (newValue.length >= MIN_SEARCH_LENGTH)
+        getSeniorList(newValue).then((list) => {
+          setSeniors(list as ResponseProps[]);
+          console.log(seniors);
+        });
     }
   };
 
   return (
-    <div>
-      <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
-      <div>{`inputValue: '${inputValue}'`}</div>
-      <br />
-      <Autocomplete
-        value={value}
-        onChange={(event: any, newValue: string | null) => {
-          setValue(newValue);
-        }}
-        inputValue={inputValue}
-        onInputChange={(event, newInputValue) => {
-          handleChange(newInputValue);
-        }}
-        id="senior-searcher"
-        options={options}
-        style={{ width: 300 }}
-        renderInput={(params) => (
-          <TextField {...params} label="Search a senior" variant="outlined" />
-        )}
-      />
-    </div>
+    <Autocomplete
+      value={value}
+      id="senior-searcher"
+      onInputChange={(event, newValue) => handleChange(newValue)}
+      options={seniors as ResponseProps[]}
+      getOptionLabel={(option) => {
+        if (Object.prototype.hasOwnProperty.call({ user: true }, 'user')) {
+          return option.user.email ? option.user.email : '';
+        }
+        return '';
+      }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Asynchronous"
+          variant="outlined"
+          InputProps={{
+            ...params.InputProps,
+          }}
+        />
+      )}
+    />
   );
 };