From f5cb1d263c0a1f21fcee7078d35cf0d349fed9f2 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Thu, 23 Apr 2020 13:31:39 -0700
Subject: [PATCH] add query to outfit preview, but don't use it yet

---
 src/OutfitPreview.js | 72 ++++++++++++++++++++++++++++++++++++++++++++
 src/WardrobePage.js  | 32 +++++---------------
 src/util.js          | 17 +++++++++++
 3 files changed, 97 insertions(+), 24 deletions(-)
 create mode 100644 src/OutfitPreview.js
 create mode 100644 src/util.js

diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js
new file mode 100644
index 0000000..a8c44bc
--- /dev/null
+++ b/src/OutfitPreview.js
@@ -0,0 +1,72 @@
+import React from "react";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/react-hooks";
+import { Flex, Image, Spinner, Text, Icon, Box } from "@chakra-ui/core";
+
+import { Delay } from "./util";
+
+function OutfitPreview({ itemIds, speciesId, colorId }) {
+  const { loading, error, data } = useQuery(
+    gql`
+      query($itemIds: [ID!]!, $speciesId: ID!, $colorId: ID!) {
+        items(ids: $itemIds) {
+          id
+          appearanceOn(speciesId: $speciesId, colorId: $colorId) {
+            layers {
+              id
+              imageUrl(size: SIZE_600)
+            }
+          }
+        }
+      }
+    `,
+    { variables: { itemIds, speciesId, colorId } }
+  );
+
+  if (loading) {
+    return (
+      <FullScreenCenter>
+        <Delay>
+          <Spinner color="green.400" size="lg" />
+        </Delay>
+      </FullScreenCenter>
+    );
+  }
+
+  if (error) {
+    return (
+      <FullScreenCenter>
+        <Text color="gray.50" d="flex" alignItems="center">
+          <Icon name="warning" />
+          <Box width={2} />
+          Could not load preview. Try again?
+        </Text>
+      </FullScreenCenter>
+    );
+  }
+
+  return (
+    <FullScreenCenter>
+      <Image
+        src="http://pets.neopets.com/cp/wgmdtdwz/1/7.png"
+        maxHeight="100%"
+        maxWidth="100%"
+      />
+    </FullScreenCenter>
+  );
+}
+
+function FullScreenCenter({ children }) {
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+      height="100%"
+      width="100%"
+    >
+      {children}
+    </Flex>
+  );
+}
+
+export default OutfitPreview;
diff --git a/src/WardrobePage.js b/src/WardrobePage.js
index 876b683..947aceb 100644
--- a/src/WardrobePage.js
+++ b/src/WardrobePage.js
@@ -4,12 +4,10 @@ import {
   Editable,
   EditablePreview,
   EditableInput,
-  Flex,
   Grid,
   Heading,
   Icon,
   IconButton,
-  Image,
   Input,
   InputGroup,
   InputLeftElement,
@@ -25,6 +23,8 @@ import { ITEMS } from "./data";
 import ItemList, { ItemListSkeleton } from "./ItemList";
 import useItemData from "./useItemData";
 import useOutfitState from "./useOutfitState.js";
+import OutfitPreview from "./OutfitPreview";
+import { Delay } from "./util";
 
 function WardrobePage() {
   const { loading, error, data, wearItem } = useOutfitState();
@@ -92,8 +92,8 @@ function WardrobePage() {
       left="0"
       right="0"
     >
-      <Box gridArea="outfit">
-        <OutfitPreview />
+      <Box gridArea="outfit" backgroundColor="gray.900">
+        <OutfitPreview itemIds={data.wornItemIds} speciesId="54" colorId="75" />
       </Box>
       <Box gridArea="search" boxShadow="sm">
         <Box px="5" py="3">
@@ -121,24 +121,6 @@ function WardrobePage() {
   );
 }
 
-function OutfitPreview() {
-  return (
-    <Flex
-      alignItems="center"
-      justifyContent="center"
-      height="100%"
-      width="100%"
-      backgroundColor="gray.900"
-    >
-      <Image
-        src="http://pets.neopets.com/cp/wgmdtdwz/1/7.png"
-        maxHeight="100%"
-        maxWidth="100%"
-      />
-    </Flex>
-  );
-}
-
 function SearchToolbar({ query, onChange }) {
   return (
     <InputGroup>
@@ -243,8 +225,10 @@ function ItemsPanel({ zonesAndItems, loading, onWearItem }) {
         {loading &&
           [1, 2, 3].map((i) => (
             <Box key={i}>
-              <Skeleton height="2.3rem" width="12rem" mb="3" />
-              <ItemListSkeleton />
+              <Delay>
+                <Skeleton height="2.3rem" width="12rem" mb="3" />
+                <ItemListSkeleton />
+              </Delay>
             </Box>
           ))}
         {!loading &&
diff --git a/src/util.js b/src/util.js
new file mode 100644
index 0000000..7dc8325
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { Box } from "@chakra-ui/core";
+
+export function Delay({ children, ms = 500 }) {
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    const id = setTimeout(() => setIsVisible(true), ms);
+    return () => clearTimeout(id);
+  }, [ms, setIsVisible]);
+
+  return (
+    <Box opacity={isVisible ? 1 : 0} transition="opacity 0.5s">
+      {children}
+    </Box>
+  );
+}