feat: add missing deals page, lost during merge

Author: ErwanDecoster

src/routes/$chainSlug/_layout/deals.tsx

@@ -1,9 +1,113 @@
+import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
+import { execute } from '@/graphql/execute';
+import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
+import { Box, LoaderCircle, Terminal } from 'lucide-react';
+import { useState } from 'react';
+import { DataTable } from '@/components/DataTable';
+import { PaginatedNavigation } from '@/components/PaginatedNavigation';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { SearcherBar } from '@/modules/SearcherBar';
+import { dealsQuery } from '@/modules/deals/dealsQuery';
+import { columns } from '@/modules/deals/dealsTable/columns';
+import { nextDealsQuery } from '@/modules/deals/nextDealsQuery';
+import useUserStore from '@/stores/useUser.store';
 
 export const Route = createFileRoute('/$chainSlug/_layout/deals')({
-  component: RouteComponent,
+  component: DealsRoute,
 });
 
-function RouteComponent() {
-  return <div>Hello "/deals"!</div>;
+function useDealsData(currentPage: number) {
+  const { chainId } = useUserStore();
+  const skip = currentPage * TABLE_LENGTH;
+
+  const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
+    {
+      queryKey: [chainId, 'deals', currentPage],
+      queryFn: () =>
+        execute(dealsQuery, chainId, { length: TABLE_LENGTH, skip }),
+      refetchInterval: TABLE_REFETCH_INTERVAL,
+    }
+  );
+
+  const { data: nextData } = useQuery({
+    queryKey: [chainId, 'deals-next', currentPage],
+    queryFn: () =>
+      execute(nextDealsQuery, chainId, {
+        length: TABLE_LENGTH * 2,
+        skip: (currentPage + 1) * TABLE_LENGTH,
+      }),
+    refetchInterval: TABLE_REFETCH_INTERVAL,
+  });
+
+  const nextDeals = nextData?.deals ?? [];
+
+  const additionalPages = Math.ceil(nextDeals.length / TABLE_LENGTH);
+
+  const formattedData =
+    data?.deals.map((deal) => ({
+      ...deal,
+      destination: `/deal/${deal.dealid}`,
+    })) ?? [];
+
+  return {
+    data: formattedData,
+    isLoading,
+    isRefetching,
+    isError: isError,
+    hasPastError: isError || errorUpdateCount > 0,
+    additionalPages,
+  };
+}
+
+function DealsRoute() {
+  const [currentPage, setCurrentPage] = useState(0);
+  const {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError,
+    additionalPages,
+  } = useDealsData(currentPage);
+
+  return (
+    <div className="mt-8 grid gap-6">
+      <SearcherBar className="py-10" />
+
+      <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
+        <Box size="20" />
+        Deals
+        {data.length > 0 && isError && (
+          <span className="text-muted-foreground text-sm font-light">
+            (outdated)
+          </span>
+        )}
+        {(isLoading || isRefetching) && (
+          <LoaderCircle className="animate-spin" />
+        )}
+      </h1>
+      {hasPastError && !data.length ? (
+        <Alert variant="destructive" className="mx-auto w-fit text-left">
+          <Terminal className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>
+            A error occurred during deals loading.
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <DataTable
+          columns={columns}
+          data={data}
+          tableLength={TABLE_LENGTH}
+          isLoading={isLoading || isRefetching}
+        />
+      )}
+      <PaginatedNavigation
+        currentPage={currentPage + 1}
+        totalPages={currentPage + 1 + additionalPages}
+        onPageChange={(newPage) => setCurrentPage(newPage - 1)}
+      />
+    </div>
+  );
 }