Error handling

beyondessential · Sep 18, 2024 · 48ec638 · 48ec638
1 parent 653ab43
commit 48ec638
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/MultiPhotographEnlarged.tsx b/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/MultiPhotographEnlarged.tsx
@@ -15,6 +15,7 @@ import { URL_SEARCH_PARAMS } from '../../../../constants';
 import { useDashboard } from '../../../Dashboard';
 import { useDownloadImages } from './useDownloadImages';
 import { ExportIconButton } from '../../../EnlargedDashboardItem';
+import { SmallAlert } from '@tupaia/ui-components';
 
 const Wrapper = styled.div`
   position: relative;
@@ -157,13 +158,11 @@ export const MultiPhotographEnlarged = ({ report, config }: MultiPhotographEnlar
   const { projectCode, entityCode } = useParams();
   const { activeDashboard } = useDashboard();
 
-  const { mutate: downloadImages, isLoading } = useDownloadImages(
-    projectCode,
-    entityCode,
-    activeDashboard?.code,
-    reportCode,
-    data,
-  );
+  const {
+    mutate: downloadImages,
+    isLoading,
+    error,
+  } = useDownloadImages(projectCode, entityCode, activeDashboard?.code, reportCode, data);
 
   useEffect(() => {
     if (!sliderRef1.current || mainSlider) return;
@@ -232,8 +231,10 @@ export const MultiPhotographEnlarged = ({ report, config }: MultiPhotographEnlar
         isLoading={isLoading}
         title="Export images"
       />
+
       <Wrapper>
         <MainSliderContainer>
+          {error && <SmallAlert severity="error">{(error as Error).message}</SmallAlert>}
           <Slider
             {...settings}
             asNavFor={thumbnailSlider}

diff --git a/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/useDownloadImages.ts b/packages/tupaia-web/src/features/Visuals/View/MultiPhotograph/useDownloadImages.ts
@@ -19,16 +19,16 @@ export const useDownloadImages = (
     ['images', projectCode, entityCode, dashboardCode, reportCode],
     async () => {
       return Promise.all(
-        images?.map(photo =>
-          fetch(photo.value, {
+        images?.map(photo => {
+          return fetch(photo.value, {
             method: 'GET',
           }).then(async response => {
             return {
               blob: await response.blob(),
               label: photo.label,
             };
-          }),
-        ) ?? [],
+          });
+        }) ?? [],
       );
     },
     {
@@ -68,7 +68,7 @@ export const useDownloadImages = (
             return blobsWithNames.push({ blob, name: label });
           }
           // Default to Image 1, Image 2, etc.
-          blobsWithNames.push({ blob, name: `${reportCode}_image_${index + 1}` });
+          blobsWithNames.push({ blob, name: `Image ${index + 1}` });
         });
 
         const zip = new JSZip();