From bf2660cbd42197371d8bab14451248b6c3e7bf16 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 12 Sep 2020 17:56:31 -0700
Subject: [PATCH] show a basic item preview on the new item page

---
 src/app/ItemPage.js                 | 41 ++++++++++++++++++++++++++---
 src/app/apolloClient.js             | 11 ++++++--
 src/app/components/OutfitPreview.js |  2 +-
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 2fa75fc..8dd58d0 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -1,5 +1,12 @@
 import React from "react";
-import { Badge, Box, Center } from "@chakra-ui/core";
+import {
+  AspectRatio,
+  Badge,
+  Box,
+  Center,
+  VStack,
+  useColorModeValue,
+} from "@chakra-ui/core";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
@@ -13,6 +20,7 @@ import {
   NpBadge,
 } from "./components/ItemCard";
 import { Heading1, usePageTitle } from "./util";
+import OutfitPreview from "./components/OutfitPreview";
 
 function ItemPage() {
   const { itemId } = useParams();
@@ -48,9 +56,10 @@ function ItemPage() {
   const { item } = data;
 
   return (
-    <Box>
+    <VStack spacing="6">
       <ItemPageHeader item={item} />
-    </Box>
+      <ItemPageOutfitPreview itemId={itemId} />
+    </VStack>
   );
 }
 
@@ -138,4 +147,30 @@ function LinkBadge({ children, href }) {
   );
 }
 
+function ItemPageOutfitPreview({ itemId }) {
+  const borderColor = useColorModeValue("green.700", "green.400");
+
+  return (
+    <AspectRatio
+      width="100%"
+      maxWidth="300px"
+      ratio="1"
+      border="1px"
+      borderColor={borderColor}
+      borderRadius="lg"
+      boxShadow="lg"
+      overflow="hidden"
+    >
+      <Box>
+        <OutfitPreview
+          speciesId="1"
+          colorId="8"
+          pose="HAPPY_FEM"
+          wornItemIds={[itemId]}
+        />
+      </Box>
+    </AspectRatio>
+  );
+}
+
 export default ItemPage;
diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js
index d3c7b69..926ad1c 100644
--- a/src/app/apolloClient.js
+++ b/src/app/apolloClient.js
@@ -57,8 +57,11 @@ const typePolicies = {
           toReference({ __typename: "Color", id: colorId })
         );
         if (speciesStandardBodyId == null || colorIsStandard == null) {
-          // This is an expected case while the page is loading.
-          return null;
+          // We haven't loaded all the species/colors into cache yet. We might
+          // be loading them, depending on the page? Either way, return
+          // `undefined`, meaning we don't know how to serve this from cache.
+          // This will cause us to start loading it from the server.
+          return undefined;
         }
 
         if (colorIsStandard) {
@@ -68,6 +71,10 @@ const typePolicies = {
             id: `item-${itemId}-body-${speciesStandardBodyId}`,
           });
         } else {
+          // This isn't a standard color, so we don't support special
+          // cross-color caching for it. Return `undefined`, meaning we don't
+          // know how to serve this from cache. This will cause us to start
+          // loading it from the server.
           return undefined;
         }
       },
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index 9ed1bfa..26af72d 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -25,7 +25,7 @@ function OutfitPreview({
   speciesId,
   colorId,
   pose,
-  appearanceId,
+  appearanceId = null,
   wornItemIds,
   placeholder,
   loadingDelay,