feat: add Datasets route with data fetching, pagination, and table columns

Author: ErwanDecoster

src/modules/datasets/DatasetsPreviewTable.tsx

@@ -1,6 +1,7 @@
 import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/execute';
 import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
 import { Box, LoaderCircle, Terminal } from 'lucide-react';
 import { CircularLoader } from '@/components/CircularLoader';
 import CopyButton from '@/components/CopyButton';
@@ -41,8 +42,8 @@ export function DatasetsPreviewTable() {
             <LoaderCircle className="animate-spin" />
           )}
         </h2>
-        <Button variant="link" className="-mr-4">
-          View all
+        <Button variant="link" className="-mr-4" asChild>
+          <Link to="/datasets">View all</Link>
         </Button>
       </div>
       <Table>

src/modules/datasets/datasetsTable/columns.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { DatasetsQuery } from '@/graphql/graphql';
+import { ColumnDef } from '@tanstack/react-table';
+import CopyButton from '@/components/CopyButton';
+import { formatElapsedTime } from '@/utils/formatElapsedTime';
+import { truncateAddress } from '@/utils/truncateAddress';
+
+type Dataset = DatasetsQuery['datasets'][number];
+
+export const columns: ColumnDef<Dataset>[] = [
+  {
+    accessorKey: 'datasetAddress',
+    header: 'Dataset',
+    cell: ({ row }) => {
+      const datasetAddress = row.original.address;
+      return (
+        <CopyButton
+          displayText={truncateAddress(datasetAddress, {
+            startLen: 8,
+          })}
+          textToCopy={datasetAddress}
+        />
+      );
+    },
+  },
+  {
+    accessorKey: 'datasetName',
+    header: 'Name',
+    cell: ({ row }) => {
+      const datasetName = row.original.name;
+      return datasetName ? (
+        <div className="w-36 overflow-hidden overflow-ellipsis">
+          {datasetName}
+        </div>
+      ) : (
+        <span className="text-muted-foreground">No dataset name</span>
+      );
+    },
+  },
+  {
+    accessorKey: 'owner.address',
+    header: 'Owner',
+    cell: ({ row }) => {
+      const ownerAddress = row.original.owner.address;
+      return (
+        <CopyButton
+          displayText={truncateAddress(ownerAddress, {
+            startLen: 8,
+          })}
+          textToCopy={ownerAddress}
+        />
+      );
+    },
+  },
+  {
+    accessorKey: 'tx_hash',
+    header: 'TxHash',
+    cell: ({ row }) => {
+      const txHash = row.original.transfers[0].transaction.txHash;
+      return (
+        <CopyButton
+          displayText={truncateAddress(txHash, {
+            startLen: 8,
+          })}
+          textToCopy={txHash}
+        />
+      );
+    },
+  },
+  {
+    accessorKey: 'time',
+    header: 'Time',
+    cell: ({ row }) => {
+      const timestamp = row.original.timestamp;
+      return <div className="min-w-32">{formatElapsedTime(timestamp)}</div>;
+    },
+  },
+];

src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as IndexImport } from './routes/index'
 import { Route as WorkerpoolsIndexImport } from './routes/workerpools/index'
 import { Route as TasksIndexImport } from './routes/tasks/index'
 import { Route as DealsIndexImport } from './routes/deals/index'
+import { Route as DatasetsIndexImport } from './routes/datasets/index'
 import { Route as AppsIndexImport } from './routes/apps/index'
 
 // Create/Update Routes
@@ -43,6 +44,12 @@ const DealsIndexRoute = DealsIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const DatasetsIndexRoute = DatasetsIndexImport.update({
+  id: '/datasets/',
+  path: '/datasets/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const AppsIndexRoute = AppsIndexImport.update({
   id: '/apps/',
   path: '/apps/',
@@ -67,6 +74,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppsIndexImport
       parentRoute: typeof rootRoute
     }
+    '/datasets/': {
+      id: '/datasets/'
+      path: '/datasets'
+      fullPath: '/datasets'
+      preLoaderRoute: typeof DatasetsIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/deals/': {
       id: '/deals/'
       path: '/deals'
@@ -96,6 +110,7 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/apps': typeof AppsIndexRoute
+  '/datasets': typeof DatasetsIndexRoute
   '/deals': typeof DealsIndexRoute
   '/tasks': typeof TasksIndexRoute
   '/workerpools': typeof WorkerpoolsIndexRoute
@@ -104,6 +119,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/apps': typeof AppsIndexRoute
+  '/datasets': typeof DatasetsIndexRoute
   '/deals': typeof DealsIndexRoute
   '/tasks': typeof TasksIndexRoute
   '/workerpools': typeof WorkerpoolsIndexRoute
@@ -113,23 +129,32 @@ export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/apps/': typeof AppsIndexRoute
+  '/datasets/': typeof DatasetsIndexRoute
   '/deals/': typeof DealsIndexRoute
   '/tasks/': typeof TasksIndexRoute
   '/workerpools/': typeof WorkerpoolsIndexRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/apps' | '/deals' | '/tasks' | '/workerpools'
+  fullPaths: '/' | '/apps' | '/datasets' | '/deals' | '/tasks' | '/workerpools'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/apps' | '/deals' | '/tasks' | '/workerpools'
-  id: '__root__' | '/' | '/apps/' | '/deals/' | '/tasks/' | '/workerpools/'
+  to: '/' | '/apps' | '/datasets' | '/deals' | '/tasks' | '/workerpools'
+  id:
+    | '__root__'
+    | '/'
+    | '/apps/'
+    | '/datasets/'
+    | '/deals/'
+    | '/tasks/'
+    | '/workerpools/'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AppsIndexRoute: typeof AppsIndexRoute
+  DatasetsIndexRoute: typeof DatasetsIndexRoute
   DealsIndexRoute: typeof DealsIndexRoute
   TasksIndexRoute: typeof TasksIndexRoute
   WorkerpoolsIndexRoute: typeof WorkerpoolsIndexRoute
@@ -138,6 +163,7 @@ export interface RootRouteChildren {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AppsIndexRoute: AppsIndexRoute,
+  DatasetsIndexRoute: DatasetsIndexRoute,
   DealsIndexRoute: DealsIndexRoute,
   TasksIndexRoute: TasksIndexRoute,
   WorkerpoolsIndexRoute: WorkerpoolsIndexRoute,
@@ -155,6 +181,7 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/apps/",
+        "/datasets/",
         "/deals/",
         "/tasks/",
         "/workerpools/"
@@ -166,6 +193,9 @@ export const routeTree = rootRoute
     "/apps/": {
       "filePath": "apps/index.tsx"
     },
+    "/datasets/": {
+      "filePath": "datasets/index.tsx"
+    },
     "/deals/": {
       "filePath": "deals/index.tsx"
     },

src/routes/datasets/index.tsx

@@ -0,0 +1,63 @@
+import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
+import { execute } from '@/graphql/execute';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { Box, LoaderCircle } from 'lucide-react';
+import { useState } from 'react';
+import { PaginatedNavigation } from '@/components/PaginatedNavigation.tsx';
+import { DataTable } from '@/components/data-table';
+import { SearcherBar } from '@/modules/SearcherBar';
+import { datasetsQuery } from '@/modules/datasets/datasetsQuery';
+import { columns } from '@/modules/datasets/datasetsTable/columns';
+
+export const Route = createFileRoute('/datasets/')({
+  component: DatasetsRoute,
+});
+
+function useDatasetsData(currentPage: number) {
+  const skip = currentPage * TABLE_LENGTH;
+
+  const { data, isFetching, isPending, isError } = useQuery({
+    queryKey: ['datasets', currentPage],
+    queryFn: () => execute(datasetsQuery, { length: TABLE_LENGTH, skip }),
+    refetchInterval: TABLE_REFETCH_INTERVAL,
+    placeholderData: keepPreviousData,
+  });
+
+  const formattedData =
+    data?.datasets.map((dataset) => ({
+      ...dataset,
+      destination: `/datasets/${dataset.address}`,
+    })) ?? [];
+
+  return { data: formattedData, isFetching, isPending, isError };
+}
+
+function DatasetsRoute() {
+  const [currentPage, setCurrentPage] = useState(0);
+  const { data, isFetching, isPending, isError } = useDatasetsData(currentPage);
+
+  return (
+    <div className="mt-8 grid gap-6">
+      <SearcherBar className="py-16" />
+
+      <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
+        <Box size="20" />
+        Datasets
+        {data.length > 0 && isError && (
+          <span className="text-muted-foreground text-sm font-light">
+            (outdated)
+          </span>
+        )}
+        {isFetching && isPending && <LoaderCircle className="animate-spin" />}
+      </h1>
+
+      <DataTable columns={columns} data={data} />
+      <PaginatedNavigation
+        currentPage={currentPage}
+        totalPages={currentPage + 2}
+        onPageChange={setCurrentPage}
+      />
+    </div>
+  );
+}