From 6034f532f0ab6433e928f1253437e62cc47dc4e7 Mon Sep 17 00:00:00 2001
From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com>
Date: Wed, 20 Sep 2023 14:06:30 -0400
Subject: [PATCH] fix: on 403 retry fetching image (#891)

* fix: on 403 retry fetching image

* fix: clear interval on status other than 403

* fix: lower wait time
---
 .../Assets/hooks/useGetImagePreviewUrl.ts     | 21 +++++++++++++++----
 .../reports/campaign/EngagementsOverview.tsx  |  2 +-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Assets/hooks/useGetImagePreviewUrl.ts b/src/components/Assets/hooks/useGetImagePreviewUrl.ts
index dd39c729..4715659e 100644
--- a/src/components/Assets/hooks/useGetImagePreviewUrl.ts
+++ b/src/components/Assets/hooks/useGetImagePreviewUrl.ts
@@ -12,13 +12,26 @@ export function useGetImagePreviewUrl(props: { url: string }) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>();
 
-  const fetchImageResource = useMemo(async () => {
+  const fetchImageResource: Promise<ArrayBuffer> = useMemo(async () => {
     const result = await fetchResource(props.url);
-    if (!result.ok) {
-      throw new Error("Unable to fetch image");
+    if (result.ok) {
+      return await result.arrayBuffer();
     }
 
-    return await result.arrayBuffer();
+    return await new Promise((resolve, reject) => {
+      const intrvl = setInterval(async () => {
+        const result = await fetchResource(props.url);
+        if (result.status === 200) {
+          clearInterval(intrvl);
+          resolve(await result.arrayBuffer());
+        }
+
+        if (result.status !== 403) {
+          clearInterval(intrvl);
+          reject(new Error("Unable to fetch image"));
+        }
+      }, 2000);
+    });
   }, [props.url]);
 
   useEffect(() => {
diff --git a/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx b/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx
index cc01ad52..987ba58d 100644
--- a/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx
+++ b/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx
@@ -82,7 +82,7 @@ export function EngagementsOverview({
   const options = prepareChart(metrics, processedData);
 
   return (
-    <Box display="flex" flexDirection="row">
+    <Box display="flex" flexDirection="row" gap="5px">
       <MetricFilter
         processedStats={processedStats}
         metrics={metrics}