app/javascript/wardrobe-2020/WardrobePage/useSearchResults.js

@@ -1,6 +1,10 @@
-import { useDebounce } from "../util";
+import React from "react";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/client";
+import { useDebounce, useLocalStorage } from "../util";
 import { useItemSearch } from "../loaders/items";
 import { emptySearchQuery, searchQueryIsEmpty } from "./SearchToolbar";
+import { itemAppearanceFragment } from "../components/useOutfitAppearance";
 import { SEARCH_PER_PAGE } from "./SearchPanel";
 
 /**
@@ -21,21 +25,154 @@ export function useSearchResults(
     initialValue: emptySearchQuery,
   });
 
-  const { isLoading, error, data } = useItemSearch(
+  // NOTE: This query should always load ~instantly, from the client cache.
+  const { data: zoneData } = useQuery(gql`
+    query SearchPanelZones {
+      allZones {
+        id
+        label
+      }
+    }
+  `);
+  const allZones = zoneData?.allZones || [];
+  const filterToZones = query.filterToZoneLabel
+    ? allZones.filter((z) => z.label === query.filterToZoneLabel)
+    : [];
+  const filterToZoneIds = filterToZones.map((z) => z.id);
+
+  const currentPageIndex = currentPageNumber - 1;
+  const offset = currentPageIndex * SEARCH_PER_PAGE;
+
+  // Until the new item search is ready, we can toggle between them! Use
+  // `setItemSearchQueryMode` in the JS console to choose "gql" or "new".
+  const [queryMode, setQueryMode] = useLocalStorage(
+    "DTIItemSearchQueryMode",
+    "gql",
+  );
+  React.useEffect(() => {
+    window.setItemSearchQueryMode = setQueryMode;
+  }, [setQueryMode]);
+
+  const {
+    loading: loadingGQL,
+    error: errorGQL,
+    data: dataGQL,
+  } = useQuery(
+    gql`
+      query SearchPanel(
+        $query: String!
+        $fitsPet: FitsPetSearchFilter
+        $itemKind: ItemKindSearchFilter
+        $currentUserOwnsOrWants: OwnsOrWants
+        $zoneIds: [ID!]!
+        $speciesId: ID!
+        $colorId: ID!
+        $altStyleId: ID
+        $offset: Int!
+        $perPage: Int!
+      ) {
+        itemSearch: itemSearchV2(
+          query: $query
+          fitsPet: $fitsPet
+          itemKind: $itemKind
+          currentUserOwnsOrWants: $currentUserOwnsOrWants
+          zoneIds: $zoneIds
+        ) {
+          id
+          numTotalItems
+          items(offset: $offset, limit: $perPage) {
+            # TODO: De-dupe this from useOutfitState?
+            id
+            name
+            thumbnailUrl
+            isNc
+            isPb
+            currentUserOwnsThis
+            currentUserWantsThis
+
+            appearanceOn(
+              speciesId: $speciesId
+              colorId: $colorId
+              altStyleId: $altStyleId
+            ) {
+              # This enables us to quickly show the item when the user clicks it!
+              ...ItemAppearanceForOutfitPreview
+
+              # This is used to group items by zone, and to detect conflicts when
+              # wearing a new item.
+              layers {
+                zone {
+                  id
+                  label
+                }
+              }
+              restrictedZones {
+                id
+                label
+                isCommonlyUsedByItems
+              }
+            }
+          }
+        }
+      }
+      ${itemAppearanceFragment}
+    `,
     {
-      filters: buildSearchFilters(debouncedQuery, outfitState),
-      withAppearancesFor: { speciesId, colorId, altStyleId },
-      page: currentPageNumber,
-      perPage: SEARCH_PER_PAGE,
-    },
-    {
-      enabled: !skip && !searchQueryIsEmpty(debouncedQuery),
+      variables: {
+        query: debouncedQuery.value,
+        fitsPet: { speciesId, colorId, altStyleId },
+        itemKind: debouncedQuery.filterToItemKind,
+        currentUserOwnsOrWants: debouncedQuery.filterToCurrentUserOwnsOrWants,
+        zoneIds: filterToZoneIds,
+        speciesId,
+        colorId,
+        altStyleId,
+        offset,
+        perPage: SEARCH_PER_PAGE,
+      },
+      context: { sendAuth: true },
+      skip:
+        skip ||
+        queryMode !== "gql" ||
+        (!debouncedQuery.value &&
+          !debouncedQuery.filterToItemKind &&
+          !debouncedQuery.filterToZoneLabel &&
+          !debouncedQuery.filterToCurrentUserOwnsOrWants),
+      onError: (e) => {
+        console.error("Error loading search results", e);
+      },
+      // Return `numTotalItems` from the GQL cache while waiting for next page!
+      returnPartialData: true,
     },
   );
 
-  const loading = debouncedQuery !== query || isLoading;
-  const items = data?.items ?? [];
-  const numTotalPages = data?.numTotalPages ?? 0;
+  const {
+    isLoading: loadingQuery,
+    error: errorQuery,
+    data: dataQuery,
+  } = useItemSearch(
+    {
+      filters: buildSearchFilters(debouncedQuery, outfitState),
+      withAppearancesFor: { speciesId, colorId, altStyleId },
+      page: currentPageIndex + 1,
+      perPage: SEARCH_PER_PAGE,
+    },
+    {
+      enabled:
+        !skip && queryMode === "new" && !searchQueryIsEmpty(debouncedQuery),
+    },
+  );
+
+  const loading =
+    debouncedQuery !== query ||
+    (queryMode === "gql" ? loadingGQL : loadingQuery);
+  const error = queryMode === "gql" ? errorGQL : errorQuery;
+  const items =
+    (queryMode === "gql" ? dataGQL?.itemSearch?.items : dataQuery?.items) ?? [];
+  const numTotalPages =
+    (queryMode === "gql"
+      ? Math.ceil((dataGQL?.itemSearch?.numTotalItems ?? 0) / SEARCH_PER_PAGE)
+      : dataQuery?.numTotalPages) ?? 0;
 
   return { loading, error, items, numTotalPages };
 }

app/javascript/wardrobe-2020/loaders/items.js

@@ -98,6 +98,7 @@ async function loadItemSearch(searchOptions) {
 
 	return result;
 }
+window.loadItemSearch = loadItemSearch;
 
 /**
  * writeItemToApolloCache is one last important bridge between our loaders and

app/views/items/show.html.haml

@@ -6,13 +6,6 @@
     current_user_lists: @current_user_lists,
     current_user_quantities: @current_user_quantities}
 
-- if @item.name.include? "Baby Body Paint"
-  %p.warning
-    The Baby Body Paint items seem to have new zone restriction rules that our
-    system doesn't support yet, whuh oh! This might require major changes to
-    how we handle zones. Until then, these items will be <em>very</em> buggy,
-    sorry!
-
 #outfit-preview-root{'data-item-id': @item.id}
 
 - unless @contributors_with_counts.empty?