refactor: implement trpc client pattern for EarnAndBurn Journey

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

@@ -0,0 +1,132 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { trpc } from "@/lib/trpc/client"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+import DesktopTable from "./Desktop"
+import MobileTable from "./Mobile"
+
+import styles from "../earnAndBurn.module.css"
+
+import { Transactions } from "@/types/components/myPages/myPage/earnAndBurn"
+
+function PaginationButton({
+  children,
+  isActive,
+  handleClick,
+  disabled,
+}: React.PropsWithChildren<{
+  disabled: boolean
+  isActive?: boolean
+  handleClick: () => void
+}>) {
+  return (
+    <button
+      type={"button"}
+      disabled={disabled}
+      onClick={handleClick}
+      className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
+    >
+      {children}
+    </button>
+  )
+}
+
+function Pagination({
+  pageCount,
+  isFetching,
+  handlePageChange,
+  currentPage,
+}: {
+  pageCount: number
+  isFetching: boolean
+  handlePageChange: (page: number) => void
+  currentPage: number
+}) {
+  const isOnFirstPage = currentPage === 1
+  const isOnLastPage = currentPage === pageCount
+  return (
+    <div className={styles.pagination}>
+      <PaginationButton
+        disabled={isFetching || isOnFirstPage}
+        handleClick={() => {
+          handlePageChange(currentPage - 1)
+        }}
+      >
+        <ChevronRightIcon className={styles.chevronLeft} />
+      </PaginationButton>
+      {[...Array(pageCount)].map((_, idx) => (
+        <PaginationButton
+          isActive={currentPage === idx + 1}
+          disabled={isFetching || currentPage === idx + 1}
+          key={idx}
+          handleClick={() => {
+            handlePageChange(idx + 1)
+          }}
+        >
+          {idx + 1}
+        </PaginationButton>
+      ))}
+      <PaginationButton
+        disabled={isFetching || isOnLastPage}
+        handleClick={() => {
+          handlePageChange(currentPage + 1)
+        }}
+      >
+        <ChevronRightIcon />
+      </PaginationButton>
+    </div>
+  )
+}
+
+export default function TransactionTable({
+  initialJourneyTransactions,
+}: {
+  initialJourneyTransactions: {
+    data: { transactions: Transactions }
+    meta: { totalPages: number }
+  }
+}) {
+  const limit = 5
+  const [page, setPage] = useState(1)
+  // const [currentTransactions, setCurrentTransactions] = useState<Transactions>(
+  //   []
+  // )
+  const { data, isFetching, isLoading } =
+    trpc.user.transaction.friendTransactions.useQuery(
+      {
+        limit,
+        page,
+      },
+      {
+        initialData: initialJourneyTransactions,
+      }
+    )
+
+  // useEffect(() => {
+  //   if (data?.data.transactions) {
+  //     setCurrentTransactions(data.data.transactions)
+  //   }
+  // }, [data?.data.transactions])
+  // const totalPages = data?.meta.totalPages || 0
+  return isLoading ? (
+    <LoadingSpinner />
+  ) : (
+    <>
+      <MobileTable transactions={data?.data.transactions || []} />
+      <DesktopTable transactions={data?.data.transactions || []} />
+      {data && data.meta.totalPages > 1 ? (
+        <Pagination
+          handlePageChange={setPage}
+          pageCount={data.meta.totalPages}
+          isFetching={isFetching}
+          currentPage={page}
+        />
+      ) : null}
+    </>
+  )
+}

components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/index.tsx

@@ -1,124 +1,18 @@
-"use client"
+import { serverClient } from "@/lib/trpc/server"
 
-import { useEffect, useState } from "react"
+import ClientJourney from "./Client"
 
-import { trpc } from "@/lib/trpc/client"
-
-import { ChevronRightIcon } from "@/components/Icons"
-
-import DesktopTable from "./Desktop"
-import MobileTable from "./Mobile"
-
-import styles from "../earnAndBurn.module.css"
-
-import { Transactions } from "@/types/components/myPages/myPage/earnAndBurn"
-
-function PaginationButton({
-  children,
-  isActive,
-  handleClick,
-  disabled,
-}: React.PropsWithChildren<{
-  disabled: boolean
-  isActive?: boolean
-  handleClick: () => void
-}>) {
-  return (
-    <button
-      disabled={disabled}
-      onClick={handleClick}
-      className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
-    >
-      {children}
-    </button>
-  )
-}
-
-function Pagination({
-  pageCount,
-  isFetching,
-  handlePageChange,
-  currentPage,
-}: {
-  pageCount: number
-  isFetching: boolean
-  handlePageChange: (page: number) => void
-  currentPage: number
-}) {
-  const isOnFirstPage = currentPage === 1
-  const isOnLastPage = currentPage === pageCount
-  return (
-    <div className={styles.pagination}>
-      <PaginationButton
-        disabled={isFetching || isOnFirstPage}
-        handleClick={() => {
-          handlePageChange(currentPage - 1)
-        }}
-      >
-        <ChevronRightIcon className={styles.chevronLeft} />
-      </PaginationButton>
-      {[...Array(pageCount)].map((_, idx) => (
-        <PaginationButton
-          isActive={currentPage === idx + 1}
-          disabled={isFetching || currentPage === idx + 1}
-          key={idx}
-          handleClick={() => {
-            handlePageChange(idx + 1)
-          }}
-        >
-          {idx + 1}
-        </PaginationButton>
-      ))}
-      <PaginationButton
-        disabled={isFetching || isOnLastPage}
-        handleClick={() => {
-          handlePageChange(currentPage + 1)
-        }}
-      >
-        <ChevronRightIcon />
-      </PaginationButton>
-    </div>
-  )
-}
-
-export default function TransactionTable() {
-  const limit = 5
-  const [page, setPage] = useState(1)
-  const [totalPages, setTotalPages] = useState(0)
-  const [currentTransactions, setCurrentTransactions] = useState<Transactions>(
-    []
-  )
-  const { data, isFetching, isLoading } =
-    trpc.user.transaction.friendTransactions.useQuery({
-      limit,
-      page,
+export default async function JourneyTable() {
+  const initialJourneyTransactions =
+    await serverClient().user.transaction.friendTransactions({
+      page: 1,
+      limit: 5,
     })
-  useEffect(() => {
-    if (typeof data?.meta.totalPages === "number") {
-      setTotalPages(data?.meta.totalPages)
-    }
-  }, [data?.meta.totalPages])
+  if (!initialJourneyTransactions?.data.transactions.length) {
+    return null
+  }
 
-  useEffect(() => {
-    if (data?.data.transactions) {
-      setCurrentTransactions(data.data.transactions)
-    }
-  }, [data?.data.transactions])
-
-  return !currentTransactions.length ? (
-    "Loading..." // Add loading state table
-  ) : (
-    <>
-      <MobileTable transactions={currentTransactions} />
-      <DesktopTable transactions={currentTransactions} />
-      {totalPages > 1 ? (
-        <Pagination
-          handlePageChange={setPage}
-          pageCount={totalPages}
-          isFetching={isFetching}
-          currentPage={page}
-        />
-      ) : null}
-    </>
+  return (
+    <ClientJourney initialJourneyTransactions={initialJourneyTransactions} />
   )
 }

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -1,5 +1,3 @@
-import { serverClient } from "@/lib/trpc/server"
-
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -13,14 +11,6 @@ export default async function EarnAndBurn({
   subtitle,
   title,
 }: AccountPageComponentProps) {
-  const transactionsData =
-    await serverClient().user.transaction.friendTransactions({
-      limit: 10,
-      page: 1,
-    })
-  if (!transactionsData) {
-    return null
-  }
   return (
     <SectionContainer>
       <SectionHeader title={title} link={link} subtitle={subtitle} />