Merge pull request #359 from hotosm/feat/drone-operator-image-upload-ui

Feat/drone operator image upload UI
hotosm · Nov 27, 2024 · 7c7e576 · 7c7e576
2 parents 7dbbc74 + d31bc79
commit 7c7e576
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { toast } from 'react-toastify';
@@ -14,6 +14,7 @@ import { Button } from '@Components/RadixComponents/Button';
 import { Label } from '@Components/common/FormUI';
 import SwitchTab from '@Components/common/SwitchTab';
 import {
+  resetFilesExifData,
   setSelectedTaskDetailToViewOrthophoto,
   setUploadedImagesType,
 } from '@Store/actions/droneOperatorTask';
@@ -67,6 +68,10 @@ const DescriptionBox = () => {
     },
   });
 
+  useEffect(() => {
+    dispatch(resetFilesExifData());
+  }, [dispatch]);
+
   const { mutate: reStartImageryProcess, isLoading: imageProcessingStarting } =
     useMutation({
       mutationFn: () =>

diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/QuestionBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/QuestionBox/index.tsx
@@ -5,6 +5,7 @@ import { Button } from '@Components/RadixComponents/Button';
 import { setSecondPage } from '@Store/actions/droneOperatorTask';
 import { useTypedDispatch } from '@Store/hooks';
 import { postUnflyableComment } from '@Services/droneOperator';
+import { toast } from 'react-toastify';
 import { useMutation } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import UploadsBox from '../UploadsBox';
@@ -32,26 +33,26 @@ const QuestionBox = ({
     setFlyable(e.target.value);
   }
 
-  const mutation = useMutation(
+  const { mutate: mutateComment, isLoading: commentIsUpdating } = useMutation(
     (data: any) => postUnflyableComment({ projectId, taskId, data }),
     {
       onSuccess: () => {
         // Optionally, refetch queries or show a success message
-        console.log('User created successfully');
+        toast.success('Comment Added successfully');
       },
-      onError: error => {
+      onError: (error: Record<string, any>) => {
         // Handle error
-        console.error('Error creating user:', error);
+        toast.error(error?.message);
       },
     },
   );
   function handleSubmit() {
     if (flyable === 'no') {
       const data = {
         event: 'comment',
-        newComment: comment,
+        comment,
       };
-      mutation.mutate(data);
+      mutateComment(data);
     } else {
       dispatch(setSecondPage(true));
     }
@@ -118,7 +119,7 @@ const QuestionBox = ({
               className="naxatw-w-fit naxatw-bg-[#D73F3F] naxatw-text-[#FFFFFF]"
               onClick={() => handleSubmit()}
               disabled={flyable === 'no' && comment.length < 6}
-              isLoading={mutation.isLoading}
+              isLoading={commentIsUpdating}
             >
               Save
             </Button>

diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/UploadsBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/UploadsBox/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-await-in-loop */
 import { Button } from '@Components/RadixComponents/Button';
 import { toggleModal } from '@Store/actions/common';
-import { setFiles, setFilesExifData } from '@Store/actions/droneOperatorTask';
+import { setFilesExifData } from '@Store/actions/droneOperatorTask';
 import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 import getExifData from '@Utils/getExifData';
 import { toast } from 'react-toastify';
@@ -12,15 +12,16 @@ const UploadsBox = ({
   label?: string;
 }) => {
   const dispatch = useTypedDispatch();
-  const files = useTypedSelector(state => state.droneOperatorTask.files);
+  const files = useTypedSelector(
+    state => state.droneOperatorTask.filesExifData,
+  );
   const handleFileChange = async (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     event.preventDefault();
     const selectedFiles = event.target.files;
     if (!selectedFiles || selectedFiles?.length === 0) return;
     const selectedFilesArray: File[] = Array.from(selectedFiles);
-    dispatch(setFiles(selectedFilesArray));
     try {
       const exifData = await Promise.all(
         selectedFilesArray.map(async (file: File) => {