refactor: converting autoComplete to Mui's autocomplete

package.json

@@ -214,5 +214,8 @@
     "type": "opencollective",
     "url": "https://opencollective.com/verdaccio",
     "logo": "https://opencollective.com/verdaccio/logo.txt"
+  },
+  "dependencies": {
+    "@material-ui/lab": "4.0.0-alpha.31"
   }
 }

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';

tools/dev.server.js

@@ -37,7 +37,7 @@ new WebpackDevServer(compiler, {
   proxy: [
     {
       context: ['/-/verdaccio/**', '**/*.tgz'],
-      target: 'http://localhost:8080',
+      target: 'http://localhost:4873',
     },
   ],
 }).listen(4872, 'localhost', function(err) {

yarn.lock

@@ -1393,6 +1393,16 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@4.0.0-alpha.31":
+  version "4.0.0-alpha.31"
+  resolved "https://registry.verdaccio.org/@material-ui%2flab/-/lab-4.0.0-alpha.31.tgz#d566678bd1a9ac969d515145b3b1a2fef4a16a26"
+  integrity sha512-sn9G2llXVMFbgIqkHvoYLMh5Z4Ea8O1qrecxvQEBs1aWs/0X1GOs8jpX+QkSs6MHvMQXijPmXNH5KVabS2aDUQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.5.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+
 "@material-ui/styles@^4.6.0":
   version "4.6.0"
   resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.6.0.tgz#15679fab6dcbe0cc2416f01a22966f3ea26607c5"
@@ -3567,7 +3577,7 @@ clone@^1.0.2:
   resolved "https://registry.verdaccio.org/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clsx@^1.0.2:
+clsx@^1.0.2, clsx@^1.0.4:
   version "1.0.4"
   resolved "https://registry.verdaccio.org/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
   integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==