From 821d05c14180c6a7c24a5cb5c0ecf53b2dbe9902 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 1 Sep 2020 19:53:38 -0700
Subject: [PATCH] refactor to use new query object in SearchPanel

not actually including zone in the GraphQL query yet, but it's available in the right location now!
---
 src/app/WardrobePage/ItemsAndSearchPanels.js |  2 +-
 src/app/WardrobePage/SearchPanel.js          |  9 ++++++---
 src/app/util.js                              | 11 ++++++++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/WardrobePage/ItemsAndSearchPanels.js b/src/app/WardrobePage/ItemsAndSearchPanels.js
index d869a00..00dedd8 100644
--- a/src/app/WardrobePage/ItemsAndSearchPanels.js
+++ b/src/app/WardrobePage/ItemsAndSearchPanels.js
@@ -51,7 +51,7 @@ function ItemsAndSearchPanels({ loading, outfitState, dispatchToOutfit }) {
         >
           <Box px="4" py="2">
             <SearchPanel
-              query={searchQuery.value}
+              query={searchQuery}
               outfitState={outfitState}
               dispatchToOutfit={dispatchToOutfit}
               scrollContainerRef={scrollContainerRef}
diff --git a/src/app/WardrobePage/SearchPanel.js b/src/app/WardrobePage/SearchPanel.js
index a16d0f5..942e725 100644
--- a/src/app/WardrobePage/SearchPanel.js
+++ b/src/app/WardrobePage/SearchPanel.js
@@ -193,7 +193,10 @@ function useSearchResults(query, outfitState) {
 
   // We debounce the search query, so that we don't resend a new query whenever
   // the user types anything.
-  const debouncedQuery = useDebounce(query, 300, { waitForFirstPause: true });
+  const debouncedQuery = useDebounce(query, 300, {
+    waitForFirstPause: true,
+    initialValue: { value: "", filterToZoneLabel: null },
+  });
 
   // When the query changes, we should update our impression of whether we've
   // reached the end!
@@ -254,8 +257,8 @@ function useSearchResults(query, outfitState) {
       ${itemAppearanceFragment}
     `,
     {
-      variables: { query: debouncedQuery, speciesId, colorId, offset: 0 },
-      skip: debouncedQuery === null,
+      variables: { query: debouncedQuery.value, speciesId, colorId, offset: 0 },
+      skip: !debouncedQuery.value && !debouncedQuery.filterToZoneLabel,
       notifyOnNetworkStatusChange: true,
       onCompleted: (d) => {
         // This is called each time the query completes, including on
diff --git a/src/app/util.js b/src/app/util.js
index b587051..8835c51 100644
--- a/src/app/util.js
+++ b/src/app/util.js
@@ -78,10 +78,15 @@ export function safeImageUrl(url) {
  *
  * Adapted from https://usehooks.com/useDebounce/
  */
-export function useDebounce(value, delay, { waitForFirstPause = false } = {}) {
+export function useDebounce(
+  value,
+  delay,
+  { waitForFirstPause = false, initialValue = null } = {}
+) {
   // State and setters for debounced value
-  const initialValue = waitForFirstPause ? null : value;
-  const [debouncedValue, setDebouncedValue] = React.useState(initialValue);
+  const [debouncedValue, setDebouncedValue] = React.useState(
+    waitForFirstPause ? initialValue : value
+  );
 
   React.useEffect(
     () => {