Improve in-memory filtering

package.json

@@ -62,7 +62,6 @@
     "react-sortable-tree": "^2.6.2",
     "react-svg": "^2.2.11",
     "slugify": "^1.3.4",
-    "string-similarity": "^1.2.2",
     "typescript": "^3.5.3",
     "url-join": "^4.0.1",
     "use-react-router": "^1.0.7"
@@ -99,7 +98,6 @@
     "@types/react-test-renderer": "^16.8.2",
     "@types/storybook__addon-storyshots": "^3.4.9",
     "@types/storybook__react": "^4.0.2",
-    "@types/string-similarity": "^1.2.1",
     "@types/url-join": "^0.8.3",
     "@types/webappsec-credential-management": "^0.5.1",
     "babel-core": "^7.0.0-bridge.0",

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -9,8 +9,8 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
 import Downshift, { ControllerStateAndHelpers } from "downshift";
+import { filter } from "fuzzaldrin";
 import React from "react";
-import { compareTwoStrings } from "string-similarity";
 
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Debounce, { DebounceProps } from "@saleor/components/Debounce";
@@ -210,22 +210,12 @@ const MultiAutocompleteSelectField: React.FC<
     );
   }
 
-  const sortedChoices = choices.sort((a, b) => {
-    const ratingA = compareTwoStrings(query, a.label);
-    const ratingB = compareTwoStrings(query, b.label);
-    if (ratingA > ratingB) {
-      return -1;
-    }
-    if (ratingA < ratingB) {
-      return 1;
-    }
-    return 0;
-  });
-
   return (
     <MultiAutocompleteSelectFieldComponent
       fetchChoices={q => setQuery(q || "")}
-      choices={sortedChoices}
+      choices={filter(choices, query, {
+        key: "label"
+      })}
       {...props}
     />
   );

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -3,8 +3,8 @@ import { InputProps } from "@material-ui/core/Input";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Downshift from "downshift";
+import { filter } from "fuzzaldrin";
 import React from "react";
-import { compareTwoStrings } from "string-similarity";
 import SingleAutocompleteSelectFieldContent, {
   SingleAutocompleteChoiceType
 } from "./SingleAutocompleteSelectFieldContent";
@@ -174,41 +174,32 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
   }
 );
 
-export class SingleAutocompleteSelectField extends React.Component<
-  Omit<SingleAutocompleteSelectFieldProps, "classes">,
-  SingleAutocompleteSelectFieldState
-> {
-  state = { choices: this.props.choices };
-
-  handleInputChange = (value: string) =>
-    this.setState((_, props) => ({
-      choices: props.choices
-        .sort((a, b) => {
-          const ratingA = compareTwoStrings(value || "", a.label);
-          const ratingB = compareTwoStrings(value || "", b.label);
-          if (ratingA > ratingB) {
-            return -1;
-          }
-          if (ratingA < ratingB) {
-            return 1;
-          }
-          return 0;
-        })
-        .slice(0, 5)
-    }));
-
-  render() {
-    if (!!this.props.fetchChoices) {
-      return <SingleAutocompleteSelectFieldComponent {...this.props} />;
-    }
+const SingleAutocompleteSelectField: React.FC<
+  SingleAutocompleteSelectFieldProps
+> = ({ choices, fetchChoices, ...props }) => {
+  const [query, setQuery] = React.useState("");
+  if (fetchChoices) {
     return (
-      <SingleAutocompleteSelectFieldComponent
-        {...this.props}
-        choices={this.state.choices}
-        fetchChoices={this.handleInputChange}
-      />
+      <DebounceAutocomplete debounceFn={fetchChoices}>
+        {debounceFn => (
+          <SingleAutocompleteSelectFieldComponent
+            choices={choices}
+            {...props}
+            fetchChoices={debounceFn}
+          />
+        )}
+      </DebounceAutocomplete>
     );
   }
-}
 
+  return (
+    <SingleAutocompleteSelectFieldComponent
+      fetchChoices={q => setQuery(q || "")}
+      choices={filter(choices, query, {
+        key: "label"
+      })}
+      {...props}
+    />
+  );
+};
 export default SingleAutocompleteSelectField;