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

import { useDebounce } from "../util";
import { useItemSearch } from "../loaders/items";
import { emptySearchQuery, searchQueryIsEmpty } from "./SearchToolbar";
import { SEARCH_PER_PAGE } from "./SearchPanel";

/**
 * useSearchResults manages the actual querying and state management of search!
 */
export function useSearchResults(
	query,
	outfitState,
	currentPageNumber,
	{ skip = false } = {},
) {
	const { speciesId, colorId, altStyleId } = 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,
		initialValue: emptySearchQuery,
	});

	const { isLoading, error, data } = useItemSearch(
		{
			filters: buildSearchFilters(debouncedQuery, outfitState),
			withAppearancesFor: { speciesId, colorId, altStyleId },
			page: currentPageNumber,
			perPage: SEARCH_PER_PAGE,
		},
		{
			enabled: !skip && !searchQueryIsEmpty(debouncedQuery),
		},
	);

	const loading = debouncedQuery !== query || isLoading;
	const items = data?.items ?? [];
	const numTotalPages = data?.numTotalPages ?? 0;

	return { loading, error, items, numTotalPages };
}

function buildSearchFilters(query, { speciesId, colorId, altStyleId }) {
	const filters = [];

	// TODO: We're missing quote support, like `background "Dyeworks White"`.
	//       It might be good to, rather than parse this out here and send it as
	//       filters, include a text-based part of the query as well, and have
	//       the server merge them? That'd support text-based `is:nc` etc too.
	const words = query.value.split(/\s+/);
	for (const word of words) {
		filters.push({ key: "name", value: word });
	}

	if (query.filterToItemKind === "NC") {
		filters.push({ key: "is_nc" });
	} else if (query.filterToItemKind === "PB") {
		filters.push({ key: "is_pb" });
	} else if (query.filterToItemKind === "NP") {
		filters.push({ key: "is_np" });
	}

	if (query.filterToZoneLabel != null) {
		filters.push({
			key: "occupied_zone_set_name",
			value: query.filterToZoneLabel,
		});
	}

	if (query.filterToCurrentUserOwnsOrWants === "OWNS") {
		filters.push({ key: "user_closet_hanger_ownership", value: "true" });
	} else if (query.filterToCurrentUserOwnsOrWants === "WANTS") {
		filters.push({ key: "user_closet_hanger_ownership", value: "false" });
	}

	filters.push({
		key: "fits",
		value: { speciesId, colorId, altStyleId },
	});

	return filters;
}