refactor: converting autoComplete to Mui's autocomplete

src/components/Search/Search.tsx

@@ -3,10 +3,10 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest';
 import { css } from 'emotion';
 import { default as IconSearch } from '@material-ui/icons/Search';
-import debounce from 'lodash/debounce';
+// import debounce from 'lodash/debounce';
 
 import InputAdornment from '../../muiComponents/InputAdornment';
-import AutoComplete from '../AutoComplete';
+import AutoComplete from '../../muiComponents/AutoComplete';
 import colors from '../../utils/styles/colors';
 import { callSearch } from '../../utils/calls';
 
@@ -21,10 +21,7 @@ export interface State {
 export type cancelAllSearchRequests = () => void;
 export type handlePackagesClearRequested = () => void;
 export type handleSearch = (event: React.FormEvent<HTMLInputElement>, { newValue, method }: ChangeEvent) => void;
-export type handleClickSearch = (
-  event: KeyboardEvent<HTMLInputElement>,
-  { suggestionValue, method }: { suggestionValue: object[]; method: string }
-) => void;
+export type handleClickSearch = (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void;
 export type handleFetchPackages = ({ value: string }) => Promise<void>;
 export type onBlur = (event: React.FormEvent<HTMLInputElement>) => void;
 
@@ -55,19 +52,19 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
 
     return (
       <AutoComplete
-        color={colors.white}
-        onBlur={this.handleOnBlur}
+        // color={colors.white}
+        // onBlur={this.handleOnBlur}
         onChange={this.handleSearch}
-        onCleanSuggestions={this.handlePackagesClearRequested}
-        onClick={this.handleClickSearch}
-        onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
+        // onCleanSuggestions={this.handlePackagesClearRequested}
+        // onClick={this.handleClickSearch}
+        // onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
+        options={suggestions}
         placeholder={CONSTANTS.PLACEHOLDER_TEXT}
-        startAdornment={this.getAdorment()}
-        suggestions={suggestions}
-        suggestionsError={error}
-        suggestionsLoaded={loaded}
-        suggestionsLoading={loading}
-        value={search}
+        // startAdornment={this.getAdorment()}
+        // suggestionsError={error}
+        // suggestionsLoaded={loaded}
+        // suggestionsLoading={loading}
+        // value={search}
       />
     );
   }
@@ -92,7 +89,7 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
   /**
    * onChange method for the input element.
    */
-  private handleSearch: handleSearch = (event, { newValue, method }) => {
+  private handleSearch: handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
     // stops event bubbling
     event.stopPropagation();
     if (method === 'type') {

src/muiComponents/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,93 @@
+import React, { FC, ChangeEvent, useState } from 'react';
+import { default as MuiAutoComplete, AutocompleteProps } from '@material-ui/lab/Autocomplete';
+import styled from 'react-emotion';
+
+import CircularProgress from '../CircularProgress';
+import TextField from '../TextField';
+
+const StyledAutoComplete = styled(MuiAutoComplete)({
+  width: '100%',
+});
+
+interface Props extends Pick<AutocompleteProps, 'options'> {
+  placeholder?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+// function sleep(delay = 0) {
+//   return new Promise(resolve => {
+//     setTimeout(resolve, delay);
+//   });
+// }
+
+/* eslint-disable react/jsx-no-bind */
+const AutoComplete: FC<Props> = ({ placeholder, options = [], onChange }) => {
+  const [open, setOpen] = useState(false);
+  const isLoading = open && options.length === 0;
+
+  console.log('options', options);
+
+  //   useEffect(() => {
+  //     let active = true;
+
+  //     if (!loading) {
+  //       return undefined;
+  //     }
+
+  //     (async () => {
+  //       const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');
+  //       await sleep(1e3); // For demo purposes.
+  //       const countries = await response.json();
+
+  //       if (active) {
+  //         setOptions(Object.keys(countries).map(key => countries[key].item[0]));
+  //       }
+  //     })();
+
+  //     return () => {
+  //       active = false;
+  //     };
+  //   }, [loading]);
+
+  // useEffect(() => {
+  //   if (!open) {
+  //     setOptions([]);
+  //   }
+  // }, [open]);
+
+  return (
+    <StyledAutoComplete
+      autoHighlight={true}
+      // open={open}
+      // onOpen={() => {
+      //   setOpen(true);
+      // }}
+      // onClose={() => {
+      //   setOpen(false);
+      // }}
+      // getOptionLabel={option => option.name}
+      options={options}
+      loading={isLoading}
+      renderInput={params => (
+        <TextField
+          {...params}
+          onChange={onChange}
+          label={placeholder}
+          fullWidth={true}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+            type: 'search',
+          }}
+        />
+      )}
+    />
+  );
+};
+
+export default AutoComplete;

src/muiComponents/AutoComplete/index.ts

@@ -0,0 +1 @@
+export { default } from './AutoComplete';