impress/app/javascript/wardrobe-2020/components/useOutfitAppearance.js

import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";

import getVisibleLayers, {
  itemAppearanceFragmentForGetVisibleLayers,
  petAppearanceFragmentForGetVisibleLayers,
} from "./getVisibleLayers";
import { useAltStyle } from "../loaders/alt-styles";

/**
 * useOutfitAppearance downloads the outfit's appearance data, and returns
 * visibleLayers for rendering.
 */
export default function useOutfitAppearance(outfitState) {
  const { wornItemIds, speciesId, colorId, pose, altStyleId, appearanceId } =
    outfitState;

  // We split this query out from the other one, so that we can HTTP cache it.
  //
  // While Apollo gives us fine-grained caching during the page session, we can
  // only HTTP a full query at a time.
  //
  // This is a minor optimization with respect to keeping the user's cache
  // populated with their favorite species/color combinations. Once we start
  // caching the items by body instead of species/color, this could make color
  // changes really snappy!
  //
  // The larger optimization is that this enables the CDN to edge-cache the
  // most popular species/color combinations, for very fast previews on the
  // HomePage. At time of writing, Vercel isn't actually edge-caching these, I
  // assume because our traffic isn't enough - so let's keep an eye on this!
  const {
    loading: loading1,
    error: error1,
    data: data1,
  } = useQuery(
    appearanceId == null
      ? gql`
          query OutfitPetAppearance(
            $speciesId: ID!
            $colorId: ID!
            $pose: Pose!
          ) {
            petAppearance(
              speciesId: $speciesId
              colorId: $colorId
              pose: $pose
            ) {
              ...PetAppearanceForOutfitPreview
            }
          }
          ${petAppearanceFragment}
        `
      : gql`
          query OutfitPetAppearanceById($appearanceId: ID!) {
            petAppearance: petAppearanceById(id: $appearanceId) {
              ...PetAppearanceForOutfitPreview
            }
          }
          ${petAppearanceFragment}
        `,
    {
      variables: {
        speciesId,
        colorId,
        pose,
        appearanceId,
      },
      skip:
        speciesId == null ||
        colorId == null ||
        (pose == null && appearanceId == null),
    },
  );

  const {
    loading: loading2,
    error: error2,
    data: data2,
  } = useQuery(
    gql`
      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
            altStyleId: $altStyleId
          ) {
            ...ItemAppearanceForOutfitPreview
          }
        }
      }
      ${itemAppearanceFragment}
    `,
    {
      variables: {
        speciesId,
        colorId,
        altStyleId,
        wornItemIds,
      },
      skip: speciesId == null || colorId == null || wornItemIds.length === 0,
    },
  );

  const {
    isLoading: loading3,
    error: error3,
    data: altStyle,
  } = useAltStyle(altStyleId, speciesId);

  const petAppearance = altStyle?.appearance ?? data1?.petAppearance;
  const items = data2?.items;
  const itemAppearances = React.useMemo(
    () => (items || []).map((i) => i.appearance),
    [items],
  );
  const visibleLayers = React.useMemo(
    () => getVisibleLayers(petAppearance, itemAppearances),
    [petAppearance, itemAppearances],
  );

  const bodyId = petAppearance?.bodyId;

  return {
    loading: loading1 || loading2 || loading3,
    error: error1 || error2 || error3,
    petAppearance,
    items: items || [],
    itemAppearances,
    visibleLayers,
    bodyId,
  };
}

export const appearanceLayerFragment = gql`
  fragment AppearanceLayerForOutfitPreview on AppearanceLayer {
    id
    svgUrl
    canvasMovieLibraryUrl
    imageUrl: imageUrlV2(idealSize: SIZE_600)
    bodyId
    knownGlitches # For HTML5 & Known Glitches UI
    zone {
      id
      depth
      label
    }
    swfUrl # For the layer info modal
  }
`;

export const appearanceLayerFragmentForSupport = gql`
  fragment AppearanceLayerForSupport on AppearanceLayer {
    id
    remoteId # HACK: This is for Support tools, but other views don't need it
    swfUrl # HACK: This is for Support tools, but other views don't need it
    zone {
      id
      label # HACK: This is for Support tools, but other views don't need it
    }
  }
`;

export const itemAppearanceFragment = gql`
  fragment ItemAppearanceForOutfitPreview on ItemAppearance {
    id
    layers {
      id
      ...AppearanceLayerForOutfitPreview
      ...AppearanceLayerForSupport # HACK: Most users don't need this!
    }
    ...ItemAppearanceForGetVisibleLayers
  }

  ${appearanceLayerFragment}
  ${appearanceLayerFragmentForSupport}
  ${itemAppearanceFragmentForGetVisibleLayers}
`;

export const petAppearanceFragment = gql`
  fragment PetAppearanceForOutfitPreview on PetAppearance {
    id
    bodyId
    pose # For Known Glitches UI
    isGlitched # For Known Glitches UI
    species {
      id # For Known Glitches UI
    }
    color {
      id # For Known Glitches UI
    }
    layers {
      id
      ...AppearanceLayerForOutfitPreview
    }
    ...PetAppearanceForGetVisibleLayers
  }

  ${appearanceLayerFragment}
  ${petAppearanceFragmentForGetVisibleLayers}
`;