feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { keepPreviousData } from "@tanstack/react-query"
+import { useState } from "react"
+
+import { trpc } from "@/lib/trpc/client"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+import ClientTable from "./ClientTable"
+import Pagination from "./Pagination"
+
+import { Transactions } from "@/types/components/myPages/myPage/earnAndBurn"
+
+export default function TransactionTable({
+  initialJourneyTransactions,
+}: {
+  initialJourneyTransactions: {
+    data: { transactions: Transactions }
+    meta: { totalPages: number }
+  }
+}) {
+  const limit = 5
+  const [page, setPage] = useState(1)
+  const { data, isFetching, isLoading } =
+    trpc.user.transaction.friendTransactions.useQuery(
+      {
+        limit,
+        page,
+      },
+      {
+        // TODO: fix the initial data issues on page load
+        // initialData: initialJourneyTransactions,
+        placeholderData: keepPreviousData,
+      }
+    )
+
+  return isLoading ? (
+    <LoadingSpinner />
+  ) : (
+    <>
+      <ClientTable transactions={data?.data.transactions || []} />
+      {data && data.meta.totalPages > 1 ? (
+        <Pagination
+          handlePageChange={setPage}
+          pageCount={data.meta.totalPages}
+          isFetching={isFetching}
+          currentPage={page}
+        />
+      ) : null}
+    </>
+  )
+}