Delete images

src/api/buildQuery.js

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

src/features/loupe/FullSizeImage.jsx

@@ -1,13 +1,13 @@
 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 { drawBboxStart, selectIsDrawingBbox} from './loupeSlice';
-import { selectWorkingImages, labelsValidated, markedEmpty } from '../review/reviewSlice';
+import { selectWorkingImages, labelsValidated, markedEmpty, deleteImage } from '../review/reviewSlice';
 import { Image } from '../../components/Image';
 import BoundingBox from './BoundingBox';
 import DrawBboxOverlay from './DrawBboxOverlay';
@@ -145,6 +145,8 @@ const FullSizeImage = ({ image, focusIndex }) => {
 
   const handleAddObjectButtonClick = () => dispatch(drawBboxStart());
 
+  const handleDeleteButtonClick = () => dispatch(deleteImage(image._id));
+
   return (
     <ImageWrapper ref={containerEl} className='full-size-image'>
       {isDrawingBbox &&
@@ -192,13 +194,24 @@ const FullSizeImage = ({ image, focusIndex }) => {
             </ContextMenuItemIconLeft>
             Mark empty
           </ContextMenuItem>
+          <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 +230,4 @@ const FullSizeImage = ({ image, focusIndex }) => {
   );
 };
 
-export default FullSizeImage;
+export default FullSizeImage;

src/features/review/reviewSlice.js

@@ -17,6 +17,11 @@ const initialState = {
       isLoading: false,
       operation: null, /* 'fetching', 'updating', 'deleting' */
       errors: null,
+    },
+    images: {
+      isLoading: false,
+      operation: null, /* 'deleting' */
+      errors: null,
     }
   }
 };
@@ -136,6 +141,24 @@ export const reviewSlice = createSlice({
       state.loadingStates.labels.errors.splice(index, 1);
     },
 
+    deleteImageStart: (state) => {
+      state.loadingStates.images.isLoading = true;
+      state.loadingStates.images.operation = 'deleting';
+      state.loadingStates.images.error = null;
+    },
+
+    deleteImageSuccess: (state, { payload }) => {
+      state.workingImages = state.workingImages.filter(
+        ({ _id }) => _id !== payload
+      );
+      state.loadingStates.images.isLoading = false;
+      state.loadingStates.images.operation = null;
+    },
+
+    deleteImageError: (state, { payload }) => {
+      state.loadingStates.images.isLoading = false;
+      state.loadingStates.images.error = payload;
+    },
   },
 
   extraReducers: (builder) => {
@@ -165,8 +188,33 @@ export const {
   editLabelFailure,
   editLabelSuccess,
   dismissLabelsError,
+  deleteImageStart,
+  deleteImageSuccess,
 } = reviewSlice.actions;
 
+export const deleteImage = (imageId) => async (dispatch, getState) => {
+  dispatch(deleteImageStart());
+  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: 'deleteImage',
+        input: { imageId },
+      });
+    }
+    dispatch(deleteImageSuccess(imageId));
+  } catch (err) {
+    console.log(`error attempting to delete image: `, err);
+    dispatch(deleteImageError(err));
+  }
+}
+
 // editLabel thunk
 export const editLabel = (operation, entity, payload, projId) => {
   return async (dispatch, getState) => {