Merge pull request #287 from hotosm/feat/update-assets-download-url

feat(project-description): call assets details api on contribution tab
hotosm · Oct 14, 2024 · ed40275 · ed40275
2 parents 18a114a + deee39d
commit ed40275
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx
@@ -1,7 +1,9 @@
+import { useGetAllAssetsUrlQuery } from '@Api/projects';
 import DataTable from '@Components/common/DataTable';
 import Icon from '@Components/common/Icon';
 import { useTypedSelector } from '@Store/hooks';
 import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 const contributionsDataColumns = [
@@ -55,24 +57,35 @@ const contributionsDataColumns = [
 ];
 
 export default function TableSection({ isFetching }: { isFetching: boolean }) {
+  const { id } = useParams();
   const tasksData = useTypedSelector(state => state.project.tasksData);
 
+  const { data: allUrls, isFetching: isUrlFetching } = useGetAllAssetsUrlQuery(
+    id as string,
+  );
+
+  const getTasksAssets = (taskID: string, assetsList: any[]) => {
+    if (!assetsList || !taskID) return null;
+    return assetsList.find((assets: any) => assets?.task_id === taskID);
+  };
+
   const taskDataForTable = useMemo(() => {
-    if (!tasksData) return [];
+    if (!tasksData || isUrlFetching) return [];
     return tasksData?.reduce((acc: any, curr: any) => {
       if (!curr?.state || curr?.state === 'UNLOCKED_TO_MAP') return acc;
+      const selectedAssetsDetails = getTasksAssets(curr?.id, allUrls as any[]);
       return [
         ...acc,
         {
           user: curr?.name || '-',
           task_mapped: `Task# ${curr?.project_task_index}`,
           task_state: curr?.state,
-          assets_url: curr?.assetsDetail?.assets_url,
-          image_count: curr?.assetsDetail?.image_count,
+          assets_url: selectedAssetsDetails?.assets_url,
+          image_count: selectedAssetsDetails?.image_count,
         },
       ];
     }, []);
-  }, [tasksData]);
+  }, [tasksData, allUrls, isUrlFetching]);
 
   return (
     <DataTable
@@ -82,7 +95,7 @@ export default function TableSection({ isFetching }: { isFetching: boolean }) {
       }}
       data={taskDataForTable as Record<string, any>[]}
       withPagination={false}
-      loading={isFetching}
+      loading={isFetching || isUrlFetching}
     />
   );
 }
diff --git a/src/frontend/src/views/IndividualProject/index.tsx b/src/frontend/src/views/IndividualProject/index.tsx
@@ -1,9 +1,6 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import {
-  useGetAllAssetsUrlQuery,
-  useGetProjectsDetailQuery,
-} from '@Api/projects';
+import { useGetProjectsDetailQuery } from '@Api/projects';
 import Tab from '@Components/common/Tabs';
 import {
   Contributions,
@@ -46,23 +43,14 @@ const IndividualProject = () => {
     state => state.project.individualProjectActiveTab,
   );
 
-  const { data: allUrls, isFetching } = useGetAllAssetsUrlQuery(id as string);
-
-  const getTasksAssets = (taskID: string, assetsList: any[]) => {
-    if (!assetsList || !taskID) return null;
-    return assetsList.find((assets: any) => assets?.task_id === taskID);
-  };
-
   const { data: projectData, isFetching: isProjectDataFetching } =
     useGetProjectsDetailQuery(id as string, {
-      enabled: !!allUrls && !isFetching,
       onSuccess: (res: any) => {
         dispatch(
           setProjectState({
             // modify each task geojson and set locked user id and name to properties and save to redux state called taskData
             tasksData: res.tasks?.map((task: Record<string, any>) => ({
               ...task,
-              assetsDetail: getTasksAssets(task?.id, allUrls as any[]),
               outline: {
                 ...task.outline,
                 properties: {
@@ -116,12 +104,12 @@ const IndividualProject = () => {
             {getActiveTabContent(
               individualProjectActiveTab,
               projectData as Record<string, any>,
-              isProjectDataFetching || isFetching,
+              isProjectDataFetching,
             )}
           </div>
         </div>
         <div className="naxatw-order-1 naxatw-h-[calc(100vh-10rem)] naxatw-w-full md:naxatw-order-2">
-          {isProjectDataFetching || isFetching ? (
+          {isProjectDataFetching ? (
             <Skeleton className="naxatw-h-full naxatw-w-full" />
           ) : (
             <MapSection projectData={projectData as Record<string, any>} />