Remove the GQL-based useSearchResults, everyone is on it now!

The main *intended* user-facing effect of this is that "Items you own"
and "Items you want" filters should work in wardrobe-2020 now!

It is also possible that I messed something up and that this might
break unrelated searches somehow! We'll find out!! 😅

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

@@ -1,10 +1,6 @@
-import React from "react";
+import { useDebounce } from "../util";
-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";
 
 /**
@@ -25,154 +21,21 @@ export function useSearchResults(
     initialValue: emptySearchQuery,
   });
 
-  // NOTE: This query should always load ~instantly, from the client cache.
+  const { isLoading, error, data } = useItemSearch(
-  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}
-    `,
-    {
-      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 {
-    isLoading: loadingQuery,
-    error: errorQuery,
-    data: dataQuery,
-  } = useItemSearch(
     {
       filters: buildSearchFilters(debouncedQuery, outfitState),
       withAppearancesFor: { speciesId, colorId, altStyleId },
-      page: currentPageIndex + 1,
+      page: currentPageNumber,
       perPage: SEARCH_PER_PAGE,
     },
     {
-      enabled:
+      enabled: !skip && !searchQueryIsEmpty(debouncedQuery),
-        !skip && queryMode === "new" && !searchQueryIsEmpty(debouncedQuery),
     },
   );
 
-  const loading =
+  const loading = debouncedQuery !== query || isLoading;
-    debouncedQuery !== query ||
+  const items = data?.items ?? [];
-    (queryMode === "gql" ? loadingGQL : loadingQuery);
+  const numTotalPages = data?.numTotalPages ?? 0;
-  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 };
 }