feat: loosen up the zod validations and return null instead of throwing
This commit is contained in:
Simon Emanuelsson
@@ -1,187 +1,28 @@
|
||||
"use client"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { dt } from "@/lib/dt"
|
||||
import { trpc } from "@/lib/trpc/client"
|
||||
import { serverClient } from "@/lib/trpc/server"
|
||||
|
||||
import Header from "@/components/SectionHeader"
|
||||
|
||||
import ClientEarnAndBurn from "./Client"
|
||||
|
||||
import styles from "./earnAndBurn.module.css"
|
||||
|
||||
import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
|
||||
import { Page, RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
||||
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
|
||||
|
||||
const tableHeadings = [
|
||||
"Arrival date",
|
||||
"Description",
|
||||
"Booking number",
|
||||
"Transaction date",
|
||||
"Points",
|
||||
]
|
||||
|
||||
function EarnAndBurn({
|
||||
export default async function EarnAndBurn({
|
||||
lang,
|
||||
title,
|
||||
subtitle,
|
||||
link,
|
||||
subtitle,
|
||||
title,
|
||||
}: AccountPageComponentProps) {
|
||||
const intl = useIntl()
|
||||
const { data, hasNextPage, fetchNextPage } =
|
||||
trpc.user.transaction.friendTransactions.useInfiniteQuery(
|
||||
{ limit: 5 },
|
||||
{
|
||||
getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
|
||||
}
|
||||
)
|
||||
|
||||
function loadMoreData() {
|
||||
if (hasNextPage) {
|
||||
fetchNextPage()
|
||||
}
|
||||
const initialTransactions =
|
||||
await serverClient().user.transaction.friendTransactions({ limit: 5 })
|
||||
if (!initialTransactions) {
|
||||
return null
|
||||
}
|
||||
|
||||
const transactions = data?.pages.flatMap((page) => page.data) ?? []
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Header title={title} link={link} subtitle={subtitle} />
|
||||
|
||||
<div className={styles.mobileTableContainer}>
|
||||
<table className={styles.mobileTable}>
|
||||
<thead className={styles.mobileThead}>
|
||||
<tr>
|
||||
<th className={styles.mobileTh}>
|
||||
{intl.formatMessage({ id: "Transactions" })}
|
||||
</th>
|
||||
<th className={styles.mobileTh}>
|
||||
{intl.formatMessage({ id: "Points" })}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.length ? (
|
||||
transactions.map((transaction) => (
|
||||
<tr
|
||||
className={styles.mobileTr}
|
||||
key={transaction.confirmationNumber}
|
||||
>
|
||||
<td
|
||||
className={`${styles.mobileTd} ${styles.mobileTransactionDetails}`}
|
||||
>
|
||||
<span className={styles.mobileTransactionDate}>
|
||||
{dt(transaction.checkinDate)
|
||||
.locale(lang)
|
||||
.format("DD MMM YYYY")}
|
||||
</span>
|
||||
{transaction.hotelName && transaction.city ? (
|
||||
<span>{`${transaction.hotelName}, ${transaction.city}`}</span>
|
||||
) : null}
|
||||
<span>
|
||||
{`${transaction.nights} ${intl.formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className={`${styles.mobileTd} ${styles.mobileTransactionPoints}`}
|
||||
>
|
||||
{`${transaction.awardPoints} P`}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td className={styles.mobilePlaceholder} colSpan={2}>
|
||||
{intl.formatMessage({ id: "Empty" })}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={styles.tableContainer}>
|
||||
{transactions.length ? (
|
||||
<table className={styles.table}>
|
||||
<thead className={styles.thead}>
|
||||
<tr>
|
||||
{tableHeadings.map((heading) => (
|
||||
<th key={heading} className={styles.th}>
|
||||
{intl.formatMessage({ id: heading })}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((transaction) => (
|
||||
<Row
|
||||
lang={lang}
|
||||
key={transaction.confirmationNumber}
|
||||
transaction={transaction}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
// TODO: add once pagination is available through API
|
||||
// <Button
|
||||
// disabled={isFetching}
|
||||
// intent="primary"
|
||||
// bgcolor="white"
|
||||
// type="button"
|
||||
// onClick={loadMoreData}
|
||||
// >
|
||||
// {intl.formatMessage({id:"See more transactions"})}
|
||||
// </Button>
|
||||
<table className={styles.table}>
|
||||
<thead className={styles.thead}>
|
||||
<tr>
|
||||
{tableHeadings.map((heading) => (
|
||||
<th key={heading} className={styles.th}>
|
||||
{heading}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
colSpan={tableHeadings.length}
|
||||
className={styles.placeholder}
|
||||
>
|
||||
{intl.formatMessage({ id: "No transactions available" })}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
<ClientEarnAndBurn initialData={initialTransactions} lang={lang} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Row({ transaction, lang }: RowProps) {
|
||||
const intl = useIntl()
|
||||
const description =
|
||||
transaction.hotelName && transaction.city
|
||||
? `${intl.formatMessage({ id: transaction.hotelName })}, ${transaction.city} ${transaction.nights} ${intl.formatMessage({ id: "nights" })}`
|
||||
: `${transaction.nights} ${intl.formatMessage({ id: "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
|
||||
|
||||
Reference in New Issue
Block a user