From 07f182a78e30036c56051f6606ae7a6b8a2bb68c Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 11 Aug 2020 22:46:14 -0700
Subject: [PATCH] minor SWF uploader fixes

fixed some warnings, and added window resize as an event trigger for updating the red/green border color
---
 .../support/ItemLayerSupportUploadModal.js    | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
index 1008cdf..5ada334 100644
--- a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
+++ b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
@@ -1,5 +1,4 @@
 import * as React from "react";
-import gql from "graphql-tag";
 import { useApolloClient } from "@apollo/client";
 import {
   Button,
@@ -124,7 +123,14 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
       setIsUploading(false);
       setUploadError(e);
     }
-  }, [imageWithAlphaBlob, supportSecret, itemLayer.id, toast, onClose]);
+  }, [
+    imageWithAlphaBlob,
+    supportSecret,
+    itemLayer.id,
+    toast,
+    onClose,
+    apolloClient.cache,
+  ]);
 
   return (
     <Modal
@@ -290,7 +296,7 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
   // that isn't fully visible will fill the not-visible space with black,
   // instead of the actual SWF content. We change the border color to hint this
   // to the user!
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const region = regionRef.current;
     if (!region) {
       return;
@@ -301,7 +307,7 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
       throw new Error(`could not find .chakra-modal__overlay scroll parent`);
     }
 
-    const onMountAndOnScroll = () => {
+    const onMountOrScrollOrResize = () => {
       const regionBox = region.getBoundingClientRect();
       const scrollParentBox = scrollParent.getBoundingClientRect();
       const isVisible =
@@ -312,12 +318,16 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
       setIsVisible(isVisible);
     };
 
-    onMountAndOnScroll();
+    onMountOrScrollOrResize();
 
-    scrollParent.addEventListener("scroll", onMountAndOnScroll);
+    scrollParent.addEventListener("scroll", onMountOrScrollOrResize);
+    window.addEventListener("resize", onMountOrScrollOrResize);
 
-    return () => scrollParent.removeEventListener("scroll", onMountAndOnScroll);
-  }, [regionRef.current]);
+    return () => {
+      scrollParent.removeEventListener("scroll", onMountOrScrollOrResize);
+      window.removeEventListener("resize", onMountOrScrollOrResize);
+    };
+  }, []);
 
   let borderColor;
   if (isVisible === null) {