split and simplify OutfitPreview & OutfitControls

src/app/OutfitControls.js

@@ -0,0 +1,227 @@
+import React from "react";
+import { css } from "emotion";
+import {
+  Box,
+  Flex,
+  IconButton,
+  PseudoBox,
+  Stack,
+  Tooltip,
+  useClipboard,
+} from "@chakra-ui/core";
+
+import OutfitResetModal from "./OutfitResetModal";
+import SpeciesColorPicker from "./SpeciesColorPicker";
+import useOutfitAppearance from "./useOutfitAppearance";
+
+/**
+ * OutfitControls is the set of controls layered over the outfit preview, to
+ * control things like species/color and sharing links!
+ */
+function OutfitControls({ outfitState, dispatchToOutfit }) {
+  return (
+    <PseudoBox
+      role="group"
+      pos="absolute"
+      left="0"
+      right="0"
+      top="0"
+      bottom="0"
+      padding={{ base: 2, lg: 6 }}
+      display="grid"
+      overflow="auto"
+      gridTemplateAreas={`"back sharing"
+                          "space space"
+                          "picker picker"`}
+      gridTemplateRows="auto minmax(1rem, 1fr) auto"
+      className={css`
+        opacity: 0;
+        transition: opacity 0.2s;
+
+        &:hover,
+        &:focus-within {
+          opacity: 1;
+        }
+      `}
+    >
+      <Box gridArea="back">
+        <BackButton dispatchToOutfit={dispatchToOutfit} />
+      </Box>
+      <Stack
+        gridArea="sharing"
+        alignSelf="flex-end"
+        spacing={{ base: "2", lg: "4" }}
+        align="flex-end"
+      >
+        <Box>
+          <DownloadButton outfitState={outfitState} />
+        </Box>
+        <Box>
+          <CopyLinkButton outfitState={outfitState} />
+        </Box>
+      </Stack>
+      <Box gridArea="space" />
+      <Flex gridArea="picker" justify="center">
+        <SpeciesColorPicker
+          outfitState={outfitState}
+          dispatchToOutfit={dispatchToOutfit}
+        />
+      </Flex>
+    </PseudoBox>
+  );
+}
+
+/**
+ * DownloadButton downloads the outfit as an image!
+ */
+function DownloadButton({ outfitState }) {
+  const { visibleLayers } = useOutfitAppearance(outfitState);
+
+  const [downloadImageUrl, prepareDownload] = useDownloadableImage(
+    visibleLayers
+  );
+
+  return (
+    <Tooltip label="Download" placement="left">
+      <Box>
+        <ControlButton
+          icon="download"
+          aria-label="Download"
+          as="a"
+          // eslint-disable-next-line no-script-url
+          href={downloadImageUrl || "javascript:void 0"}
+          download={(outfitState.name || "Outfit") + ".png"}
+          onMouseEnter={prepareDownload}
+          onFocus={prepareDownload}
+          cursor={!downloadImageUrl && "wait"}
+        />
+      </Box>
+    </Tooltip>
+  );
+}
+
+/**
+ * CopyLinkButton copies the outfit URL to the clipboard!
+ */
+function CopyLinkButton({ outfitState }) {
+  const { onCopy, hasCopied } = useClipboard(outfitState.url);
+
+  return (
+    <Tooltip label={hasCopied ? "Copied!" : "Copy link"} placement="left">
+      <Box>
+        <ControlButton
+          icon={hasCopied ? "check" : "link"}
+          aria-label="Copy link"
+          onClick={onCopy}
+        />
+      </Box>
+    </Tooltip>
+  );
+}
+
+/**
+ * BackButton opens a reset modal to let you clear the outfit or enter a new
+ * pet's name to start from!
+ */
+function BackButton({ dispatchToOutfit }) {
+  const [showResetModal, setShowResetModal] = React.useState(false);
+
+  return (
+    <>
+      <ControlButton
+        icon="arrow-back"
+        aria-label="Leave this outfit"
+        onClick={() => setShowResetModal(true)}
+      />
+      <OutfitResetModal
+        isOpen={showResetModal}
+        onClose={() => setShowResetModal(false)}
+        dispatchToOutfit={dispatchToOutfit}
+      />
+    </>
+  );
+}
+
+/**
+ * ControlButton is a UI helper to render the cute round buttons we use in
+ * OutfitControls!
+ */
+function ControlButton({ icon, "aria-label": ariaLabel, ...props }) {
+  return (
+    <IconButton
+      icon={icon}
+      aria-label={ariaLabel}
+      isRound
+      variant="unstyled"
+      backgroundColor="gray.600"
+      color="gray.50"
+      boxShadow="md"
+      d="flex"
+      alignItems="center"
+      justifyContent="center"
+      transition="backgroundColor 0.2s"
+      _focus={{ backgroundColor: "gray.500" }}
+      _hover={{ backgroundColor: "gray.500" }}
+      outline="initial"
+      {...props}
+    />
+  );
+}
+
+/**
+ * useDownloadableImage loads the image data and generates the downloadable
+ * image URL.
+ */
+function useDownloadableImage(visibleLayers) {
+  const [downloadImageUrl, setDownloadImageUrl] = React.useState(null);
+  const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
+
+  const prepareDownload = React.useCallback(async () => {
+    // Skip if the current image URL is already correct for these layers.
+    const layerIds = visibleLayers.map((l) => l.id);
+    if (layerIds.join(",") === preparedForLayerIds.join(",")) {
+      return;
+    }
+
+    // Skip if there are no layers. (This probably means we're still loading!)
+    if (layerIds.length === 0) {
+      return;
+    }
+
+    setDownloadImageUrl(null);
+
+    const imagePromises = visibleLayers.map(
+      (layer) =>
+        new Promise((resolve, reject) => {
+          const image = new window.Image();
+          image.crossOrigin = "Anonymous"; // Requires S3 CORS config!
+          image.addEventListener("load", () => resolve(image), false);
+          image.addEventListener("error", (e) => reject(e), false);
+          image.src = layer.imageUrl + "&xoxo";
+        })
+    );
+
+    const images = await Promise.all(imagePromises);
+
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    canvas.width = 600;
+    canvas.height = 600;
+
+    for (const image of images) {
+      context.drawImage(image, 0, 0);
+    }
+
+    console.log(
+      "Generated image for download",
+      layerIds,
+      canvas.toDataURL("image/png")
+    );
+    setDownloadImageUrl(canvas.toDataURL("image/png"));
+    setPreparedForLayerIds(layerIds);
+  }, [preparedForLayerIds, visibleLayers]);
+
+  return [downloadImageUrl, prepareDownload];
+}
+
+export default OutfitControls;

src/app/OutfitPreview.js

@@ -1,75 +1,17 @@
 import React from "react";
 import { css } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
-import gql from "graphql-tag";
+
-import { useQuery } from "@apollo/react-hooks";
+import { Box, Flex, Icon, Image, Spinner, Text } from "@chakra-ui/core";
-import {
-  Box,
-  Flex,
-  Icon,
-  IconButton,
-  Image,
-  PseudoBox,
-  Spinner,
-  Stack,
-  Text,
-  Tooltip,
-  useClipboard,
-} from "@chakra-ui/core";
 
 import { Delay } from "./util";
-import OutfitResetModal from "./OutfitResetModal";
+import useOutfitAppearance from "./useOutfitAppearance";
-import SpeciesColorPicker from "./SpeciesColorPicker";
 
-export const itemAppearanceFragment = gql`
+/**
-  fragment AppearanceForOutfitPreview on Appearance {
+ * OutfitPreview renders the actual image layers for the outfit we're viewing!
-    layers {
+ */
-      id
+function OutfitPreview({ outfitState }) {
-      imageUrl(size: SIZE_600)
+  const { loading, error, visibleLayers } = useOutfitAppearance(outfitState);
-      zone {
-        id
-        depth
-      }
-    }
-
-    restrictedZones {
-      id
-    }
-  }
-`;
-
-function OutfitPreview({ outfitState, dispatchToOutfit }) {
-  const { wornItemIds, speciesId, colorId } = outfitState;
-  const [hasFocus, setHasFocus] = React.useState(false);
-  const [showResetModal, setShowResetModal] = React.useState(false);
-
-  const { loading, error, data } = useQuery(
-    gql`
-      query($wornItemIds: [ID!]!, $speciesId: ID!, $colorId: ID!) {
-        petAppearance(speciesId: $speciesId, colorId: $colorId) {
-          ...AppearanceForOutfitPreview
-        }
-
-        items(ids: $wornItemIds) {
-          id
-          appearanceOn(speciesId: $speciesId, colorId: $colorId) {
-            ...AppearanceForOutfitPreview
-          }
-        }
-      }
-      ${itemAppearanceFragment}
-    `,
-    {
-      variables: { wornItemIds, speciesId, colorId },
-    }
-  );
-
-  const visibleLayers = getVisibleLayers(data);
-  const [downloadImageUrl, prepareDownload] = useDownloadableImage(
-    visibleLayers
-  );
-
-  const { onCopy, hasCopied } = useClipboard(outfitState.url);
 
   if (error) {
     return (
@@ -84,9 +26,11 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
   }
 
   return (
-    <PseudoBox role="group" pos="relative" height="100%" width="100%">
+    <Box pos="relative" height="100%" width="100%">
       <TransitionGroup>
         {visibleLayers.map((layer) => (
+          // We manage the fade-in and fade-out separately! The fade-out
+          // happens here, when the layer exits the DOM.
           <CSSTransition
             key={layer.id}
             classNames={css`
@@ -107,6 +51,9 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
                 objectFit="contain"
                 maxWidth="100%"
                 maxHeight="100%"
+                // We manage the fade-in and fade-out separately! The fade-in
+                // happens here, when the <Image> finishes preloading and
+                // applies the src to the underlying <img>.
                 className={css`
                   opacity: 0.01;
 
@@ -127,7 +74,7 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
         ))}
       </TransitionGroup>
       {loading && (
-        <Delay>
+        <Delay ms={0}>
           <FullScreenCenter>
             <Box
               width="100%"
@@ -141,180 +88,10 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
           </FullScreenCenter>
         </Delay>
       )}
-      <Box
+    </Box>
-        pos="absolute"
-        left="0"
-        right="0"
-        top="0"
-        bottom="0"
-        padding={{ base: 2, lg: 6 }}
-        display="grid"
-        overflow="auto"
-        gridTemplateAreas={`"back sharing"
-                            "space space"
-                            "picker picker"`}
-        gridTemplateRows="auto minmax(1rem, 1fr) auto"
-      >
-        <Box gridArea="back">
-          <IconButton
-            icon="arrow-back"
-            aria-label="Leave this outfit"
-            variant="unstyled"
-            backgroundColor="gray.600"
-            isRound={true}
-            d="flex"
-            alignItems="center"
-            justifyContent="center"
-            color="gray.50"
-            opacity={hasFocus ? 1 : 0}
-            transition="all 0.2s"
-            _groupHover={{
-              opacity: 1,
-            }}
-            onFocus={() => setHasFocus(true)}
-            onBlur={() => setHasFocus(false)}
-            onClick={() => setShowResetModal(true)}
-          />
-        </Box>
-        <Stack
-          gridArea="sharing"
-          alignSelf="flex-end"
-          spacing={{ base: "2", lg: "4" }}
-          align="flex-end"
-        >
-          <Box>
-            <Tooltip label="Download" placement="left">
-              <IconButton
-                icon="download"
-                aria-label="Download"
-                isRound
-                as="a"
-                // eslint-disable-next-line no-script-url
-                href={downloadImageUrl || "javascript:void 0"}
-                download={(outfitState.name || "Outfit") + ".png"}
-                onMouseEnter={prepareDownload}
-                onFocus={() => {
-                  prepareDownload();
-                  setHasFocus(true);
-                }}
-                onBlur={() => setHasFocus(false)}
-                cursor={!downloadImageUrl && "wait"}
-                variant="unstyled"
-                backgroundColor="gray.600"
-                color="gray.50"
-                boxShadow="md"
-                d="flex"
-                alignItems="center"
-                justifyContent="center"
-                opacity={hasFocus ? 1 : 0}
-                transition="all 0.2s"
-                _groupHover={{
-                  opacity: 1,
-                }}
-                _focus={{
-                  opacity: 1,
-                  backgroundColor: "gray.500",
-                }}
-                _hover={{
-                  backgroundColor: "gray.500",
-                }}
-                outline="initial"
-              />
-            </Tooltip>
-          </Box>
-          <Box>
-            <Tooltip
-              label={hasCopied ? "Copied!" : "Copy link"}
-              placement="left"
-            >
-              <IconButton
-                icon={hasCopied ? "check" : "link"}
-                aria-label="Copy link"
-                isRound
-                onClick={onCopy}
-                onFocus={() => setHasFocus(true)}
-                onBlur={() => setHasFocus(false)}
-                variant="unstyled"
-                backgroundColor="gray.600"
-                color="gray.50"
-                boxShadow="md"
-                d="flex"
-                alignItems="center"
-                justifyContent="center"
-                opacity={hasFocus ? 1 : 0}
-                transition="all 0.2s"
-                _groupHover={{
-                  opacity: 1,
-                }}
-                _focus={{
-                  opacity: 1,
-                  backgroundColor: "gray.500",
-                }}
-                _hover={{
-                  backgroundColor: "gray.500",
-                }}
-                outline="initial"
-              />
-            </Tooltip>
-          </Box>
-        </Stack>
-        <Box gridArea="space"></Box>
-        <PseudoBox
-          gridArea="picker"
-          opacity={hasFocus ? 1 : 0}
-          _groupHover={{ opacity: 1 }}
-          transition="opacity 0.2s"
-          display="flex"
-          justifyContent="center"
-        >
-          <SpeciesColorPicker
-            outfitState={outfitState}
-            dispatchToOutfit={dispatchToOutfit}
-            onFocus={() => setHasFocus(true)}
-            onBlur={() => setHasFocus(false)}
-          />
-        </PseudoBox>
-      </Box>
-      <OutfitResetModal
-        isOpen={showResetModal}
-        onClose={() => setShowResetModal(false)}
-        dispatchToOutfit={dispatchToOutfit}
-      />
-    </PseudoBox>
   );
 }
 
-function getVisibleLayers(data) {
-  if (!data) {
-    return [];
-  }
-
-  const allAppearances = [
-    data.petAppearance,
-    ...(data.items || []).map((i) => i.appearanceOn),
-  ].filter((a) => a);
-  let allLayers = allAppearances.map((a) => a.layers).flat();
-
-  // Clean up our data a bit, by ensuring only one layer per zone. This
-  // shouldn't happen in theory, but sometimes our database doesn't clean up
-  // after itself correctly :(
-  allLayers = allLayers.filter((l, i) => {
-    return allLayers.findIndex((l2) => l2.zone.id === l.zone.id) === i;
-  });
-
-  const allRestrictedZoneIds = allAppearances
-    .map((l) => l.restrictedZones)
-    .flat()
-    .map((z) => z.id);
-
-  const visibleLayers = allLayers.filter(
-    (l) => !allRestrictedZoneIds.includes(l.zone.id)
-  );
-  visibleLayers.sort((a, b) => a.zone.depth - b.zone.depth);
-
-  return visibleLayers;
-}
-
 function FullScreenCenter({ children }) {
   return (
     <Flex
@@ -331,51 +108,4 @@ function FullScreenCenter({ children }) {
   );
 }
 
-function useDownloadableImage(visibleLayers) {
-  const [downloadImageUrl, setDownloadImageUrl] = React.useState(null);
-  const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
-
-  const prepareDownload = React.useCallback(async () => {
-    // Skip if the current image URL is already correct for these layers.
-    const layerIds = visibleLayers.map((l) => l.id);
-    if (layerIds.join(",") === preparedForLayerIds.join(",")) {
-      return;
-    }
-
-    setDownloadImageUrl(null);
-
-    const imagePromises = visibleLayers.map(
-      (layer) =>
-        new Promise((resolve, reject) => {
-          const image = new window.Image();
-          image.crossOrigin = "Anonymous"; // Requires S3 CORS config!
-          image.addEventListener("load", () => resolve(image), false);
-          image.addEventListener("error", (e) => reject(e), false);
-          image.src = layer.imageUrl + "&xoxo";
-        })
-    );
-
-    const images = await Promise.all(imagePromises);
-
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    canvas.width = 600;
-    canvas.height = 600;
-
-    for (const image of images) {
-      context.drawImage(image, 0, 0);
-    }
-
-    console.log(
-      "Generated image for download",
-      layerIds,
-      canvas.toDataURL("image/png")
-    );
-    setDownloadImageUrl(canvas.toDataURL("image/png"));
-    setPreparedForLayerIds(layerIds);
-  }, [preparedForLayerIds, visibleLayers]);
-
-  return [downloadImageUrl, prepareDownload];
-}
-
 export default OutfitPreview;

src/app/SearchPanel.js

@@ -5,7 +5,7 @@ import { useQuery } from "@apollo/react-hooks";
 
 import { Delay, Heading1, useDebounce } from "./util";
 import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
-import { itemAppearanceFragment } from "./OutfitPreview";
+import { itemAppearanceFragment } from "./useOutfitAppearance";
 
 /**
  * SearchPanel shows item search results to the user, so they can preview them

src/app/SpeciesColorPicker.js

@@ -11,12 +11,7 @@ import { Delay } from "./util";
  * It preloads all species, colors, and valid species/color pairs; and then
  * ensures that the outfit is always in a valid state.
  */
-function SpeciesColorPicker({
+function SpeciesColorPicker({ outfitState, dispatchToOutfit }) {
-  outfitState,
-  dispatchToOutfit,
-  onFocus,
-  onBlur,
-}) {
   const toast = useToast();
   const { loading, error, data } = useQuery(gql`
     query {
@@ -121,8 +116,6 @@ function SpeciesColorPicker({
         border="none"
         boxShadow="md"
         width="auto"
-        onFocus={onFocus}
-        onBlur={onBlur}
       >
         {allColors.map((color) => (
           <option key={color.id} value={color.id}>
@@ -140,8 +133,6 @@ function SpeciesColorPicker({
         border="none"
         boxShadow="md"
         width="auto"
-        onFocus={onFocus}
-        onBlur={onBlur}
       >
         {allSpecies.map((species) => (
           <option key={species.id} value={species.id}>

src/app/WardrobePage.js

@@ -3,6 +3,7 @@ import { Box, Grid, useToast } from "@chakra-ui/core";
 import { Helmet } from "react-helmet";
 
 import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
+import OutfitControls from "./OutfitControls";
 import OutfitPreview from "./OutfitPreview";
 import useOutfitState from "./useOutfitState.js";
 
@@ -46,9 +47,9 @@ function WardrobePage() {
       <Box position="absolute" top="0" bottom="0" left="0" right="0">
         <Grid
           templateAreas={{
-            base: `"preview"
+            base: `"previewAndControls"
                    "itemsAndSearch"`,
-            lg: `"preview itemsAndSearch"`,
+            lg: `"previewAndControls itemsAndSearch"`,
           }}
           templateRows={{
             base: "minmax(100px, 45%) minmax(300px, 55%)",
@@ -61,11 +62,16 @@ function WardrobePage() {
           height="100%"
           width="100%"
         >
-          <Box gridArea="preview" backgroundColor="gray.900">
+          <Box gridArea="previewAndControls" bg="gray.900" pos="relative">
-            <OutfitPreview
+            <Box position="absolute" top="0" bottom="0" left="0" right="0">
-              outfitState={outfitState}
+              <OutfitPreview outfitState={outfitState} />
-              dispatchToOutfit={dispatchToOutfit}
+            </Box>
-            />
+            <Box position="absolute" top="0" bottom="0" left="0" right="0">
+              <OutfitControls
+                outfitState={outfitState}
+                dispatchToOutfit={dispatchToOutfit}
+              />
+            </Box>
           </Box>
           <Box gridArea="itemsAndSearch">
             <ItemsAndSearchPanels

src/app/useOutfitAppearance.js

@@ -0,0 +1,83 @@
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/react-hooks";
+
+/**
+ * useOutfitAppearance downloads the outfit's appearance data, and returns
+ * visibleLayers for rendering.
+ */
+export default function useOutfitAppearance(outfitState) {
+  const { wornItemIds, speciesId, colorId } = outfitState;
+
+  const { loading, error, data } = useQuery(
+    gql`
+      query($wornItemIds: [ID!]!, $speciesId: ID!, $colorId: ID!) {
+        petAppearance(speciesId: $speciesId, colorId: $colorId) {
+          ...AppearanceForOutfitPreview
+        }
+
+        items(ids: $wornItemIds) {
+          id
+          appearanceOn(speciesId: $speciesId, colorId: $colorId) {
+            ...AppearanceForOutfitPreview
+          }
+        }
+      }
+      ${itemAppearanceFragment}
+    `,
+    {
+      variables: { wornItemIds, speciesId, colorId },
+    }
+  );
+
+  const visibleLayers = getVisibleLayers(data);
+
+  return { loading, error, visibleLayers };
+}
+
+function getVisibleLayers(data) {
+  if (!data) {
+    return [];
+  }
+
+  const allAppearances = [
+    data.petAppearance,
+    ...(data.items || []).map((i) => i.appearanceOn),
+  ].filter((a) => a);
+  let allLayers = allAppearances.map((a) => a.layers).flat();
+
+  // Clean up our data a bit, by ensuring only one layer per zone. This
+  // shouldn't happen in theory, but sometimes our database doesn't clean up
+  // after itself correctly :(
+  allLayers = allLayers.filter((l, i) => {
+    return allLayers.findIndex((l2) => l2.zone.id === l.zone.id) === i;
+  });
+
+  const allRestrictedZoneIds = allAppearances
+    .map((l) => l.restrictedZones)
+    .flat()
+    .map((z) => z.id);
+
+  const visibleLayers = allLayers.filter(
+    (l) => !allRestrictedZoneIds.includes(l.zone.id)
+  );
+  visibleLayers.sort((a, b) => a.zone.depth - b.zone.depth);
+
+  return visibleLayers;
+}
+
+export const itemAppearanceFragment = gql`
+  fragment AppearanceForOutfitPreview on Appearance {
+    layers {
+      id
+      imageUrl(size: SIZE_600)
+      zone {
+        id
+        depth
+      }
+    }
+
+    restrictedZones {
+      id
+    }
+  }
+`;

src/app/useOutfitState.js

@@ -3,7 +3,7 @@ import gql from "graphql-tag";
 import produce, { enableMapSet } from "immer";
 import { useQuery, useApolloClient } from "@apollo/react-hooks";
 
-import { itemAppearanceFragment } from "./OutfitPreview";
+import { itemAppearanceFragment } from "./useOutfitAppearance";
 
 enableMapSet();