From 1b47b4b23f13b16ad6d71f164799545363f543e6 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 25 Apr 2020 03:02:11 -0700
Subject: [PATCH] minor tweaks to download for degraded experience

prod doesn't use latest chakra, so the image loading is not smooth anymore... so we stopped using crossOrigin for the moment, which is awkward for Download
---
 dev-todos.txt        |  1 +
 src/OutfitPreview.js | 20 ++++++++------------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/dev-todos.txt b/dev-todos.txt
index 64ade43..e4ed8a1 100644
--- a/dev-todos.txt
+++ b/dev-todos.txt
@@ -1,4 +1,5 @@
 * Use accessible click targets for item lists! Honestly, can they be checkboxes?
 * Update skeletons for ItemList and ItemsPanel
 * Use react-virtualized instead of our own scroller, but we need total count known, and we need another solution for the CSS transitions in the outfit case
+* Restore good download behavior: use crossOrigin for everything, and remove cache-buster in the URL we use for canvas
 * Undo the local linking we did for @chakra-ui/core, react, and react-dom on Matchu's machine 😅
diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js
index faa70db..8a62619 100644
--- a/src/OutfitPreview.js
+++ b/src/OutfitPreview.js
@@ -12,7 +12,6 @@ import {
   Spinner,
   Text,
   Tooltip,
-  useToast,
 } from "@chakra-ui/core";
 
 import { Delay } from "./util";
@@ -38,7 +37,6 @@ export const itemAppearanceFragment = gql`
 
 function OutfitPreview({ outfitState }) {
   const { wornItemIds, speciesId, colorId } = outfitState;
-  const toast = useToast();
 
   const { loading, error, data } = useQuery(
     gql`
@@ -99,7 +97,10 @@ function OutfitPreview({ outfitState }) {
                 className="outfit-preview-layer-image"
                 // This sets up the cache to not need to reload images during
                 // download!
-                crossOrigin="Anonymous"
+                // TODO: Re-enable this once we get our change into Chakra
+                // main. For now, this will make Downloads a bit slower, which
+                // is fine!
+                // crossOrigin="Anonymous"
               />
             </FullScreenCenter>
           </CSSTransition>
@@ -138,14 +139,7 @@ function OutfitPreview({ outfitState }) {
             download={(outfitState.name || "Outfit") + ".png"}
             onMouseEnter={prepareDownload}
             onFocus={prepareDownload}
-            onClick={() => {
-              if (!downloadImageUrl) {
-                toast({
-                  title:
-                    "Just a second, try again when the image is done loading!",
-                });
-              }
-            }}
+            cursor={!downloadImageUrl && "wait"}
             variant="unstyled"
             backgroundColor="gray.600"
             color="gray.50"
@@ -224,6 +218,8 @@ function useDownloadableImage(visibleLayers) {
   const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
 
   const prepareDownload = React.useCallback(async () => {
+    setDownloadImageUrl(null);
+
     // Skip if the current image URL is already correct for these layers.
     const layerIds = visibleLayers.map((l) => l.id);
     if (layerIds.join(",") === preparedForLayerIds.join(",")) {
@@ -237,7 +233,7 @@ function useDownloadableImage(visibleLayers) {
           image.crossOrigin = "Anonymous"; // Requires S3 CORS config!
           image.addEventListener("load", () => resolve(image), false);
           image.addEventListener("error", (e) => reject(e), false);
-          image.src = layer.imageUrl;
+          image.src = layer.imageUrl + "&xoxo";
         })
     );