From 95eb3a56e0acca514d653b61e263122bd554712a Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Thu, 23 Apr 2020 23:43:39 -0700
Subject: [PATCH] misc outfit preview fixups

---
 src/OutfitPreview.js | 25 ++++++++++++++++++++-----
 src/util.js          |  2 +-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js
index e61584c..059d22f 100644
--- a/src/OutfitPreview.js
+++ b/src/OutfitPreview.js
@@ -43,7 +43,10 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
         }
       }
     `,
-    { variables: { itemIds, speciesId, colorId } }
+    {
+      variables: { itemIds, speciesId, colorId },
+      returnPartialData: true,
+    }
   );
 
   if (error) {
@@ -62,7 +65,12 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
     <Box pos="relative" height="100%" width="100%">
       {getVisibleLayers(data).map((layer) => (
         <FullScreenCenter key={layer.id}>
-          <Image src={layer.imageUrl} maxWidth="100%" maxHeight="100%" />
+          <Image
+            src={layer.imageUrl}
+            objectFit="contain"
+            maxWidth="100%"
+            maxHeight="100%"
+          />
         </FullScreenCenter>
       ))}
       {loading && (
@@ -91,9 +99,16 @@ function getVisibleLayers(data) {
 
   const allAppearances = [
     data.petAppearance,
-    ...data.items.map((i) => i.appearanceOn),
-  ];
-  const allLayers = allAppearances.map((a) => a.layers).flat();
+    ...(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)
diff --git a/src/util.js b/src/util.js
index 7dc8325..b12f694 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Box } from "@chakra-ui/core";
 
-export function Delay({ children, ms = 500 }) {
+export function Delay({ children, ms = 300 }) {
   const [isVisible, setIsVisible] = React.useState(false);
 
   React.useEffect(() => {