Merge pull request #456 from hotosm/feat/UI-fixes

Feat/UI fixes

src/frontend/package.json

@@ -9,6 +9,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@react-spring/web": "^9.7.5",
     "@reduxjs/toolkit": "^1.9.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-query": "^4.32.6",

src/frontend/src/App.tsx

@@ -50,6 +50,7 @@ export default function App() {
   // add routes where you dont want navigation bar
   const routesWithoutNavbar = [
     '/',
+    '/tutorials',
     '/login',
     '/forgot-password',
     '/complete-profile',

src/frontend/src/api/tasks.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import {
   getIndividualTask,
-  // getTaskAssetsInfo,
+  getTaskAssetsInfo,
   getTaskWaypoint,
 } from '@Services/tasks';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
@@ -35,16 +35,16 @@ export const useGetIndividualTaskQuery = (
   });
 };
 
-// export const useGetTaskAssetsInfo = (
-//   projectId: string,
-//   taskId: string,
-//   queryOptions?: Partial<UseQueryOptions>,
-// ) => {
-//   return useQuery({
-//     queryKey: ['task-assets-info'],
-//     enabled: !!taskId,
-//     queryFn: () => getTaskAssetsInfo(projectId, taskId),
-//     select: (res: any) => res.data,
-//     ...queryOptions,
-//   });
-// };
+export const useGetTaskAssetsInfo = (
+  projectId: string,
+  taskId: string,
+  queryOptions?: Partial<UseQueryOptions>,
+) => {
+  return useQuery({
+    queryKey: ['task-assets-info'],
+    enabled: !!taskId,
+    queryFn: () => getTaskAssetsInfo(projectId, taskId),
+    select: (res: any) => res.data,
+    ...queryOptions,
+  });
+};

src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx

@@ -2,7 +2,11 @@ import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { toast } from 'react-toastify';
-import { useGetIndividualTaskQuery, useGetTaskWaypointQuery } from '@Api/tasks';
+import {
+  useGetIndividualTaskQuery,
+  useGetTaskAssetsInfo,
+  useGetTaskWaypointQuery,
+} from '@Api/tasks';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { postProcessImagery } from '@Services/tasks';
 import { formatString } from '@Utils/index';
@@ -12,7 +16,7 @@ import SwitchTab from '@Components/common/SwitchTab';
 import {
   resetFilesExifData,
   setSelectedTaskDetailToViewOrthophoto,
-  setTaskAssetsInformation,
+  // setTaskAssetsInformation,
   setUploadedImagesType,
 } from '@Store/actions/droneOperatorTask';
 import { useTypedSelector } from '@Store/hooks';
@@ -51,6 +55,14 @@ const DescriptionBox = () => {
     },
   );
 
+  const {
+    data: taskAssetsInformation,
+    // isFetching: taskAssetsInfoLoading,
+  }: Record<string, any> = useGetTaskAssetsInfo(
+    projectId as string,
+    taskId as string,
+  );
+
   const { mutate: updateStatus, isLoading: statusUpdating } = useMutation<
     any,
     any,
@@ -169,27 +181,27 @@ const DescriptionBox = () => {
               },
             ],
           },
-          {
-            total_image_uploaded: taskData?.total_image_uploaded || 0,
-            assets_url: taskData?.assets_url,
-            state: taskData?.state,
-          },
+          // {
+          //   total_image_uploaded: taskData?.total_image_uploaded || 0,
+          //   assets_url: taskData?.assets_url,
+          //   state: taskData?.state,
+          // },
         ];
       },
     });
 
-  const taskAssetsInformation = useMemo(() => {
-    if (!taskDescription) return {};
-    dispatch(setTaskAssetsInformation(taskDescription?.[2]));
-    return taskDescription?.[2];
-  }, [taskDescription, dispatch]);
+  // const taskAssetsInformation = useMemo(() => {
+  //   if (!taskDescription) return {};
+  //   dispatch(setTaskAssetsInformation(taskDescription?.[2]));
+  //   return taskDescription?.[2];
+  // }, [taskDescription, dispatch]);
 
   const handleDownloadResult = () => {
     if (!taskAssetsInformation?.assets_url) return;
     try {
       const link = document.createElement('a');
       link.href = taskAssetsInformation?.assets_url;
-      link.download = `${projectId}-${taskId}.tif`;
+      link.setAttribute('download', '');
       document.body.appendChild(link);
       link.click();
       link.remove();
@@ -215,20 +227,20 @@ const DescriptionBox = () => {
         ))}
       </div>
 
-      {taskAssetsInformation?.total_image_uploaded === 0 && (
+      {taskAssetsInformation?.image_count === 0 && (
         <QuestionBox
           setFlyable={setFlyable}
           flyable={flyable}
-          haveNoImages={taskAssetsInformation?.total_image_uploaded === 0}
+          haveNoImages={taskAssetsInformation?.image_count === 0}
         />
       )}
-      {taskAssetsInformation?.total_image_uploaded > 0 && (
+      {taskAssetsInformation?.image_count > 0 && (
         <div className="naxatw-flex naxatw-flex-col naxatw-gap-5">
           <UploadsInformation
             data={[
               {
                 name: 'Image count',
-                value: taskAssetsInformation?.total_image_uploaded,
+                value: taskAssetsInformation?.image_count,
               },
               {
                 name: 'Orthophoto available',

src/frontend/src/components/DroneOperatorTask/MapSection/MapSection.tsx

@@ -15,7 +15,11 @@ import getBbox from '@turf/bbox';
 import { point } from '@turf/helpers';
 import { coordAll } from '@turf/meta';
 import { useTypedSelector } from '@Store/hooks';
-import { useGetIndividualTaskQuery, useGetTaskWaypointQuery } from '@Api/tasks';
+import {
+  useGetIndividualTaskQuery,
+  useGetTaskAssetsInfo,
+  useGetTaskWaypointQuery,
+} from '@Api/tasks';
 import { postTaskWaypoint } from '@Services/tasks';
 import { useMapLibreGLMap } from '@Components/common/MapLibreComponents';
 import { GeojsonType } from '@Components/common/MapLibreComponents/types';
@@ -76,9 +80,9 @@ const MapSection = ({ className }: { className?: string }) => {
   const newTakeOffPoint = useTypedSelector(
     state => state.droneOperatorTask.selectedTakeOffPoint,
   );
-  const taskAssetsInformation = useTypedSelector(
-    state => state.droneOperatorTask.taskAssetsInformation,
-  );
+  // const taskAssetsInformation = useTypedSelector(
+  //   state => state.droneOperatorTask.taskAssetsInformation,
+  // );
   const rotatedFlightPlanData = useTypedSelector(
     state => state.droneOperatorTask.rotatedFlightPlan,
   );
@@ -137,6 +141,14 @@ const MapSection = ({ className }: { className?: string }) => {
       },
     );
 
+  const {
+    data: taskAssetsInformation,
+    // isFetching: taskAssetsInfoLoading,
+  }: Record<string, any> = useGetTaskAssetsInfo(
+    projectId as string,
+    taskId as string,
+  );
+
   const { mutate: postWaypoint, isLoading: isUpdatingTakeOffPoint } =
     useMutation<any, any, any, unknown>({
       mutationFn: postTaskWaypoint,