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

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,77 @@
+import { MonkState } from '../state';
+import { MonkAction, MonkActionType } from './monkAction';
+
+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 },