Delete images

src/api/buildQuery.js

@@ -190,6 +190,21 @@ const queries = {
     }
   },
 
+  deleteImages: (input) => {
+    return {
+      template: `
+        mutation DeleteImages($input: DeleteImagesInput!) {
+          deleteImages(input: $input) {
+            message
+          }
+        }
+      `,
+      variables: {
+        input
+      }
+    }
+  },
+
   getImages: ({ filters, pageInfo, page }) => ({
     template: `
       query GetImages($input: QueryImagesInput!) {

src/features/images/imagesSlice.js

@@ -240,6 +240,22 @@ export const imagesSlice = createSlice({
       const index = payload;
       state.loadingStates.export.errors.splice(index, 1);
     },
+
+    deleteImagesStart: (state) => {
+      state.loadingStates.images.isLoading = true;
+      state.loadingStates.images.operation = 'deleting';
+      state.loadingStates.images.error = null;
+    },
+
+    deleteImagesSuccess: (state, { payload }) => {
+      state.loadingStates.images.isLoading = false;
+      state.loadingStates.images.operation = null;
+    },
+
+    deleteImagesError: (state, { payload }) => {
+      state.loadingStates.images.isLoading = false;
+      state.loadingStates.images.error = payload;
+    },
   },
 });
 
@@ -268,6 +284,9 @@ export const {
   exportFailure,
   clearExport,
   dismissExportError,
+  deleteImagesStart,
+  deleteImagesSuccess,
+  deleteImagesError,
 } = imagesSlice.actions;
 
 // fetchImages thunk
@@ -451,6 +470,29 @@ export const getExportStatus = (documentId) => {
   };
 };
 
+export const deleteImages = (imageIds) => async (dispatch, getState) => {
+  dispatch(deleteImagesStart(imageIds));
+  try {
+    const currentUser = await Auth.currentAuthenticatedUser();
+    const token = currentUser.getSignInUserSession().getIdToken().getJwtToken();
+
+    const projects = getState().projects.projects;
+    const selectedProj = projects.find((proj) => proj.selected);
+
+    if (token && selectedProj) {
+      const r = await call({
+        projId: selectedProj._id,
+        request: 'deleteImages',
+        input: { imageIds },
+      });
+    }
+    dispatch(deleteImagesSuccess(imageIds));
+  } catch (err) {
+    console.log(`error attempting to delete image: `, err);
+    dispatch(deleteImagesError(err));
+  }
+}
+
 export const selectPageInfo = state => state.images.pageInfo;
 export const selectPaginatedField = state => state.images.pageInfo.paginatedField;
 export const selectSortAscending = state => state.images.pageInfo.sortAscending;

src/features/loupe/FullSizeImage.jsx

@@ -1,13 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
+import { Cross2Icon, PlusIcon, TrashIcon } from '@radix-ui/react-icons';
 import { useResizeObserver } from '../../app/utils';
 import { styled } from '../../theme/stitches.config';
 // import { CircleSpinner, SpinnerOverlay } from '../../components/Spinner';
 import { selectUserUsername, selectUserCurrentRoles } from '../user/userSlice';
-import { hasRole, WRITE_OBJECTS_ROLES } from '../../auth/roles';
+import { hasRole, WRITE_OBJECTS_ROLES, WRITE_IMAGES_ROLES } from '../../auth/roles';
 import { drawBboxStart, selectIsDrawingBbox} from './loupeSlice';
 import { selectWorkingImages, labelsValidated, markedEmpty } from '../review/reviewSlice';
+import { deleteImages } from '../images/imagesSlice';
 import { Image } from '../../components/Image';
 import BoundingBox from './BoundingBox';
 import DrawBboxOverlay from './DrawBboxOverlay';
@@ -145,6 +146,8 @@ const FullSizeImage = ({ image, focusIndex }) => {
 
   const handleAddObjectButtonClick = () => dispatch(drawBboxStart());
 
+  const handleDeleteButtonClick = () => dispatch(deleteImages([image._id]));
+
   return (
     <ImageWrapper ref={containerEl} className='full-size-image'>
       {isDrawingBbox &&
@@ -192,13 +195,26 @@ const FullSizeImage = ({ image, focusIndex }) => {
             </ContextMenuItemIconLeft>
             Mark empty
           </ContextMenuItem>
+          {hasRole(userRoles, WRITE_IMAGES_ROLES) &&
+            <ContextMenuItem
+              onSelect={handleDeleteButtonClick}
+            >
+              <ContextMenuItemIconLeft>
+                <TrashIcon />
+              </ContextMenuItemIconLeft>
+              Delete
+            </ContextMenuItem>
+          }
         </ContextMenuContent>
       </ContextMenu>
       <ShareImage>
         <ShareImageButton imageId={image._id}/>
       </ShareImage>
       {hasRole(userRoles, WRITE_OBJECTS_ROLES) &&
         <EditObjectButtons>
+          <EditObjectButton onClick={handleDeleteButtonClick}>
+            <TrashIcon /> Delete
+          </EditObjectButton>
           <EditObjectButton onClick={handleMarkEmptyButtonClick}>
             <Cross2Icon /> Mark empty
           </EditObjectButton>
@@ -217,4 +233,4 @@ const FullSizeImage = ({ image, focusIndex }) => {
   );
 };
 
-export default FullSizeImage;
+export default FullSizeImage;

src/features/review/reviewSlice.js

@@ -2,7 +2,7 @@ import { createSlice, createAction } from '@reduxjs/toolkit';
 import { Auth } from 'aws-amplify';
 import { call } from '../../api';
 import { findImage, findObject, findLabel } from '../../app/utils';
-import { getImagesSuccess, clearImages } from '../images/imagesSlice';
+import { getImagesSuccess, clearImages, deleteImagesStart } from '../images/imagesSlice';
 
 const initialState = {
   workingImages: [],
@@ -17,6 +17,11 @@ const initialState = {
       isLoading: false,
       operation: null, /* 'fetching', 'updating', 'deleting' */
       errors: null,
+    },
+    images: {
+      isLoading: false,
+      operation: null, /* 'deleting' */
+      errors: null,
     }
   }
 };
@@ -134,8 +139,7 @@ export const reviewSlice = createSlice({
     dismissLabelsError: (state, { payload }) => {
       const index = payload;
       state.loadingStates.labels.errors.splice(index, 1);
-    },
-
+    }
   },
 
   extraReducers: (builder) => {
@@ -147,6 +151,11 @@ export const reviewSlice = createSlice({
       .addCase(clearImages, (state) => {
         state.workingImages = [];
       })
+      .addCase(deleteImagesStart, (state, { payload }) => {
+        state.workingImages = state.workingImages.filter(
+          ({ _id }) => !payload.includes(_id)
+        );
+      })
   },
 
 });