feat: add data handling to EarnAndBurn

components/MyPages/AccountPage/Content.tsx

@@ -39,7 +39,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
     case DynamicContentComponents.expiring_points:
       return <ExpiringPoints />
     case DynamicContentComponents.earn_and_burn:
-      return <EarnAndBurn />
+      return <EarnAndBurn lang={props.lang} />
     default:
       return null
   }

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

@@ -2,7 +2,7 @@ import { _ } from "@/lib/translation"
 
 import styles from "./currentPointsBalance.module.css"
 
-const CurrentPointsBalance = () => {
+function CurrentPointsBalance() {
   const points = 30000
 
   return (

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

@@ -1,44 +1,101 @@
+"use client"
+
+import { dt } from "@/lib/dt"
 import { _ } from "@/lib/translation"
+import { trpc } from "@/lib/trpc/client"
 
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./earnAndBurn.module.css"
 
-const EarnAndBurn = () => {
+import {
+  EarnAndBurnProps,
+  Page,
+  RowProps,
+} from "@/types/components/myPages/myPage/earnAndBurn"
+
+const tableHeadings = [
+  _("Arrival date"),
+  _("Description"),
+  _("Booking number"),
+  _("Transaction date"),
+  _("Points"),
+]
+
+function EarnAndBurn({ lang }: EarnAndBurnProps) {
+  const { data, hasNextPage, isFetching, fetchNextPage } =
+    trpc.user.transaction.friendTransactions.useInfiniteQuery(
+      { limit: 5 },
+      {
+        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
+      }
+    )
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  const transactions = data?.pages.flatMap((page) => page.data) ?? []
+
   return (
     <div className={styles.container}>
       <table className={styles.table}>
         <thead className={styles.thead}>
           <tr>
-            <th className={styles.th}>{_("Arrival date")}</th>
-            <th className={styles.th}>{_("Description")}</th>
-            <th className={styles.th}>{_("Booking number")}</th>
-            <th className={styles.th}>{_("Transaction date")}</th>
-            <th className={styles.th}>{_("Points")}</th>
+            {tableHeadings.map((heading) => (
+              <th key={heading} className={styles.th}>
+                {heading}
+              </th>
+            ))}
           </tr>
         </thead>
         <tbody>
-          <tr className={styles.tr}>
-            <td className={styles.td}>23 May 2023</td>
-            <td className={styles.td}>Scandic Mölndal, Mölndal 2 nights</td>
-            <td className={styles.td}>5123456576</td>
-            <td className={styles.td}>26 May 2023</td>
-            <td className={styles.td}>30000</td>
-          </tr>
-          <tr className={styles.tr}>
-            <td className={styles.td}>23 May 2023</td>
-            <td className={styles.td}>Scandic Mölndal, Mölndal 2 nights</td>
-            <td className={styles.td}>5123456576</td>
-            <td className={styles.td}>26 May 2023</td>
-            <td className={styles.td}>-30000</td>
-          </tr>
+          {transactions.map((transaction) => (
+            <Row
+              lang={lang}
+              key={transaction.confirmationNumber}
+              transaction={transaction}
+            />
+          ))}
         </tbody>
       </table>
-      <Button intent="primary" bgcolor="white" type="button">
+      <Button
+        disabled={isFetching}
+        intent="primary"
+        bgcolor="white"
+        type="button"
+        onClick={loadMoreData}
+      >
         {_("See more transactions")}
       </Button>
     </div>
   )
 }
 
+function Row({ transaction, lang }: RowProps) {
+  const description = `${_(transaction.hotelName)}, ${transaction.city} ${transaction.nights} ${_("nights")}`
+  const arrival = dt(transaction.checkInDate).locale(lang).format("DD MMM YYYY")
+  const departure = dt(transaction.checkOutDate)
+    .locale(lang)
+    .format("DD MMM YYYY")
+  const values = [
+    arrival,
+    description,
+    transaction.confirmationNumber,
+    departure,
+    transaction.awardPoints,
+  ]
+  return (
+    <tr className={styles.tr}>
+      {values.map((value, idx) => (
+        <td key={`value-${idx}`} className={styles.td}>
+          {value}
+        </td>
+      ))}
+    </tr>
+  )
+}
+
 export default EarnAndBurn

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

@@ -2,7 +2,7 @@ import { _ } from "@/lib/translation"
 
 import styles from "./expiringPoints.module.css"
 
-export const ExpiringPoints = () => {
+export function ExpiringPoints() {
   return (
     <table className={styles.table}>
       <thead className={styles.thead}>