import React from "react";
import gql from "graphql-tag";
import { Box, Text } from "@chakra-ui/core";
import { useQuery } from "@apollo/react-hooks";
import { Delay, Heading1, useDebounce } from "./util";
import ItemList, { ItemListSkeleton } from "./ItemList";
import { itemAppearanceFragment } from "./OutfitPreview";
function SearchPanel({ query, outfitState, dispatchToOutfit }) {
return (
Searching for "{query}"
);
}
function SearchResults({ query, outfitState, dispatchToOutfit }) {
const { wornItemIds, speciesId, colorId } = outfitState;
const debouncedQuery = useDebounce(query, 300, { waitForFirstPause: true });
const { loading, error, data, variables } = useQuery(
gql`
query($query: String!, $speciesId: ID!, $colorId: ID!) {
itemSearch(query: $query) {
# TODO: De-dupe this from useOutfitState?
id
name
thumbnailUrl
appearanceOn(speciesId: $speciesId, colorId: $colorId) {
# This enables us to quickly show the item when the user clicks it!
...AppearanceForOutfitPreview
# This is used to group items by zone, and to detect conflicts when
# wearing a new item.
layers {
zone {
id
label
}
}
}
}
}
${itemAppearanceFragment}
`,
{
variables: { query: debouncedQuery, speciesId, colorId },
skip: debouncedQuery === null,
}
);
if (loading || variables.query !== query) {
return (
);
}
if (error) {
return (
We hit an error trying to load your search results{" "}
😓
{" "}
Try again?
);
}
const items = data.itemSearch;
if (items.length === 0) {
return (
We couldn't find any matching items{" "}
🤔
{" "}
Try again?
);
}
return (
);
}
export default SearchPanel;