fix: remove pagination from friends endpoints since it is no longer supported

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

@@ -1,45 +0,0 @@
-"use client"
-
-import { trpc } from "@/lib/trpc/client"
-
-import DesktopTable from "./Desktop"
-import MobileTable from "./Mobile"
-
-import type {
-  ClientEarnAndBurnProps,
-  TransactionsNonNullResponseObject,
-} from "@/types/components/myPages/myPage/earnAndBurn"
-
-export default function ClientEarnAndBurn({
-  initialData,
-  lang,
-}: ClientEarnAndBurnProps) {
-  /**
-   * desctruct fetchNextPage, hasNextPage once pagination is
-   * possible through API
-   */
-  const { data } = trpc.user.transaction.friendTransactions.useInfiniteQuery(
-    { limit: 5 },
-    {
-      getNextPageParam: (lastPage) => lastPage?.nextCursor,
-      initialData: {
-        pageParams: [undefined, 1],
-        pages: [initialData],
-      },
-    }
-  )
-
-  // TS having a hard time with the filtered type.
-  // This is only temporary as we will not return null
-  // later on when we handle errors appropriately.
-  const filteredTransactions = (data?.pages.filter(
-    (page) => page && page.data
-  ) ?? []) as unknown as TransactionsNonNullResponseObject[]
-  const transactions = filteredTransactions.flatMap((page) => page.data)
-  return (
-    <>
-      <MobileTable lang={lang} transactions={transactions} />
-      <DesktopTable lang={lang} transactions={transactions} />
-    </>
-  )
-}

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

@@ -1,13 +1,13 @@
-import { useIntl } from "react-intl"
-
 import { dt } from "@/lib/dt"
 
+import { getIntl } from "@/i18n"
+
 import styles from "./row.module.css"
 
 import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
-export default function Row({ transaction, lang }: RowProps) {
-  const { formatMessage } = useIntl()
+export default async function Row({ transaction, lang }: RowProps) {
+  const { formatMessage } = await getIntl()
   const description =
     transaction.hotelName && transaction.city
       ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`

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

@@ -1,6 +1,5 @@
-import { useIntl } from "react-intl"
-
 import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
 
 import Row from "./Row"
 
@@ -16,8 +15,8 @@ const tableHeadings = [
   "Points",
 ]
 
-export default function DesktopTable({ lang, transactions }: TableProps) {
-  const { formatMessage } = useIntl()
+export default async function DesktopTable({ lang, transactions }: TableProps) {
+  const { formatMessage } = await getIntl()
   return (
     <div className={styles.container}>
       {transactions.length ? (

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

@@ -1,15 +1,14 @@
-import { useIntl } from "react-intl"
-
 import { dt } from "@/lib/dt"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
 
 import styles from "./mobile.module.css"
 
 import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
-export default function MobileTable({ lang, transactions }: TableProps) {
-  const { formatMessage } = useIntl()
+export default async function MobileTable({ lang, transactions }: TableProps) {
+  const { formatMessage } = await getIntl()
   return (
     <div className={styles.container}>
       <table className={styles.table}>
@@ -42,9 +41,7 @@ export default function MobileTable({ lang, transactions }: TableProps) {
                     {`${transaction.nights} ${formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
                   </span>
                 </td>
-                <td
-                  className={`${styles.mobileTd} ${styles.transactionPoints}`}
-                >
+                <td className={styles.transactionPoints}>
                   {`${transaction.awardPoints} P`}
                 </td>
               </tr>

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

@@ -4,7 +4,8 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
-import ClientEarnAndBurn from "./Client"
+import DesktopTable from "./Desktop"
+import MobileTable from "./Mobile"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
@@ -14,15 +15,16 @@ export default async function EarnAndBurn({
   subtitle,
   title,
 }: AccountPageComponentProps) {
-  const initialTransactions =
-    await serverClient().user.transaction.friendTransactions({ limit: 5 })
-  if (!initialTransactions) {
+  const transactions =
+    await serverClient().user.transaction.friendTransactions()
+  if (!transactions) {
     return null
   }
   return (
     <SectionContainer>
       <SectionHeader title={title} link={link} subtitle={subtitle} />
-      <ClientEarnAndBurn initialData={initialTransactions} lang={lang} />
+      <MobileTable lang={lang} transactions={transactions.data} />
+      <DesktopTable lang={lang} transactions={transactions.data} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )