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

Author: Gabriel Tira

configs/test-utils/src/__mocks__/ky.ts

@@ -28,4 +28,5 @@ export = {
   get: createMockKyRequestFn(),
   post: createMockKyRequestFn(),
   patch: createMockKyRequestFn(),
+  delete: createMockKyRequestFn(),
 };

packages/common/src/state/actions/deletedOneImage.ts

@@ -0,0 +1,80 @@
+import { MonkState } from '../state';
+import { MonkAction, MonkActionType } from './monkAction';
+
+/**
+ * The payload of a MonkDeletedOneImagePayload.
+ */
+export interface MonkDeletedOneImagePayload {
+  /**
+   * The ID of the inspection to which the image was deleted.
+   */
+  inspectionId: string;
+  /**
+   * The image ID deleted.
+   */
+  imageId: string;
+}
+
+/**
+ * Action dispatched when an image have been deleted.
+ */
+export interface MonkDeletedOneImageAction extends MonkAction {
+  /**
+   * The type of the action : `MonkActionType.DELETED_ONE_IMAGE`.
+   */
+  type: MonkActionType.DELETED_ONE_IMAGE;
+  /**
+   * The payload of the action containing the fetched entities.
+   */
+  payload: MonkDeletedOneImagePayload;
+}
+
+/**
+ * Matcher function that matches a DeletedOneImage while also inferring its type using TypeScript's type predicate
+ * feature.
+ */
+export function isDeletedOneImageAction(action: MonkAction): action is MonkDeletedOneImageAction {
+  return action.type === MonkActionType.DELETED_ONE_IMAGE;
+}
+
+/**
+ * Reducer function for a deletedOneImage action.
+ */
+export function deletedOneImage(state: MonkState, action: MonkDeletedOneImageAction): MonkState {
+  const { images, inspections, damages, parts, renderedOutputs, views } = state;
+  const { payload } = action;
+
+  const inspection = inspections.find((value) => value.id === payload.inspectionId);
+  if (inspection) {
+    inspection.images = inspection.images?.filter((imageId) => imageId !== payload.imageId);
+  }
+  const deletedImage = images.find((image) => image.id === payload.imageId);
+  const newImages = images.filter((image) => image.id !== payload.imageId);
+  const newDamages = damages.map((damage) => ({
+    ...damage,
+    relatedImages: damage.relatedImages.filter((imageId) => imageId !== payload.imageId),
+  }));
+  const newParts = parts.map((part) => ({
+    ...part,
+    relatedImages: part.relatedImages.filter((imageId) => imageId !== payload.imageId),
+  }));
+  const newViews = views.map((view) => ({
+    ...view,
+    renderedOutputs: view.renderedOutputs.filter(
+      (outputId) => !deletedImage?.renderedOutputs.includes(outputId),
+    ),
+  }));
+  const newRenderedOutputs = renderedOutputs.filter(
+    (output) => !deletedImage?.renderedOutputs.includes(output.id),
+  );
+
+  return {
+    ...state,
+    images: [...newImages],
+    inspections: [...inspections],
+    damages: [...newDamages],
+    parts: [...newParts],
+    renderedOutputs: [...newRenderedOutputs],
+    views: [...newViews],
+  };
+}

packages/common/src/state/actions/index.ts

@@ -2,6 +2,7 @@ export * from './monkAction';
 export * from './resetState';
 export * from './gotOneInspection';
 export * from './createdOneImage';
+export * from './deletedOneImage';
 export * from './updatedManyTasks';
 export * from './updatedVehicle';
 export * from './createdOnePricing';

packages/common/src/state/actions/monkAction.ts

@@ -14,6 +14,10 @@ export enum MonkActionType {
    * An image has been uploaded to the API.
    */
   CREATED_ONE_IMAGE = 'created_one_image',
+  /**
+   * An image has been deleted.
+   */
+  DELETED_ONE_IMAGE = 'deleted_one_image',
   /**
    * One or more tasks have been updated.
    */

packages/common/src/state/reducer.ts

@@ -24,6 +24,8 @@ import {
   isDeletedOneDamageAction,
   isGotOneInspectionPdfAction,
   gotOneInspectionPdf,
+  deletedOneImage,
+  isDeletedOneImageAction,
 } from './actions';
 import { MonkState } from './state';
 
@@ -43,6 +45,9 @@ export function monkReducer(state: MonkState, action: MonkAction): MonkState {
   if (isCreatedOneImageAction(action)) {
     return createdOneImage(state, action);
   }
+  if (isDeletedOneImageAction(action)) {
+    return deletedOneImage(state, action);
+  }
   if (isUpdatedManyTasksAction(action)) {
     return updatedManyTasks(state, action);
   }

packages/common/test/state/actions/deletedOneImage.test.ts

@@ -0,0 +1,97 @@
+import { Damage, Image, Inspection, Part, RenderedOutput, View } from '@monkvision/types';
+import {
+  createEmptyMonkState,
+  deletedOneImage,
+  isDeletedOneImageAction,
+  MonkActionType,
+  MonkDeletedOneImageAction,
+} from '../../../src';
+
+const action: MonkDeletedOneImageAction = {
+  type: MonkActionType.DELETED_ONE_IMAGE,
+  payload: {
+    inspectionId: 'inspections-test',
+    imageId: 'image-id-test',
+  },
+};
+
+describe('DeletedOneImage action handlers', () => {
+  describe('Action matcher', () => {
+    it('should return true if the action has the proper type', () => {
+      expect(isDeletedOneImageAction({ type: MonkActionType.DELETED_ONE_IMAGE })).toBe(true);
+    });
+
+    it('should return false if the action does not have the proper type', () => {
+      expect(isDeletedOneImageAction({ type: MonkActionType.RESET_STATE })).toBe(false);
+    });
+  });
+
+  describe('Action handler', () => {
+    it('should return a new state', () => {
+      const state = createEmptyMonkState();
+      expect(Object.is(deletedOneImage(state, action), state)).toBe(false);
+    });
+
+    it('should delete image in the state', () => {
+      const state = createEmptyMonkState();
+      const outputId = 'rendered-output-id-test';
+      const damageId = 'damage-id-test';
+      const partId = 'part-id-test';
+      const viewId = 'view-id-test';
+      state.inspections.push({
+        id: action.payload.inspectionId,
+        images: [action.payload.imageId] as string[],
+      } as Inspection);
+      state.images.push({
+        id: action.payload.imageId,
+        inspectionId: action.payload.inspectionId,
+        views: [viewId],
+        renderedOutputs: [outputId],
+      } as Image);
+      state.damages.push({
+        id: damageId,
+        relatedImages: [action.payload.imageId],
+        inspectionId: action.payload.inspectionId,
+      } as Damage);
+      state.parts.push({
+        id: partId,
+        relatedImages: [action.payload.imageId],
+        inspectionId: action.payload.inspectionId,
+      } as Part);
+      state.renderedOutputs.push({
+        id: outputId,
+        baseImageId: action.payload.imageId,
+      } as RenderedOutput);
+      state.views.push({
+        id: viewId,
+        renderedOutputs: [outputId],
+      } as View);
+      const newState = deletedOneImage(state, action);
+      const inspectionImages = newState.inspections.find(
+        (ins) => ins.id === action.payload.inspectionId,
+      )?.images;
+
+      expect(inspectionImages?.length).toBe(0);
+      expect(inspectionImages).not.toContainEqual(action.payload.imageId);
+      expect(newState.images.length).toBe(0);
+      expect(newState.damages.length).toBe(1);
+      expect(newState.parts.length).toBe(1);
+      expect(newState.views.length).toBe(1);
+      expect(
+        newState.damages.find((damage) => damage.relatedImages.includes(action.payload.imageId)),
+      ).toBeUndefined();
+      expect(
+        newState.parts.find((part) => part.relatedImages.includes(action.payload.imageId)),
+      ).toBeUndefined();
+      expect(newState.renderedOutputs.length).toBe(0);
+      expect(
+        newState.renderedOutputs.find((output) => output.baseImageId === action.payload.imageId),
+      ).toBeUndefined();
+      expect(
+        newState.views.find((view) =>
+          view.renderedOutputs.find((id) => id === action.payload.imageId),
+        ),
+      ).toBeUndefined();
+    });
+  });
+});

packages/common/test/state/reducer.test.ts

@@ -1,5 +1,6 @@
 jest.mock('../../src/state/actions', () => ({
   isCreatedOneImageAction: jest.fn(() => false),
+  isDeletedOneImageAction: jest.fn(() => false),
   isGotOneInspectionAction: jest.fn(() => false),
   isResetStateAction: jest.fn(() => false),
   isUpdatedManyTasksAction: jest.fn(() => false),
@@ -12,6 +13,7 @@ jest.mock('../../src/state/actions', () => ({
   isUpdatedVehicleAction: jest.fn(() => false),
   isGotOneInspectionPdfAction: jest.fn(() => false),
   createdOneImage: jest.fn(() => null),
+  deletedOneImage: jest.fn(() => null),
   gotOneInspection: jest.fn(() => null),
   resetState: jest.fn(() => null),
   updatedManyTasks: jest.fn(() => null),
@@ -27,6 +29,7 @@ jest.mock('../../src/state/actions', () => ({
 
 import {
   createdOneImage,
+  deletedOneImage,
   gotOneInspection,
   createdOnePricing,
   deletedOnePricing,
@@ -37,6 +40,7 @@ import {
   updatedVehicle,
   gotOneInspectionPdf,
   isCreatedOneImageAction,
+  isDeletedOneImageAction,
   isGotOneInspectionAction,
   isResetStateAction,
   isUpdatedManyTasksAction,
@@ -59,6 +63,7 @@ const actions = [
   { matcher: isResetStateAction, handler: resetState, noParams: true },
   { matcher: isGotOneInspectionAction, handler: gotOneInspection },
   { matcher: isCreatedOneImageAction, handler: createdOneImage },
+  { matcher: isDeletedOneImageAction, handler: deletedOneImage },
   { matcher: isUpdatedManyTasksAction, handler: updatedManyTasks },
   { matcher: isCreatedOnePricingAction, handler: createdOnePricing },
   { matcher: isDeletedOnePricingAction, handler: deletedOnePricing },

packages/network/README.md

@@ -70,6 +70,21 @@ been created in the API.
 |-----------|-----------------|----------------------------------------------------------|----------|
 | options   | AddImageOptions | The options used to specify how to upload the image.     | ✔️       |
 
+### deleteImage
+
+```typescript
+import { MonkApi } from '@monkvision/network';
+
+MonkApi.deleteImage(options,apiConfig, dispatch);
+```
+
+Delete an image from an inspection. The resulting action of this request will contain the ID of the image that has
+been deleted in the API.
+
+| Parameter | Type               | Description                                        | Required |
+| ----------|--------------------|----------------------------------------------------|----------|
+| options   | DeleteImageOptions | The options used to specify which image to delete. | ✔️       |
+
 ### updateTaskStatus
 ```typescript
 import { MonkApi } from '@monkvision/network';

packages/network/src/api/api.ts

@@ -5,7 +5,7 @@ import {
   getAllInspections,
   getAllInspectionsCount,
 } from './inspection';
-import { addImage } from './image';
+import { addImage, deleteImage } from './image';
 import { startInspectionTasks, updateTaskStatus } from './task';
 import { getLiveConfig } from './liveConfigs';
 import { updateInspectionVehicle } from './vehicle';
@@ -23,6 +23,7 @@ export const MonkApi = {
   getAllInspectionsCount,
   createInspection,
   addImage,
+  deleteImage,
   updateTaskStatus,
   startInspectionTasks,
   getLiveConfig,

packages/network/src/api/image/requests.ts

@@ -5,6 +5,7 @@ import {
   MonkActionType,
   MonkCreatedOneImageAction,
   vehiclePartLabels,
+  MonkDeletedOneImageAction,
 } from '@monkvision/common';
 import {
   ComplianceOptions,
@@ -15,14 +16,21 @@ import {
   ImageType,
   MonkEntityType,
   MonkPicture,
+  ProgressStatus,
   TaskName,
   TranslationObject,
   VehiclePart,
 } from '@monkvision/types';
 import { v4 } from 'uuid';
 import { labels, sights } from '@monkvision/sights';
 import { getDefaultOptions, MonkApiConfig } from '../config';
-import { ApiCenterOnElement, ApiImage, ApiImagePost, ApiImagePostTask } from '../models';
+import {
+  ApiCenterOnElement,
+  ApiIdColumn,
+  ApiImage,
+  ApiImagePost,
+  ApiImagePostTask,
+} from '../models';
 import { MonkApiResponse } from '../types';
 import { mapApiImage } from './mappers';
 
@@ -593,3 +601,55 @@ export async function addImage(
     throw err;
   }
 }
+
+/**
+ * Options specified when deleting an image from an inspection.
+ */
+export interface DeleteImageOptions {
+  /**
+   * The ID of the inspection to update via the API.
+   */
+  id: string;
+  /**
+   * Image ID that will be deleted.
+   */
+  imageId: string;
+}
+
+/**
+ * Delete an image from an inspection.
+ *
+ * @param options Deletion options for the image.
+ * @param config The API config.
+ * @param [dispatch] Optional MonkState dispatch function that you can pass if you want this request to handle React
+ * state management for you.
+ */
+export async function deleteImage(
+  options: DeleteImageOptions,
+  config: MonkApiConfig,
+  dispatch?: Dispatch<MonkDeletedOneImageAction>,
+): Promise<MonkApiResponse> {
+  const kyOptions = getDefaultOptions(config);
+  try {
+    const response = await ky.delete(`inspections/${options.id}/images/${options.imageId}`, {
+      ...kyOptions,
+      json: { authorized_tasks_statuses: [ProgressStatus.NOT_STARTED] },
+    });
+    const body = await response.json<ApiIdColumn>();
+    dispatch?.({
+      type: MonkActionType.DELETED_ONE_IMAGE,
+      payload: {
+        inspectionId: options.id,
+        imageId: body.id,
+      },
+    });
+    return {
+      id: body.id,
+      response,
+      body,
+    };
+  } catch (err) {
+    console.error(`Failed to delete image: ${(err as Error).message}`);
+    throw err;
+  }
+}