feat: add DealAssociatedDealsTable component and integrate into DealsRoute for associated deals display

Author: ErwanDecoster

src/modules/deals/deal/DealAssociatedDealsTable.tsx

@@ -0,0 +1,84 @@
+import { DETAIL_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
+import { execute } from '@/graphql/poco/execute';
+import { useQuery } from '@tanstack/react-query';
+import { DataTable } from '@/components/DataTable';
+import { PaginatedNavigation } from '@/components/PaginatedNavigation';
+import { usePageParam } from '@/hooks/usePageParam';
+import { ErrorAlert } from '@/modules/ErrorAlert';
+import { columns } from '@/modules/deals/dealsTable/columns';
+import useUserStore from '@/stores/useUser.store';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { dealAssociatedDealsQuery } from './dealAssociatedDealsQuery';
+
+function useDealAssociatedDealsData({
+  dealId,
+  currentPage,
+}: {
+  dealId: string;
+  currentPage: number;
+}) {
+  const { chainId } = useUserStore();
+  const skip = currentPage * DETAIL_TABLE_LENGTH;
+  const nextSkip = skip + DETAIL_TABLE_LENGTH;
+
+  const queryKey = [chainId, 'deal', 'associatedDeals', dealId, currentPage];
+  const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
+    {
+      queryKey,
+      queryFn: () =>
+        execute(dealAssociatedDealsQuery, chainId, {
+          length: DETAIL_TABLE_LENGTH,
+          skip,
+          nextSkip,
+          dealId,
+        }),
+      refetchInterval: TABLE_REFETCH_INTERVAL,
+      placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+    }
+  );
+  const associatedDeals = data?.deal?.requestorder?.deals ?? [];
+  const hasNextPage = (associatedDeals.dealsHasNext?.length ?? 0) > 0;
+  const additionalPages = hasNextPage ? 1 : 0;
+
+  const formattedAssociatedDeal =
+    associatedDeals.map((associatedDeal) => ({
+      ...associatedDeal,
+      destination: `/deal/${associatedDeal.dealid}`,
+    })) ?? [];
+
+  return {
+    data: formattedAssociatedDeal,
+    isLoading,
+    isRefetching,
+    isError,
+    additionalPages,
+    hasPastError: isError || errorUpdateCount > 0,
+  };
+}
+
+export function DealAssociatedDealsTable({ dealId }: { dealId: string }) {
+  const [currentPage, setCurrentPage] = usePageParam('dealAssociatedDealsPage');
+  const {
+    data: associatedDeals,
+    additionalPages,
+    hasPastError,
+  } = useDealAssociatedDealsData({
+    dealId,
+    currentPage,
+  });
+
+  return (
+    <div className="space-y-6">
+      {hasPastError && !associatedDeals.length ? (
+        <ErrorAlert message="An error occurred during deal associatedDeals loading." />
+      ) : (
+        <DataTable columns={columns} data={associatedDeals} />
+      )}
+      <PaginatedNavigation
+        currentPage={currentPage}
+        totalPages={currentPage + additionalPages}
+        onPageChange={setCurrentPage}
+      />
+    </div>
+  );
+}

src/modules/deals/deal/dealAssociatedDealsQuery.ts

@@ -0,0 +1,64 @@
+import { graphql } from '@/graphql/poco/gql';
+
+export const dealAssociatedDealsQuery = graphql(`
+  query DealAssociatedDeals(
+    $length: Int!
+    $skip: Int!
+    $nextSkip: Int!
+    $dealId: ID!
+  ) {
+    deal(id: $dealId) {
+      requestorder {
+        deals(where: { id_not: $dealId }, first: $length, skip: $skip) {
+          dealid: id
+          timestamp
+          startTime
+          app {
+            address: id
+            name
+          }
+          dataset {
+            address: id
+            name
+          }
+          workerpool {
+            address: id
+            description
+          }
+          beneficiary {
+            address: id
+          }
+          callback {
+            address: id
+          }
+          appPrice
+          datasetPrice
+          workerpoolPrice
+          params
+          tag
+          trust
+          category {
+            catid: id
+            name
+            workClockTimeRef
+            description
+          }
+          botSize
+          botFirst
+          completedTasksCount
+          claimedTasksCount
+          requester {
+            address: id
+          }
+        }
+        dealsHasNext: deals(
+          first: 1
+          where: { id_not: $dealId }
+          skip: $nextSkip
+        ) {
+          id
+        }
+      }
+    }
+  }
+`);

src/routes/$chainSlug/_layout/deal/$dealId.tsx

@@ -9,6 +9,7 @@ import { useTabParam } from '@/hooks/usePageParam';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { Tabs } from '@/modules/Tabs';
+import { DealAssociatedDealsTable } from '@/modules/deals/deal/DealAssociatedDealsTable';
 import { DealBreadcrumbs } from '@/modules/deals/deal/DealBreadcrumbs';
 import { DealTasksTable } from '@/modules/deals/deal/DealTasksTable';
 import { buildDealDetails } from '@/modules/deals/deal/buildDealDetails';
@@ -56,7 +57,7 @@ function useDealData(dealId: string, chainId: number) {
 }
 
 function DealsRoute() {
-  const tabLabels = ['DETAILS', 'TASKS'];
+  const tabLabels = ['DETAILS', 'TASKS', 'ASSOCIATED DEALS'];
   const [currentTab, setCurrentTab] = useTabParam('dealTab', tabLabels, 0);
   const { chainId, isConnected } = useUserStore();
   const { dealId } = Route.useParams();
@@ -123,6 +124,7 @@ function DealsRoute() {
             <DetailsTable details={dealDetails || {}} />
           ))}
         {currentTab === 1 && <DealTasksTable dealId={dealId} />}
+        {currentTab === 2 && <DealAssociatedDealsTable dealId={dealId} />}
       </div>
     </div>
   );