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!! 😅
This commit is contained in:
parent
ece7a02902
commit
4f069a5742
1 changed files with 7 additions and 144 deletions
|
|
@ -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 { useItemSearch } from "../loaders/items";
|
||||||
import { emptySearchQuery, searchQueryIsEmpty } from "./SearchToolbar";
|
import { emptySearchQuery, searchQueryIsEmpty } from "./SearchToolbar";
|
||||||
import { itemAppearanceFragment } from "../components/useOutfitAppearance";
|
|
||||||
import { SEARCH_PER_PAGE } from "./SearchPanel";
|
import { SEARCH_PER_PAGE } from "./SearchPanel";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -25,154 +21,21 @@ export function useSearchResults(
|
||||||
initialValue: emptySearchQuery,
|
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),
|
filters: buildSearchFilters(debouncedQuery, outfitState),
|
||||||
withAppearancesFor: { speciesId, colorId, altStyleId },
|
withAppearancesFor: { speciesId, colorId, altStyleId },
|
||||||
page: currentPageIndex + 1,
|
page: currentPageNumber,
|
||||||
perPage: SEARCH_PER_PAGE,
|
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 };
|
return { loading, error, items, numTotalPages };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue