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!

app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js

@@ -77,20 +77,22 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
                 itemCount={outfitState.allItemIds.length}
               />
             ) : (
-              <TransitionGroup component={null}>
+              <>
-                {zonesAndItems.map(({ zoneId, zoneLabel, items }) => (
+                <TransitionGroup component={null}>
-                  <CSSTransition
+                  {zonesAndItems.map(({ zoneId, zoneLabel, items }) => (
-                    key={zoneId}
+                    <CSSTransition
-                    {...fadeOutAndRollUpTransition(css)}
+                      key={zoneId}
-                  >
+                      {...fadeOutAndRollUpTransition(css)}
-                    <ItemZoneGroup
+                    >
-                      zoneLabel={zoneLabel}
+                      <ItemZoneGroup
-                      items={items}
+                        zoneLabel={zoneLabel}
-                      outfitState={outfitState}
+                        items={items}
-                      dispatchToOutfit={dispatchToOutfit}
+                        outfitState={outfitState}
-                    />
+                        dispatchToOutfit={dispatchToOutfit}
-                  </CSSTransition>
+                      />
-                ))}
+                    </CSSTransition>
+                  ))}
+                </TransitionGroup>
                 {incompatibleItems.length > 0 && (
                   <ItemZoneGroup
                     zoneLabel="Incompatible"
@@ -109,7 +111,7 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
                     isDisabled
                   />
                 )}
-              </TransitionGroup>
+              </>
             )}
           </Flex>
         </Box>

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);

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,
       },

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
+        const { speciesId, colorId, altStyleId } = args;
-        // 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;
         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 }),

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,