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 TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { getSeniorList } from 'api/getSeniorList';
+
+export const SeniorSearch: FC = () => {
+  const [value, setValue] = useState<string | null>(null);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [options, setOptions] = useState<string[]>(['']);
+
+  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));
+    }
+  };
+
+  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>
+  );
+};