WIP: search suggestions

package.json

@@ -26,6 +26,7 @@
     "mysql2": "^2.1.0",
     "node-fetch": "^2.6.0",
     "react": "^16.13.1",
+    "react-autosuggest": "^10.0.2",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",

src/app/WardrobePage/SearchToolbar.js

@@ -8,6 +8,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/core";
 import { CloseIcon, SearchIcon } from "@chakra-ui/icons";
+import Autosuggest from "react-autosuggest";
 
 /**
  * SearchToolbar is rendered above both the ItemsPanel and the SearchPanel,
@@ -24,6 +25,8 @@ function SearchToolbar({
   firstSearchResultRef,
   onChange,
 }) {
+  const [suggestions, setSuggestions] = React.useState([]);
+
   const onMoveFocusDownToResults = (e) => {
     if (firstSearchResultRef.current) {
       firstSearchResultRef.current.focus();
@@ -34,42 +37,54 @@ function SearchToolbar({
   const focusBorderColor = useColorModeValue("green.600", "green.400");
 
   return (
-    <InputGroup>
+    <Autosuggest
-      <InputLeftElement>
+      suggestions={suggestions}
-        <SearchIcon color="gray.400" />
+      onSuggestionsFetchRequested={({ value }) => {
-      </InputLeftElement>
+        if (value.includes("hat")) setSuggestions(["Zone: Hat"]);
-      <Input
+        else setSuggestions([]);
-        placeholder="Search for items to add…"
+      }}
-        aria-label="Search for items to add…"
+      onSuggestionsClearRequested={() => {}}
-        focusBorderColor={focusBorderColor}
+      renderSuggestion={() => "Hat"}
-        value={query}
+      renderInputComponent={(props) => (
-        ref={searchQueryRef}
+        <InputGroup>
-        onChange={(e) => onChange(e.target.value)}
+          <InputLeftElement>
-        onKeyDown={(e) => {
+            <SearchIcon color="gray.400" />
+          </InputLeftElement>
+          <Input {...props} />
+          {query && (
+            <InputRightElement>
+              <IconButton
+                icon={<CloseIcon />}
+                color="gray.400"
+                variant="ghost"
+                colorScheme="green"
+                aria-label="Clear search"
+                onClick={() => onChange("")}
+                // Big style hacks here!
+                height="calc(100% - 2px)"
+                marginRight="2px"
+              />
+            </InputRightElement>
+          )}
+        </InputGroup>
+      )}
+      inputProps={{
+        placeholder: "Search for items to add…",
+        "aria-label": "Search for items to add…",
+        focusBorderColor: focusBorderColor,
+        value: query,
+        ref: searchQueryRef,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: (e) => {
           if (e.key === "Escape") {
             onChange("");
             e.target.blur();
           } else if (e.key === "ArrowDown") {
             onMoveFocusDownToResults(e);
           }
-        }}
+        },
-      />
+      }}
-      {query && (
+    />
-        <InputRightElement>
-          <IconButton
-            icon={<CloseIcon />}
-            color="gray.400"
-            variant="ghost"
-            colorScheme="green"
-            aria-label="Clear search"
-            onClick={() => onChange("")}
-            // Big style hacks here!
-            height="calc(100% - 2px)"
-            marginRight="2px"
-          />
-        </InputRightElement>
-      )}
-    </InputGroup>
   );
 }
 

yarn.lock

@@ -5670,7 +5670,7 @@ es6-promise-pool@^2.5.0:
   resolved "https://registry.yarnpkg.com/es6-promise-pool/-/es6-promise-pool-2.5.0.tgz#147c612b36b47f105027f9d2bf54a598a99d9ccb"
   integrity sha1-FHxhKza0fxBQJ/nSv1SlmKmdnMs=
 
-es6-promise@^4.0.3:
+es6-promise@^4.0.3, es6-promise@^4.2.8:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
   integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
@@ -9202,6 +9202,11 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+  integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
+
 object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -10610,7 +10615,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10830,6 +10835,27 @@ react-app-rewired@^2.1.6:
   dependencies:
     semver "^5.6.0"
 
+react-autosuggest@^10.0.2:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/react-autosuggest/-/react-autosuggest-10.0.2.tgz#c45cd73a7307026c932cb6a3e19c2fe35bfb6ec4"
+  integrity sha512-ouI0RJDSgM1FBfK0ZmLC3qUqithIwPVTpnC4JQW4DeId3mH2JnZmkNNDKImhcMrxLbSQRpV/DfTLn0uCs4b27w==
+  dependencies:
+    es6-promise "^4.2.8"
+    prop-types "^15.7.2"
+    react-autowhatever "^10.2.1"
+    react-themeable "^1.1.0"
+    section-iterator "^2.0.0"
+    shallow-equal "^1.2.1"
+
+react-autowhatever@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/react-autowhatever/-/react-autowhatever-10.2.1.tgz#a6d421dc6135173efedc249ab7216e4f5b691bcc"
+  integrity sha512-5gQyoETyBH6GmuW1N1J81CuoAV+Djeg66DEo03xiZOl3WOwJHBP5LisKUvCGOakjrXU4M3hcIvCIqMBYGUmqOA==
+  dependencies:
+    prop-types "^15.5.8"
+    react-themeable "^1.1.0"
+    section-iterator "^2.0.0"
+
 react-clientside-effect@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
@@ -11026,6 +11052,13 @@ react-style-singleton@^2.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
+react-themeable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"
+  integrity sha1-fURm3ZsrX6dQWHJ4JenxUro3mg4=
+  dependencies:
+    object-assign "^3.0.0"
+
 react-transition-group@4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
@@ -11590,6 +11623,11 @@ schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
+section-iterator@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"
+  integrity sha1-v0RNev7rlK1Dw5rS+yYVFifMuio=
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -11729,6 +11767,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"