From b520d1095ccd0912a6e68a56cffe8dc33de676fc Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 5 Aug 2020 14:00:53 -0700
Subject: [PATCH] show new PNG in the app ~immediately

I had a hard time getting this to work the ideal way, but this way is Good Enough! a few seconds delay, oh well
---
 api/uploadLayerImage.js                       | 17 ++++------
 .../support/ItemLayerSupportUploadModal.js    | 32 +++++++------------
 2 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/api/uploadLayerImage.js b/api/uploadLayerImage.js
index d699b64..72b9a4f 100644
--- a/api/uploadLayerImage.js
+++ b/api/uploadLayerImage.js
@@ -27,7 +27,7 @@ async function resize(imageData, size) {
   return resizedImageData;
 }
 
-async function processImage(assetType, remoteId, size, imageData, now) {
+async function processImage(assetType, remoteId, size, imageData) {
   if (size !== 600) {
     imageData = await resize(imageData, size);
   }
@@ -39,9 +39,6 @@ async function processImage(assetType, remoteId, size, imageData, now) {
   const key = `${assetType}/${id1}/${id2}/${id3}/${remoteId}/${size}x${size}.png`;
 
   upload("impress-asset-images", key, imageData);
-
-  const when = Number(now);
-  return `https://impress-asset-images.s3.amazonaws.com/${key}?v2-${when}`;
 }
 
 export default async (req, res) => {
@@ -72,20 +69,18 @@ export default async (req, res) => {
     res.status(404).send(`Layer not found`);
   }
 
-  const now = new Date();
-
   const { remote_id: remoteId, type: assetType } = layer;
   const [imageUrl600, imageUrl300, imageUrl150] = await Promise.all([
-    processImage(assetType, remoteId, 600, imageData, now),
-    processImage(assetType, remoteId, 300, imageData, now),
-    processImage(assetType, remoteId, 150, imageData, now),
+    processImage(assetType, remoteId, 600, imageData),
+    processImage(assetType, remoteId, 300, imageData),
+    processImage(assetType, remoteId, 150, imageData),
   ]);
 
-  const nowTimestamp = now.toISOString().slice(0, 19).replace("T", " ");
+  const now = new Date().toISOString().slice(0, 19).replace("T", " ");
   const [result] = await db.execute(
     `UPDATE swf_assets SET image_manual = 1, converted_at = ?
      WHERE type = ? AND remote_id = ? LIMIT 1`,
-    [nowTimestamp, assetType, remoteId]
+    [now, assetType, remoteId]
   );
   if (result.affectedRows !== 1) {
     res
diff --git a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
index 86781e9..1008cdf 100644
--- a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
+++ b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
@@ -1,4 +1,6 @@
 import * as React from "react";
+import gql from "graphql-tag";
+import { useApolloClient } from "@apollo/client";
 import {
   Button,
   Box,
@@ -34,6 +36,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
 
   const supportSecret = useSupportSecret();
   const toast = useToast();
+  const apolloClient = useApolloClient();
 
   // Once both images are ready, merge them!
   React.useEffect(() => {
@@ -106,28 +109,17 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
       toast({
         status: "success",
         title: "Image successfully uploaded",
-        description: "Reload the page to see!",
+        description: "It might take a few seconds to update in the app!",
       });
 
-      // TODO: This seemed to be unreliable, I got it to work once but I don't
-      //       know what configuration of stuff did it! :/
-      // const { imageUrl600, imageUrl300, imageUrl150 } = await res.json();
-
-      // apolloClient.writeFragment({
-      //   id: `AppearanceLayer:${itemLayer.id}`,
-      //   fragment: gql`
-      //     fragment LayerImage on AppearanceLayer {
-      //       imageUrl600: imageUrl(size: SIZE_600)
-      //       imageUrl300: imageUrl(size: SIZE_300)
-      //       imageUrl150: imageUrl(size: SIZE_150)
-      //     }
-      //   `,
-      //   data: {
-      //     imageUrl600,
-      //     imageUrl300,
-      //     imageUrl150,
-      //   },
-      // });
+      // NOTE: I tried to do this as a cache update, but I couldn't ever get
+      //       the fragment with size parameters to work :/ (Other fields would
+      //       update, but not these!) Ultimately the eviction is the only
+      //       reliable method I found :/
+      apolloClient.cache.evict({
+        id: `AppearanceLayer:${itemLayer.id}`,
+        fieldName: "imageUrl",
+      });
     } catch (e) {
       setIsUploading(false);
       setUploadError(e);