feat: add TaskDatasetsTable component and integrate into task route

Author: ErwanDecoster

src/modules/tasks/task/TaskDatasetsTable.tsx

@@ -0,0 +1,51 @@
+import { DETAIL_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
+import { execute } from '@/graphql/pocoBulk/execute';
+import { useQuery } from '@tanstack/react-query';
+import { DataTable } from '@/components/DataTable';
+import { ErrorAlert } from '@/modules/ErrorAlert';
+import { columns } from '@/modules/datasets/datasetsTable/columns';
+import useUserStore from '@/stores/useUser.store';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { taskDatasetsQuery } from './taskDatasetsPocoBulkQuery';
+
+function useTaskDatasetsData({ taskId }: { taskId: string }) {
+  const { chainId } = useUserStore();
+
+  const queryKey = [chainId, 'task', 'datasets', taskId];
+  const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
+    {
+      queryKey,
+      queryFn: () =>
+        execute(taskDatasetsQuery, chainId, {
+          length: DETAIL_TABLE_LENGTH,
+          taskId,
+        }),
+      refetchInterval: TABLE_REFETCH_INTERVAL,
+      placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+    }
+  );
+
+  const formattedDataset =
+    data?.task?.bulkSlice?.datasets.map((dataset) => ({
+      ...dataset,
+      destination: `/dataset/${dataset.address}`,
+    })) ?? [];
+
+  return {
+    data: formattedDataset,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError: isError || errorUpdateCount > 0,
+  };
+}
+
+export function TaskDatasetsTable({ taskId }: { taskId: string }) {
+  const { data: datasets, hasPastError } = useTaskDatasetsData({ taskId });
+
+  return hasPastError && !datasets.length ? (
+    <ErrorAlert message="An error occurred during task datasets loading." />
+  ) : (
+    <DataTable columns={columns} data={datasets} />
+  );
+}

src/modules/tasks/task/taskDatasetsPocoBulkQuery.ts

@@ -0,0 +1,25 @@
+import { graphql } from '@/graphql/pocoBulk/gql';
+
+export const taskDatasetsQuery = graphql(`
+  query Task($taskId: ID!) {
+    task(id: $taskId) {
+      bulkSlice {
+        datasets(first: 10, orderBy: timestamp, orderDirection: desc, skip: 0) {
+          address: id
+          owner {
+            address: id
+          }
+          timestamp
+          name
+          transfers(orderBy: timestamp, orderDirection: desc) {
+            transaction {
+              txHash: id
+              timestamp
+              blockNumber
+            }
+          }
+        }
+      }
+    }
+  }
+`);

src/routes/$chainSlug/_layout/task/$taskId.tsx

@@ -11,6 +11,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { Tabs } from '@/modules/Tabs';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import { TaskBreadcrumbs } from '@/modules/tasks/task/TaskBreadcrumbs';
+import { TaskDatasetsTable } from '@/modules/tasks/task/TaskDatasetsTable';
 import { TaskRawData } from '@/modules/tasks/task/TaskRawData';
 import { buildTaskDetails } from '@/modules/tasks/task/buildTaskDetails';
 import { taskQuery } from '@/modules/tasks/task/taskQuery';
@@ -67,7 +68,7 @@ function TasksRoute() {
     isValid,
     error,
   } = useTaskData((taskId as string).toLowerCase(), chainId!);
-  const tabLabels = ['DETAILS', 'RAW DATA'];
+  const tabLabels = ['DETAILS', 'RAW DATA', 'DATASETS'];
   const [currentTab, setCurrentTab] = useTabParam('dealTab', tabLabels, 0);
 
   const taskDetails = task ? buildTaskDetails({ task }) : undefined;
@@ -122,6 +123,7 @@ function TasksRoute() {
             taskId={taskId}
           />
         )}
+        {currentTab === 2 && <TaskDatasetsTable taskId={taskId} />}
       </div>
     </div>
   );