Use Delete Image API to clean up previous images

packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx

@@ -43,7 +43,7 @@ import {
   usePhotoCaptureSightTutorial,
   useInspectionComplete,
 } from './hooks';
-// import { SessionTimeTrackerDemo } from '../components/SessionTimeTrackerDemo';
+import { useImagesCleanup } from '../hooks/useImagesCleanup';
 
 /**
  * Props of the PhotoCapture component.
@@ -218,12 +218,17 @@ export function PhotoCapture({
     closeBadConnectionWarningDialog,
     uploadEventHandlers: badConnectionWarningUploadEventHandlers,
   } = useBadConnectionWarning({ maxUploadDurationWarning });
+  const { cleanupEventHandlers } = useImagesCleanup({ inspectionId, apiConfig });
   const uploadQueue = useUploadQueue({
     inspectionId,
     apiConfig,
     additionalTasks,
     complianceOptions,
-    eventHandlers: [adaptiveUploadEventHandlers, badConnectionWarningUploadEventHandlers],
+    eventHandlers: [
+      adaptiveUploadEventHandlers,
+      badConnectionWarningUploadEventHandlers,
+      cleanupEventHandlers,
+    ],
   });
   const images = usePhotoCaptureImages(inspectionId);
   const handlePictureTaken = usePictureTaken({

packages/inspection-capture-web/src/hooks/useAdaptiveCameraConfig.ts

@@ -6,7 +6,7 @@ import {
 } from '@monkvision/types';
 import { useCallback, useMemo, useState } from 'react';
 import { useObjectMemo } from '@monkvision/common';
-import { UploadEventHandlers } from './useUploadQueue';
+import { UploadEventHandlers, UploadSuccessPayload } from './useUploadQueue';
 
 const DEFAULT_CAMERA_CONFIG: Required<CameraConfig> = {
   quality: 0.6,
@@ -75,8 +75,8 @@ export function useAdaptiveCameraConfig({
     setIsImageUpscalingAllowed(false);
   };
 
-  const onUploadSuccess = useCallback((durationMs: number) => {
-    if (durationMs > MAX_UPLOAD_DURATION_MS) {
+  const onUploadSuccess = useCallback(({ durationMs }: UploadSuccessPayload) => {
+    if (durationMs && durationMs > MAX_UPLOAD_DURATION_MS) {
       lowerMaxImageQuality();
     }
   }, []);

packages/inspection-capture-web/src/hooks/useBadConnectionWarning.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import { useObjectMemo } from '@monkvision/common';
 import { PhotoCaptureAppConfig } from '@monkvision/types';
-import { UploadEventHandlers } from './useUploadQueue';
+import { UploadEventHandlers, UploadSuccessPayload } from './useUploadQueue';
 
 /**
  * Parameters accepted by the useBadConnectionWarning hook.
@@ -44,8 +44,9 @@ export function useBadConnectionWarning({
   );
 
   const onUploadSuccess = useCallback(
-    (durationMs: number) => {
+    ({ durationMs }: UploadSuccessPayload) => {
       if (
+        durationMs &&
         maxUploadDurationWarning >= 0 &&
         durationMs > maxUploadDurationWarning &&
         !hadDialogBeenDisplayed.current

packages/inspection-capture-web/src/hooks/useImagesCleanup.ts

@@ -0,0 +1,101 @@
+import { useMonkState, useObjectMemo } from '@monkvision/common';
+import { MonkApiConfig, useMonkApi } from '@monkvision/network';
+import { useCallback } from 'react';
+import { Image } from '@monkvision/types';
+import { UploadEventHandlers, UploadSuccessPayload } from './useUploadQueue';
+
+/**
+ * Parameters accepted by the useImagesCleanup hook.
+ */
+export interface ImagesCleanupParams {
+  /**
+   * The inspection ID.
+   */
+  inspectionId: string;
+  /**
+   * The api config used to communicate with the API.
+   */
+  apiConfig: MonkApiConfig;
+}
+
+/**
+ * Handle used to manage the images cleanup after a new one uploads.
+ */
+export interface ImagesCleanupHandle {
+  /**
+   * A set of event handlers listening to upload events.
+   */
+  cleanupEventHandlers: UploadEventHandlers;
+}
+
+function extractOtherImagesToDelete(imagesBySight: Record<string, Image[]>): Image[] {
+  const imagesToDelete: Image[] = [];
+
+  Object.values(imagesBySight)
+    .filter((images) => images.length > 1)
+    .forEach((images) => {
+      const sortedImages = images.sort((a, b) =>
+        b.createdAt && a.createdAt ? b.createdAt - a.createdAt : 0,
+      );
+      imagesToDelete.push(...sortedImages.slice(1));
+    });
+
+  return imagesToDelete;
+}
+
+function groupImagesBySightId(images: Image[], sightIdToSkip: string): Record<string, Image[]> {
+  return images.reduce((acc, image) => {
+    if (!image.sightId || image.sightId === sightIdToSkip) {
+      return acc;
+    }
+    if (!acc[image.sightId]) {
+      acc[image.sightId] = [];
+    }
+
+    acc[image.sightId].push(image);
+    return acc;
+  }, {} as Record<string, Image[]>);
+}
+
+/**
+ * Custom hook used to cleanup sights' images of the inspection by deleting the old ones
+ * when a new image is added.
+ */
+export function useImagesCleanup(props: ImagesCleanupParams): ImagesCleanupHandle {
+  const { deleteImage } = useMonkApi(props.apiConfig);
+  const { state } = useMonkState();
+
+  const onUploadSuccess = useCallback(
+    ({ sightId, imageId }: UploadSuccessPayload) => {
+      if (!sightId) {
+        return;
+      }
+
+      const otherImagesToDelete = extractOtherImagesToDelete(
+        groupImagesBySightId(state.images, sightId),
+      );
+
+      const sightImagesToDelete = state.images.filter(
+        (image) =>
+          image.inspectionId === props.inspectionId &&
+          image.sightId === sightId &&
+          image.id !== imageId,
+      );
+
+      const imagesToDelete = [...otherImagesToDelete, ...sightImagesToDelete];
+
+      if (imagesToDelete.length > 0) {
+        imagesToDelete.forEach((image) =>
+          deleteImage({ imageId: image.id, id: props.inspectionId }),
+        );
+      }
+    },
+    [state.images, props.inspectionId],
+  );
+
+  return useObjectMemo({
+    cleanupEventHandlers: {
+      onUploadSuccess,
+    },
+  });
+}

packages/inspection-capture-web/src/hooks/useUploadQueue.ts

@@ -11,16 +11,32 @@ import { useRef } from 'react';
 import { useMonitoring } from '@monkvision/monitoring';
 import { CaptureMode } from '../types';
 
+/**
+ * Payload for the onUploadSuccess event handler.
+ */
+export interface UploadSuccessPayload {
+  /**
+   * The total elapsed time in milliseconds between the start of the upload and the end of the upload.
+   */
+  durationMs?: number;
+  /**
+   * The sight ID associated with the uploaded picture, if applicable.
+   */
+  sightId?: string;
+  /**
+   * The ID of the uploaded image.
+   */
+  imageId?: string;
+}
+
 /**
  * Type definition for upload event handlers.
  */
 export interface UploadEventHandlers {
   /**
    * Callback called when a picture upload successfully completes.
-   *
-   * @param durationMs The total elapsed time in milliseconds between the start of the upload and the end of the upload.
    */
-  onUploadSuccess?: (durationMs: number) => void;
+  onUploadSuccess?: (payload: UploadSuccessPayload) => void;
   /**
    * Callback called when a picture upload fails because of a timeout.
    */
@@ -193,7 +209,7 @@ export function useUploadQueue({
     }
     try {
       const startTs = Date.now();
-      await addImage(
+      const result = await addImage(
         createAddImageOptions(
           upload,
           inspectionId,
@@ -205,7 +221,14 @@ export function useUploadQueue({
         ),
       );
       const uploadDurationMs = Date.now() - startTs;
-      eventHandlers?.forEach((handlers) => handlers.onUploadSuccess?.(uploadDurationMs));
+      const sightId = upload.mode === CaptureMode.SIGHT ? upload.sightId : undefined;
+      eventHandlers?.forEach((handlers) =>
+        handlers.onUploadSuccess?.({
+          durationMs: uploadDurationMs,
+          sightId,
+          imageId: result?.image?.id,
+        }),
+      );
     } catch (err) {
       if (
         err instanceof Error &&

packages/inspection-capture-web/test/hooks/useAdaptiveCameraConfig.test.ts

@@ -45,7 +45,7 @@ describe('useAdaptiveCameraConfigTest hook', () => {
     expect(result.current.adaptiveCameraConfig.resolution).toEqual(
       initialProps.initialCameraConfig.resolution,
     );
-    act(() => result.current.uploadEventHandlers.onUploadSuccess?.(15001));
+    act(() => result.current.uploadEventHandlers.onUploadSuccess?.({ durationMs: 15001 }));
     expect(result.current.adaptiveCameraConfig.resolution).toEqual(CameraResolution.QHD_2K);
     expect(result.current.adaptiveCameraConfig.quality).toEqual(0.6);
     expect(result.current.adaptiveCameraConfig.allowImageUpscaling).toEqual(false);
@@ -63,7 +63,7 @@ describe('useAdaptiveCameraConfigTest hook', () => {
     expect(result.current.adaptiveCameraConfig.resolution).toEqual(
       initialProps.initialCameraConfig.resolution,
     );
-    act(() => result.current.uploadEventHandlers.onUploadSuccess?.(200));
+    act(() => result.current.uploadEventHandlers.onUploadSuccess?.({ durationMs: 200 }));
     expect(result.current.adaptiveCameraConfig).toEqual(
       expect.objectContaining(initialProps.initialCameraConfig),
     );

packages/inspection-capture-web/test/hooks/useBadConnectionWarning.test.tsx

@@ -26,7 +26,9 @@ describe('useBadConnectionWarning hook', () => {
     });
 
     act(() => {
-      result.current.uploadEventHandlers.onUploadSuccess?.(maxUploadDurationWarning + 1);
+      result.current.uploadEventHandlers.onUploadSuccess?.({
+        durationMs: maxUploadDurationWarning + 1,
+      });
     });
     expect(result.current.isBadConnectionWarningDialogDisplayed).toBe(true);
 
@@ -40,7 +42,9 @@ describe('useBadConnectionWarning hook', () => {
     });
 
     act(() => {
-      result.current.uploadEventHandlers.onUploadSuccess?.(maxUploadDurationWarning - 1);
+      result.current.uploadEventHandlers.onUploadSuccess?.({
+        durationMs: maxUploadDurationWarning - 1,
+      });
     });
     expect(result.current.isBadConnectionWarningDialogDisplayed).toBe(false);
 
@@ -68,7 +72,7 @@ describe('useBadConnectionWarning hook', () => {
     });
 
     act(() => {
-      result.current.uploadEventHandlers.onUploadSuccess?.(100000);
+      result.current.uploadEventHandlers.onUploadSuccess?.({ durationMs: 100000 });
       result.current.uploadEventHandlers.onUploadTimeout?.();
     });
     expect(result.current.isBadConnectionWarningDialogDisplayed).toBe(false);
@@ -87,7 +91,9 @@ describe('useBadConnectionWarning hook', () => {
     });
     expect(result.current.isBadConnectionWarningDialogDisplayed).toBe(true);
     act(() => {
-      result.current.uploadEventHandlers.onUploadSuccess?.(maxUploadDurationWarning + 1);
+      result.current.uploadEventHandlers.onUploadSuccess?.({
+        durationMs: maxUploadDurationWarning + 1,
+      });
     });
     expect(result.current.isBadConnectionWarningDialogDisplayed).toBe(true);
 
@@ -131,7 +137,9 @@ describe('useBadConnectionWarning hook', () => {
     });
     expect(result.current.isBadConnectionWarningDialogDisplayed).toBe(false);
     act(() => {
-      result.current.uploadEventHandlers.onUploadSuccess?.(maxUploadDurationWarning + 1);
+      result.current.uploadEventHandlers.onUploadSuccess?.({
+        durationMs: maxUploadDurationWarning + 1,
+      });
     });
     expect(result.current.isBadConnectionWarningDialogDisplayed).toBe(false);