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

@@ -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}

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

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(
     () => {