diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js index 71ca9cf..6821d1e 100644 --- a/src/app/WardrobePage/support/ItemSupportDrawer.js +++ b/src/app/WardrobePage/support/ItemSupportDrawer.js @@ -20,6 +20,7 @@ import { Select, Spinner, Stack, + Text, useBreakpointValue, useColorModeValue, useDisclosure, @@ -78,6 +79,10 @@ function ItemSupportDrawer({ item, isOpen, onClose }) { Item ID: {item.id} + Restricted zones: + + + @@ -90,6 +95,52 @@ function ItemSupportDrawer({ item, isOpen, onClose }) { ); } +function ItemSupportRestrictedZones({ item }) { + const { speciesId, colorId } = React.useContext(OutfitStateContext); + + // NOTE: It would be a better reflection of the data to just query restricted + // zones right off the item... but we already have them in cache from + // the appearance, so query them that way to be instant in practice! + const { loading, error, data } = useQuery( + gql` + query ItemSupportRestrictedZones( + $itemId: ID! + $speciesId: ID! + $colorId: ID! + ) { + item(id: $itemId) { + id + appearanceOn(speciesId: $speciesId, colorId: $colorId) { + restrictedZones { + id + label + } + } + } + } + `, + { variables: { itemId: item.id, speciesId, colorId } } + ); + + if (loading) { + return ; + } + + if (error) { + return {error.message}; + } + + const restrictedZones = data?.item?.appearanceOn?.restrictedZones || []; + if (restrictedZones.length === 0) { + return "None"; + } + + return restrictedZones + .map((z) => `${z.label} (${z.id})`) + .sort() + .join(", "); +} + function ItemSupportFields({ item }) { const { loading, error, data } = useQuery( gql` diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js index 7160af5..9601b4f 100644 --- a/src/app/apolloClient.js +++ b/src/app/apolloClient.js @@ -16,6 +16,11 @@ const typePolicies = { toReference({ __typename: "Item", id }, true) ); }, + + // Similar for a single item lookup! + item: (_, { args, toReference }) => { + return toReference({ __typename: "Item", id: args.id }, true); + }, }, },