diff --git a/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx index 5ca11f17..f0834341 100644 --- 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 ( []} 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 index b9826f4b..cfe2d170 100644 --- 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) => ({ ...task, - assetsDetail: getTasksAssets(task?.id, allUrls as any[]), outline: { ...task.outline, properties: { @@ -116,12 +104,12 @@ const IndividualProject = () => { {getActiveTabContent( individualProjectActiveTab, projectData as Record, - isProjectDataFetching || isFetching, + isProjectDataFetching, )}
- {isProjectDataFetching || isFetching ? ( + {isProjectDataFetching ? ( ) : ( } />