Implemented deleteImage API, state and tests

Reset state objects containing the deleted image

Updated objects to be deleted in State

Updated API export and added more tests

Added docs

Updated Tests

Added provisory getSortedImagesBySight function

Removed CleanupObserver

Added UploadSuccessPayload

Author: Gabriel Tira

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[]>) {
+  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) {
+  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);