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) {
+export default async function Row({ transaction, lang }: RowProps) {
-  const { formatMessage } = useIntl()
+  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) {
+export default async function DesktopTable({ lang, transactions }: TableProps) {
-  const { formatMessage } = useIntl()
+  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) {
+export default async function MobileTable({ lang, transactions }: TableProps) {
-  const { formatMessage } = useIntl()
+  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
+                <td className={styles.transactionPoints}>
-                  className={`${styles.mobileTd} ${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 =
+  const transactions =
-    await serverClient().user.transaction.friendTransactions({ limit: 5 })
+    await serverClient().user.transaction.friendTransactions()
-  if (!initialTransactions) {
+  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>
   )

server/routers/user/input.ts

@@ -18,8 +18,3 @@ export const soonestUpcomingStaysInput = z
     limit: z.number().int().positive(),
   })
   .default({ limit: 3 })
-
-export const friendTransactionsInput = z.object({
-  cursor: z.number().int().nullish(),
-  limit: z.number().min(0).default(5),
-})

server/routers/user/output.ts

@@ -162,9 +162,6 @@ export const getFriendTransactionsSchema = z.object({
   links: z
     .object({
       self: z.string(),
-      offset: z.number(),
-      limit: z.number(),
-      totalCount: z.number(),
     })
     .nullable(),
 })

server/routers/user/query.ts

@@ -12,11 +12,7 @@ import * as maskValue from "@/utils/maskValue"
 import { getMembership, getMembershipCards } from "@/utils/user"
 
 import encryptValue from "../utils/encryptValue"
-import {
+import { getUserInputSchema, staysInput } from "./input"
-  friendTransactionsInput,
-  getUserInputSchema,
-  staysInput,
-} from "./input"
 import {
   getCreditCardsSchema,
   getFriendTransactionsSchema,
@@ -365,75 +361,53 @@ export const userQueryRouter = router({
       }),
   }),
   transaction: router({
-    friendTransactions: protectedProcedure
+    friendTransactions: protectedProcedure.query(async (opts) => {
-      .input(friendTransactionsInput)
+      const apiResponse = await api.get(api.endpoints.v1.friendTransactions, {
-      .query(async (opts) => {
+        headers: {
-        const { limit, cursor } = opts.input
+          Authorization: `Bearer ${opts.ctx.session.token.access_token}`,
+        },
+      })
 
-        const params = new URLSearchParams()
+      if (!apiResponse.ok) {
-        params.set("limit", limit.toString())
+        // switch (apiResponse.status) {
+        //   case 400:
+        //     throw badRequestError()
+        //   case 401:
+        //     throw unauthorizedError()
+        //   case 403:
+        //     throw forbiddenError()
+        //   default:
+        //     throw internalServerError()
+        // }
+        console.info(`API Response Failed - Getting Friend Transactions`)
+        console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`)
+        console.error(apiResponse)
+        return null
+      }
 
-        if (cursor) {
+      const apiJson = await apiResponse.json()
-          params.set("offset", cursor.toString())
+      const verifiedData = getFriendTransactionsSchema.safeParse(apiJson)
-        }
+      if (!verifiedData.success) {
+        console.info(`Failed to validate Friend Transactions Data`)
+        console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`)
+        console.error(verifiedData.error)
+        return null
+      }
 
-        const apiResponse = await api.get(
+      return {
-          api.endpoints.v1.friendTransactions,
+        data: verifiedData.data.data.map(({ attributes }) => {
-          {
+          return {
-            headers: {
+            awardPoints: attributes.awardPoints,
-              Authorization: `Bearer ${opts.ctx.session.token.access_token}`,
+            checkinDate: attributes.checkinDate,
-            },
+            checkoutDate: attributes.checkoutDate,
-          },
+            city: attributes.hotelInformation?.city,
-          params
+            confirmationNumber: attributes.confirmationNumber,
-        )
+            hotelName: attributes.hotelInformation?.name,
-
+            nights: attributes.nights,
-        if (!apiResponse.ok) {
+          }
-          // switch (apiResponse.status) {
+        }),
-          //   case 400:
+      }
-          //     throw badRequestError()
+    }),
-          //   case 401:
-          //     throw unauthorizedError()
-          //   case 403:
-          //     throw forbiddenError()
-          //   default:
-          //     throw internalServerError()
-          // }
-          console.info(`API Response Failed - Getting Friend Transactions`)
-          console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`)
-          console.error(apiResponse)
-          return null
-        }
-
-        const apiJson = await apiResponse.json()
-        const verifiedData = getFriendTransactionsSchema.safeParse(apiJson)
-        if (!verifiedData.success) {
-          console.info(`Failed to validate Friend Transactions Data`)
-          console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`)
-          console.error(verifiedData.error)
-          return null
-        }
-
-        const nextCursor =
-          verifiedData.data.links &&
-          verifiedData.data.links.offset < verifiedData.data.links.totalCount
-            ? verifiedData.data.links.offset
-            : undefined
-
-        return {
-          data: verifiedData.data.data.map(({ attributes }) => {
-            return {
-              awardPoints: attributes.awardPoints,
-              checkinDate: attributes.checkinDate,
-              checkoutDate: attributes.checkoutDate,
-              city: attributes.hotelInformation?.city,
-              confirmationNumber: attributes.confirmationNumber,
-              hotelName: attributes.hotelInformation?.name,
-              nights: attributes.nights,
-            }
-          }),
-          nextCursor,
-        }
-      }),
   }),
 
   creditCards: protectedProcedure.query(async function ({ ctx }) {