impress/app/javascript/wardrobe-2020/WardrobePage/WardrobePreviewAndControls.js

import React from "react";
import { Box, Center, DarkMode } from "@chakra-ui/react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import * as Sentry from "@sentry/react";

import OutfitThumbnail from "../components/OutfitThumbnail";
import { useOutfitPreview } from "../components/OutfitPreview";
import { loadable, MajorErrorMessage, TestErrorSender } from "../util";

const OutfitControls = loadable(() => import("./OutfitControls"));

function WardrobePreviewAndControls({
  isLoading,
  outfitState,
  dispatchToOutfit,
}) {
  // Whether the current outfit preview has animations. Determines whether we
  // show the play/pause button.
  const [hasAnimations, setHasAnimations] = React.useState(false);

  const { appearance, preview } = useOutfitPreview({
    isLoading: isLoading,
    speciesId: outfitState.speciesId,
    colorId: outfitState.colorId,
    pose: outfitState.pose,
    altStyleId: outfitState.altStyleId,
    appearanceId: outfitState.appearanceId,
    wornItemIds: outfitState.wornItemIds,
    onChangeHasAnimations: setHasAnimations,
    placeholder: <OutfitThumbnailIfCached outfitId={outfitState.id} />,
    "data-test-id": "wardrobe-outfit-preview",
  });

  return (
    <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
      <TestErrorSender />
      <Center position="absolute" top="0" bottom="0" left="0" right="0">
        <DarkMode>{preview}</DarkMode>
      </Center>
      <Box position="absolute" top="0" bottom="0" left="0" right="0">
        <OutfitControls
          outfitState={outfitState}
          dispatchToOutfit={dispatchToOutfit}
          showAnimationControls={hasAnimations}
          appearance={appearance}
        />
      </Box>
    </Sentry.ErrorBoundary>
  );
}

/**
 * OutfitThumbnailIfCached will render an OutfitThumbnail as a placeholder for
 * the outfit preview... but only if we already have the data to generate the
 * thumbnail stored in our local Apollo GraphQL cache.
 *
 * This means that, when you come from the Your Outfits page, we can show the
 * outfit thumbnail instantly while everything else loads. But on direct
 * navigation, this does nothing, and we just wait for the preview to load in
 * like usual!
 */
function OutfitThumbnailIfCached({ outfitId }) {
  const { data } = useQuery(
    gql`
      query OutfitThumbnailIfCached($outfitId: ID!) {
        outfit(id: $outfitId) {
          id
          updatedAt
        }
      }
    `,
    {
      variables: {
        outfitId,
      },
      skip: outfitId == null,
      fetchPolicy: "cache-only",
      onError: (e) => console.error(e),
    },
  );

  if (!data?.outfit) {
    return null;
  }

  return (
    <OutfitThumbnail
      outfitId={data.outfit.id}
      updatedAt={data.outfit.updatedAt}
      alt=""
      objectFit="contain"
      width="100%"
      height="100%"
      filter="blur(2px)"
    />
  );
}

export default WardrobePreviewAndControls;