From fc71f5b5a5720511276f956bf0ac0e4597a6c09a Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Thu, 1 Feb 2024 04:57:20 -0800 Subject: [PATCH] Filter by Alt Style in item search and item appearance API calls I'm not planning to port full Alt Style support over to the 2020 frontend, I really am winding that down, but adding a couple lil API parameters are *by far* the easiest way to get Alt Styles working in the main app because of how it calls the 2020 API. So here we are, just using new parameters for DTI 2020 that I'm gonna deploy to impress-2020 first! --- .../wardrobe-2020/WardrobePage/ItemsPanel.js | 32 ++++++++++--------- .../WardrobePage/useOutfitState.js | 19 ++++++++--- .../WardrobePage/useSearchResults.js | 12 +++++-- app/javascript/wardrobe-2020/apolloClient.js | 19 ++++++++--- .../components/useOutfitAppearance.js | 8 ++++- 5 files changed, 62 insertions(+), 28 deletions(-) diff --git a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js index c5e0b4b2..856561e1 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js +++ b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js @@ -77,20 +77,22 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) { itemCount={outfitState.allItemIds.length} /> ) : ( - - {zonesAndItems.map(({ zoneId, zoneLabel, items }) => ( - - - - ))} + <> + + {zonesAndItems.map(({ zoneId, zoneLabel, items }) => ( + + + + ))} + {incompatibleItems.length > 0 && ( )} - + )} diff --git a/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js b/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js index 0b26bff5..7ad97c8e 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js +++ b/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js @@ -129,6 +129,7 @@ function useOutfitState() { $allItemIds: [ID!]! $speciesId: ID! $colorId: ID! + $altStyleId: ID ) { items(ids: $allItemIds) { # TODO: De-dupe this from SearchPanel? @@ -140,7 +141,11 @@ function useOutfitState() { currentUserOwnsThis currentUserWantsThis - appearanceOn(speciesId: $speciesId, colorId: $colorId) { + appearanceOn( + speciesId: $speciesId + colorId: $colorId + altStyleId: $altStyleId + ) { # This enables us to quickly show the item when the user clicks it! ...ItemAppearanceForOutfitPreview @@ -166,7 +171,7 @@ function useOutfitState() { ${itemAppearanceFragment} `, { - variables: { allItemIds, speciesId, colorId }, + variables: { allItemIds, speciesId, colorId, altStyleId }, context: { sendAuth: true }, // Skip if this outfit has no items, as an optimization; or if we don't // have the species/color ID loaded yet because we're waiting on the @@ -448,7 +453,7 @@ function getOutfitStateFromOutfitData(outfit) { } function findItemConflicts(itemIdToAdd, state, apolloClient) { - const { wornItemIds, speciesId, colorId } = state; + const { wornItemIds, speciesId, colorId, altStyleId } = state; const { items } = apolloClient.readQuery({ query: gql` @@ -456,10 +461,15 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) { $itemIds: [ID!]! $speciesId: ID! $colorId: ID! + $altStyleId: ID ) { items(ids: $itemIds) { id - appearanceOn(speciesId: $speciesId, colorId: $colorId) { + appearanceOn( + speciesId: $speciesId + colorId: $colorId + altStyleId: $altStyleId + ) { layers { zone { id @@ -477,6 +487,7 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) { itemIds: [itemIdToAdd, ...wornItemIds], speciesId, colorId, + altStyleId, }, }); const itemToAdd = items.find((i) => i.id === itemIdToAdd); diff --git a/app/javascript/wardrobe-2020/WardrobePage/useSearchResults.js b/app/javascript/wardrobe-2020/WardrobePage/useSearchResults.js index 10d08f3e..0c52b7cf 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/useSearchResults.js +++ b/app/javascript/wardrobe-2020/WardrobePage/useSearchResults.js @@ -14,7 +14,7 @@ export function useSearchResults( currentPageNumber, { skip = false } = {}, ) { - const { speciesId, colorId } = outfitState; + const { speciesId, colorId, altStyleId } = outfitState; // We debounce the search query, so that we don't resend a new query whenever // the user types anything. @@ -56,6 +56,7 @@ export function useSearchResults( $zoneIds: [ID!]! $speciesId: ID! $colorId: ID! + $altStyleId: ID $offset: Int! $perPage: Int! ) { @@ -78,7 +79,11 @@ export function useSearchResults( currentUserOwnsThis currentUserWantsThis - appearanceOn(speciesId: $speciesId, colorId: $colorId) { + appearanceOn( + speciesId: $speciesId + colorId: $colorId + altStyleId: $altStyleId + ) { # This enables us to quickly show the item when the user clicks it! ...ItemAppearanceForOutfitPreview @@ -104,12 +109,13 @@ export function useSearchResults( { variables: { query: debouncedQuery.value, - fitsPet: { speciesId, colorId }, + fitsPet: { speciesId, colorId, altStyleId }, itemKind: debouncedQuery.filterToItemKind, currentUserOwnsOrWants: debouncedQuery.filterToCurrentUserOwnsOrWants, zoneIds: filterToZoneIds, speciesId, colorId, + altStyleId, offset, perPage: SEARCH_PER_PAGE, }, diff --git a/app/javascript/wardrobe-2020/apolloClient.js b/app/javascript/wardrobe-2020/apolloClient.js index e3116a41..c00d75fe 100644 --- a/app/javascript/wardrobe-2020/apolloClient.js +++ b/app/javascript/wardrobe-2020/apolloClient.js @@ -53,17 +53,26 @@ const typePolicies = { return appearance; } - // Otherwise, we're going to see if this is a standard color, in which - // case we can reuse the standard color appearance if we already have - // it! This helps for fast loading when switching between standard - // colors. - const { speciesId, colorId } = args; + const { speciesId, colorId, altStyleId } = args; console.debug( "[appearanceOn] seeking cached appearance", speciesId, colorId, + altStyleId, readField("id"), ); + + // If this is an alt style, don't try to mess with clever caching. + // (Note that, if it's already in the cache, the first condition will + // catch that! This won't *always* force a fresh load!) + if (altStyleId != null) { + return undefined; + } + + // Otherwise, we're going to see if this is a standard color, in which + // case we can reuse the standard color appearance if we already have + // it! This helps for fast loading when switching between standard + // colors. const speciesStandardBodyId = readField( "standardBodyId", toReference({ __typename: "Species", id: speciesId }), diff --git a/app/javascript/wardrobe-2020/components/useOutfitAppearance.js b/app/javascript/wardrobe-2020/components/useOutfitAppearance.js index ecd27165..e0025121 100644 --- a/app/javascript/wardrobe-2020/components/useOutfitAppearance.js +++ b/app/javascript/wardrobe-2020/components/useOutfitAppearance.js @@ -83,12 +83,17 @@ export default function useOutfitAppearance(outfitState) { query OutfitItemsAppearance( $speciesId: ID! $colorId: ID! + $altStyleId: ID $wornItemIds: [ID!]! ) { items(ids: $wornItemIds) { id name # HACK: This is for HTML5 detection UI in OutfitControls! - appearance: appearanceOn(speciesId: $speciesId, colorId: $colorId) { + appearance: appearanceOn( + speciesId: $speciesId + colorId: $colorId + altStyleId: $altStyleId + ) { ...ItemAppearanceForOutfitPreview } } @@ -99,6 +104,7 @@ export default function useOutfitAppearance(outfitState) { variables: { speciesId, colorId, + altStyleId, wornItemIds, }, skip: speciesId == null || colorId == null || wornItemIds.length === 0,