From a95a3021e437c0b29fbb121d63e3f7b82ca175d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= <flesz3@o2.pl>
Date: Thu, 5 May 2022 10:36:32 +0200
Subject: [PATCH] Autocomplete in channel selection (#2020)

* Add autocomplete to channel picker

* Update macaw

* Update macaw

* Use filter from fuzzaldrin
---
 package-lock.json                             |  6 +--
 package.json                                  |  2 +-
 .../ChannelPickerDialog.tsx                   | 54 ++++++++++---------
 src/hooks/useChoiceSearch.ts                  | 16 ++++++
 src/orders/views/OrderList/OrderList.tsx      |  2 +-
 5 files changed, 51 insertions(+), 29 deletions(-)
 create mode 100644 src/hooks/useChoiceSearch.ts

diff --git a/package-lock.json b/package-lock.json
index 734afce70..f393bea06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5224,9 +5224,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.5.0.tgz",
-      "integrity": "sha512-1dTgbmBHplWpqqyX7kZZSVMz2FESNeUerD5AXPfRYpE6Cr0L+oEfY4NFZlhe2dTY8hPeLz+hPv36JLlD/sGWyA==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.5.2.tgz",
+      "integrity": "sha512-fAbIGLnMo9BiVuR6W6MMZUprIutS+f4i1oEG8PX7+WM4rMZbvD204wxvHyx5dXSrU1DhLzDR4MK7dEGK/jykHA==",
       "requires": {
         "clsx": "^1.1.1",
         "downshift": "^6.1.7",
diff --git a/package.json b/package.json
index 393bd1c6b..504dd3638 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "^0.5.0",
+    "@saleor/macaw-ui": "^0.5.2",
     "@saleor/sdk": "^0.4.4",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
diff --git a/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx b/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx
index 54d205ca3..9e46feac2 100644
--- a/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx
+++ b/src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx
@@ -1,17 +1,14 @@
+import { MenuItem } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
-import {
-  Choices,
-  SingleSelectField
-} from "@saleor/components/SingleSelectField";
+import { Choice } from "@saleor/components/SingleSelectField";
+import useChoiceSearch from "@saleor/hooks/useChoiceSearch";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { Autocomplete, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { useStyles } from "../styles";
-
 export interface ChannelPickerDialogProps {
-  channelsChoices: Choices;
+  channelsChoices: Array<Choice<string, string>>;
   confirmButtonState: ConfirmButtonTransitionState;
   defaultChoice: string;
   open: boolean;
@@ -27,11 +24,11 @@ const ChannelPickerDialog: React.FC<ChannelPickerDialogProps> = ({
   onClose,
   onConfirm
 }) => {
-  const classes = useStyles({});
   const intl = useIntl();
   const [choice, setChoice] = useStateFromProps(
     defaultChoice || (!!channelsChoices.length ? channelsChoices[0].value : "")
   );
+  const { result, search } = useChoiceSearch(channelsChoices);
 
   return (
     <ActionDialog
@@ -45,21 +42,30 @@ const ChannelPickerDialog: React.FC<ChannelPickerDialogProps> = ({
         description: "dialog header"
       })}
     >
-      <div>
-        <div className={classes.select}>
-          <SingleSelectField
-            choices={channelsChoices}
-            name="channels"
-            label={intl.formatMessage({
-              id: "nKwgxY",
-              defaultMessage: "Channel name",
-              description: "select label"
-            })}
-            value={choice}
-            onChange={e => setChoice(e.target.value)}
-          />
-        </div>
-      </div>
+      <Autocomplete
+        choices={result}
+        fullWidth
+        label={intl.formatMessage({
+          defaultMessage: "Channel name",
+          id: "nKwgxY",
+          description: "select label"
+        })}
+        value={choice}
+        onChange={e => setChoice(e.target.value)}
+        onInputChange={search}
+      >
+        {({ getItemProps, highlightedIndex }) =>
+          result.map((choice, choiceIndex) => (
+            <MenuItem
+              selected={highlightedIndex === choiceIndex}
+              key={choice.value}
+              {...getItemProps({ item: choice, index: choiceIndex })}
+            >
+              {choice.label}
+            </MenuItem>
+          ))
+        }
+      </Autocomplete>
     </ActionDialog>
   );
 };
diff --git a/src/hooks/useChoiceSearch.ts b/src/hooks/useChoiceSearch.ts
new file mode 100644
index 000000000..10e3e61e3
--- /dev/null
+++ b/src/hooks/useChoiceSearch.ts
@@ -0,0 +1,16 @@
+import { Choice } from "@saleor/components/SingleSelectField";
+import { filter } from "fuzzaldrin";
+import { useMemo, useState } from "react";
+
+function useChoiceSearch(choices: Array<Choice<string, string>>) {
+  const [query, setQuery] = useState("");
+
+  const sortedChoices = useMemo(
+    () => filter(choices, query, { key: "label" }) || [],
+    [choices, query]
+  );
+
+  return { search: setQuery, result: sortedChoices };
+}
+
+export default useChoiceSearch;
diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx
index 6a475b51a..13344bd37 100644
--- a/src/orders/views/OrderList/OrderList.tsx
+++ b/src/orders/views/OrderList/OrderList.tsx
@@ -190,7 +190,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
       />
       {!noChannel && (
         <ChannelPickerDialog
-          channelsChoices={mapNodeToChoice(availableChannels)}
+          channelsChoices={channelOpts}
           confirmButtonState="success"
           defaultChoice={channel.id}
           open={params.action === "create-order"}