Get comment CRUD ops working end-to-end

tnc-ca-geo · Dec 18, 2023 · bab4849 · bab4849
1 parent 1b56b93
commit bab4849
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/src/api/buildQuery.js b/src/api/buildQuery.js
@@ -477,7 +477,7 @@ const queries = {
   }),
 
   createImageComment: (input) => ({
-    templaste: `
+    template: `
       mutation CreateImageComment($input: CreateImageCommentInput!){
         createImageComment(input: $input) {
           comment {
@@ -493,7 +493,7 @@ const queries = {
   }),
 
   updateImageComment: (input) => ({
-    templaste: `
+    template: `
       mutation UpdateImageComment($input: UpdateImageCommentInput!){
         updateImageComment(input: $input) {
           comment {
@@ -509,7 +509,7 @@ const queries = {
   }),
 
   deleteImageComment: (input) => ({
-    templaste: `
+    template: `
       mutation DeleteImageComment($input: DeleteImageCommentInput!){
         deleteImageComment(input: $input) {
           message

diff --git a/src/features/loupe/LoupeDropdown.jsx b/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',
@@ -26,6 +27,23 @@ const LoupeDropdown = ({ image }) => {
     dispatch(setDeleteImagesAlertOpen(true));
   };
 
+  // NOTE: just testing image.comments CRUD operations
+  const handleCreateCommentItemClick = () => {
+    const comment = 'TEST COMMENT 2';
+    dispatch(editComment('create', { comment, imageId: image._id }));
+  };
+
+  const handleUpdateCommentItemClick = () => {
+    const _id = 'b5f8c278-c631-4338-a76c-10b358422646';
+    const comment = 'UPDATED COMMENT';
+    dispatch(editComment('update', { comment, id: _id, imageId: image._id }));
+  };
+
+  const handleDeleteCommentItemClick = () => {
+    const _id = 'b5f8c278-c631-4338-a76c-10b358422646';
+    dispatch(editComment('delete', { id: _id, imageId: image._id }));
+  };
+
   return (
     <DropdownMenu>
       <StyledDropdownMenuTrigger asChild>
@@ -37,6 +55,15 @@ const LoupeDropdown = ({ image }) => {
         <DropdownMenuItem onClick={handleDeleteImageItemClick}>
           Delete Image
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleCreateCommentItemClick}>
+          Create Comment
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleUpdateCommentItemClick}>
+          Update Comment
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleDeleteCommentItemClick}>
+          Delete Comment
+        </DropdownMenuItem>
         <DropdownMenuArrow offset={12} />
       </DropdownMenuContent>
 

diff --git a/src/features/review/reviewSlice.js b/src/features/review/reviewSlice.js
@@ -129,9 +129,6 @@ export const reviewSlice = createSlice({
       state.lastAction = 'marked-empty';
     },
 
-    // TODO: add edit comments handlers to add comments directly to images in state immediately? 
-    // or update image.comments after we have a response from the backend? 
-
     editLabelStart: (state) => { 
       state.loadingStates.labels.isLoading = true;
       state.loadingStates.labels.operation = 'updating';
@@ -165,6 +162,8 @@ export const reviewSlice = createSlice({
       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 }) => {
@@ -274,12 +273,7 @@ export const editComment = (operation, payload, projId) => {
     try {
 
       console.log('editComment - operation: ', operation);
-      console.log('editComment - operation: ', payload);
-      // if ((payload.updates && !payload.updates.length) || 
-      //     (payload.objects && !payload.objects.length) ||
-      //     (payload.labels && !payload.labels.length)) {
-      //     return;
-      // }
+      console.log('editComment - payload: ', payload);
 
       if (!operation || !payload) {
         const msg = `An operation (create, update, or delete) and payload is required`;
@@ -294,17 +288,18 @@ export const editComment = (operation, payload, projId) => {
 
       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 image = res[mutation].image;
-        // dispatch(editCommentSuccess(image));
+        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));