Merge pull request #178 from tnc-ca-geo/image-comments

Image comments

src/api/buildQuery.js

@@ -11,6 +11,13 @@ const wirelessCameraFields = `
   }
 `;
 
+const imageCommentFields = `
+  _id
+  author
+  created
+  comment
+`;
+
 const labelFields = `
   _id
   type
@@ -49,7 +56,11 @@ const imageFields = `
   projectId
   objects {
     ${objectFields}
-  }`;
+  }
+  comments {
+    ${imageCommentFields}
+  }
+`;
 
 const pageInfoFields = `
   previous
@@ -460,15 +471,54 @@ const queries = {
 
   deleteLabels: (input) => ({
     template: `
-      mutation DeleteLabels($input: DeleteLabelsInput!) {
-        deleteLabels(input: $input) {
+      mutation CreateLabels($input: CreateLabelsInput!) {
+        createLabels(input: $input) {
           isOk
         }
       }
     `,
     variables: { input: input },
   }),
 
+  createImageComment: (input) => ({
+    template: `
+      mutation CreateImageComment($input: CreateImageCommentInput!){
+        createImageComment(input: $input) {
+          comments {
+            ${imageCommentFields}
+          }
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
+  updateImageComment: (input) => ({
+    template: `
+      mutation UpdateImageComment($input: UpdateImageCommentInput!){
+        updateImageComment(input: $input) {
+          comments {
+            ${imageCommentFields}
+          }
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
+  deleteImageComment: (input) => ({
+    template: `
+      mutation DeleteImageComment($input: DeleteImageCommentInput!){
+        deleteImageComment(input: $input) {
+          comments {
+            ${imageCommentFields}
+          }
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
   createDeployment: (input) => ({
     template: `
       mutation CreateDeployment($input: CreateDeploymentInput!) {

src/components/ErrorAlerts.jsx

@@ -12,6 +12,8 @@ import {
 import {
   selectLabelsErrors,
   dismissLabelsError,
+  selectCommentsErrors,
+  dismissCommentsError
 } from '../features/review/reviewSlice';
 import { 
   selectProjectsErrors,
@@ -47,6 +49,7 @@ import { selectManageUserErrors, dismissManageUsersError } from '../features/pro
 const ErrorAlerts = () => {
   const dispatch = useDispatch();
   const labelsErrors = useSelector(selectLabelsErrors);
+  const commentsErrors = useSelector(selectCommentsErrors);
   const projectsErrors = useSelector(selectProjectsErrors);
   const viewsErrors = useSelector(selectViewsErrors);
   const depsErrors = useSelector(selectDeploymentsErrors);
@@ -61,6 +64,7 @@ const ErrorAlerts = () => {
 
   const enrichedErrors = [
     enrichErrors(labelsErrors, 'Label Error', 'labels'),
+    enrichErrors(commentsErrors, 'Comment Error', 'comments'),
     enrichErrors(projectsErrors, 'Project Error', 'projects'),
     enrichErrors(viewsErrors, 'View Error', 'views'),
     enrichErrors(depsErrors, 'Deployment Error', 'deployments'),
@@ -119,6 +123,7 @@ const ErrorAlerts = () => {
 
 const dismissErrorActions = {
   'labels': (i) => dismissLabelsError(i),
+  'comments': (i) => dismissCommentsError(i),
   'projects': (i) => dismissProjectsError(i),
   'createProject': (i) => dismissCreateProjectError(i),
   'views': (i) => dismissViewsError(i),

src/features/loupe/LoupeDropdown.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { styled } from '../../theme/stitches.config';
 import {
   DropdownMenu,
@@ -11,7 +12,7 @@ import IconButton from '../../components/IconButton.jsx';
 import { DotsHorizontalIcon} from '@radix-ui/react-icons';
 import DeleteImagesAlert from './DeleteImagesAlert.jsx';
 import { setDeleteImagesAlertOpen } from '../images/imagesSlice';
-import { useDispatch } from 'react-redux';
+import { editComment } from '../review/reviewSlice';
 
 const StyledDropdownMenuTrigger = styled(DropdownMenuTrigger, {
   position: 'absolute',

src/features/review/reviewSlice.js

@@ -19,6 +19,11 @@ const initialState = {
       isLoading: false,
       operation: null, /* 'fetching', 'updating', 'deleting' */
       errors: null,
+    },
+    comments: {
+      isLoading: false,
+      operation: null, /* 'fetching', 'updating', 'deleting' */
+      errors: null,
     }
   },
   lastAction: null,
@@ -142,9 +147,33 @@ export const reviewSlice = createSlice({
       state.loadingStates.labels.errors = null;
     },
 
+    editCommentStart: (state, { payload }) => { 
+      state.loadingStates.comments.isLoading = true;
+      state.loadingStates.comments.operation = payload;
+    },
+
+    editCommentFailure: (state, { payload }) => {
+      state.loadingStates.comments.isLoading = false;
+      state.loadingStates.comments.operation = null;
+      state.loadingStates.comments.errors = payload;
+    },
+
+    editCommentSuccess: (state, { payload }) => {
+      state.loadingStates.comments.isLoading = false;
+      state.loadingStates.comments.operation = null;
+      state.loadingStates.comments.errors = null;
+      const image = findImage(state.workingImages, payload.imageId);
+      image.comments = payload.comments;
+    },
+
     dismissLabelsError: (state, { payload }) => {
       const index = payload;
       state.loadingStates.labels.errors.splice(index, 1);
+    },
+
+    dismissCommentsError: (state, { payload }) => {
+      const index = payload;
+      state.loadingStates.comments.errors.splice(index, 1);
     }
   },
 
@@ -188,11 +217,15 @@ export const {
   editLabelStart,
   editLabelFailure,
   editLabelSuccess,
+  editCommentStart,
+  editCommentFailure,
+  editCommentSuccess,
   dismissLabelsError,
+  dismissCommentsError
 } = reviewSlice.actions;
 
 // editLabel thunk
-export const editLabel = (operation, entity, payload, projId) => {
+export const editLabel = (operation, entity, payload) => {
   return async (dispatch, getState) => {
     try {
 
@@ -233,6 +266,46 @@ export const editLabel = (operation, entity, payload, projId) => {
   };
 };
 
+// editComment thunk
+export const editComment = (operation, payload, projId) => {
+  return async (dispatch, getState) => {
+    try {
+
+      console.log('editComment - operation: ', operation);
+      console.log('editComment - payload: ', payload);
+
+      if (!operation || !payload) {
+        const msg = `An operation (create, update, or delete) and payload is required`;
+        throw new Error(msg);
+      }
+
+      dispatch(editCommentStart(operation));
+      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 req = `${operation}ImageComment`;
+        console.log('req: ', req);
+
+        const res = await call({
+          projId: selectedProj._id, 
+          request: req,
+          input: payload 
+        });
+        console.log('editComment - res: ', res);
+        const mutation = Object.keys(res)[0];
+        const comments = res[mutation].comments;
+        dispatch(editCommentSuccess({ imageId: payload.imageId, comments }));
+      }
+    } catch (err) {
+      console.log(`error attempting to ${operation}ImageComment: `, err);
+      dispatch(editCommentFailure(err));
+    }
+  };
+};
+
 // Actions only used in middlewares:
 export const incrementFocusIndex = createAction('review/incrementFocusIndex');
 export const incrementImage = createAction('review/incrementImage');
@@ -244,6 +317,7 @@ export const selectFocusIndex = state => state.review.focusIndex;
 export const selectSelectedImageIndices = state => state.review.selectedImageIndices;
 export const selectFocusChangeType = state => state.review.focusChangeType;
 export const selectLabelsErrors = state => state.review.loadingStates.labels.errors;
+export const selectCommentsErrors = state => state.review.loadingStates.comments.errors;
 export const selectLastAction = state => state.review.lastAction;
 export const selectLastCategoryApplied = state => state.review.lastCategoryApplied;
 export const selectSelectedImages = createSelector(