wip: initial stab trpc pagination
This commit is contained in:
Arvid Norlin
@@ -0,0 +1,26 @@
|
||||
import { Lang } from "@/constants/languages"
|
||||
|
||||
import { awardPointsVariants } from "./awardPointsVariants"
|
||||
|
||||
import type {
|
||||
AwardPointsProps,
|
||||
AwardPointsVariantProps,
|
||||
} from "@/types/components/myPages/myPage/earnAndBurn"
|
||||
|
||||
export default function AwardPoints({ awardPoints }: AwardPointsProps) {
|
||||
let variant: AwardPointsVariantProps["variant"] = undefined
|
||||
if (awardPoints > 0) {
|
||||
variant = "addition"
|
||||
} else if (awardPoints < 0) {
|
||||
variant = "negation"
|
||||
awardPoints = Math.abs(awardPoints)
|
||||
}
|
||||
|
||||
const classNames = awardPointsVariants({
|
||||
variant,
|
||||
})
|
||||
|
||||
// sv hardcoded to force space on thousands
|
||||
const formatter = new Intl.NumberFormat(Lang.sv)
|
||||
return <td className={classNames}>{formatter.format(awardPoints)} pts</td>
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./row.module.css"
|
||||
|
||||
export const awardPointsVariants = cva(styles.td, {
|
||||
variants: {
|
||||
variant: {
|
||||
addition: styles.addition,
|
||||
negation: styles.negation,
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,36 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { dt } from "@/lib/dt"
|
||||
|
||||
import { getLang } from "@/i18n/serverContext"
|
||||
|
||||
import AwardPoints from "./AwardPoints"
|
||||
|
||||
import styles from "./row.module.css"
|
||||
|
||||
import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
||||
|
||||
export default function Row({ transaction }: RowProps) {
|
||||
const intl = useIntl()
|
||||
const description =
|
||||
transaction.hotelName && transaction.city
|
||||
? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${intl.formatMessage({ id: "nights" })}`
|
||||
: `${transaction.nights} ${intl.formatMessage({ id: "nights" })}`
|
||||
const arrival = dt(transaction.checkinDate)
|
||||
.locale(getLang())
|
||||
.format("DD MMM YYYY")
|
||||
const departure = dt(transaction.checkoutDate)
|
||||
.locale(getLang())
|
||||
.format("DD MMM YYYY")
|
||||
return (
|
||||
<tr className={styles.tr}>
|
||||
<td className={styles.td}>{arrival}</td>
|
||||
<td className={styles.td}>{description}</td>
|
||||
<td className={styles.td}>{transaction.confirmationNumber}</td>
|
||||
<td className={styles.td}>{departure}</td>
|
||||
<AwardPoints awardPoints={transaction.awardPoints} />
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.tr {
|
||||
border: 1px solid #e6e9ec;
|
||||
}
|
||||
|
||||
.td {
|
||||
background-color: #fff;
|
||||
color: var(--UI-Text-High-contrast);
|
||||
padding: var(--Spacing-x2) var(--Spacing-x4);
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.addition {
|
||||
color: var(--Secondary-Light-On-Surface-Accent);
|
||||
}
|
||||
|
||||
.addition::before {
|
||||
color: var(--Secondary-Light-On-Surface-Accent);
|
||||
content: "+";
|
||||
left: var(--Spacing-x2);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.negation {
|
||||
color: var(--Base-Text-Accent);
|
||||
}
|
||||
|
||||
.negation::before {
|
||||
color: var(--Base-Text-Accent);
|
||||
content: "-";
|
||||
left: var(--Spacing-x2);
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thead {
|
||||
background-color: var(--Scandic-Brand-Pale-Peach);
|
||||
border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
color: var(--Main-Brand-Burgundy);
|
||||
}
|
||||
|
||||
.th {
|
||||
text-align: left;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--Scandic-Brand-Pale-Peach);
|
||||
border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
display: flex;
|
||||
padding: 20px 32px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loadMoreButton {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--Main-Brand-Burgundy);
|
||||
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
cursor: pointer;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import Row from "./Row"
|
||||
|
||||
import styles from "./desktop.module.css"
|
||||
|
||||
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
||||
|
||||
const tableHeadings = [
|
||||
"Arrival date",
|
||||
"Description",
|
||||
"Booking number",
|
||||
"Transaction date",
|
||||
"Points",
|
||||
]
|
||||
|
||||
export default function DesktopTable({ transactions }: TableProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{transactions.length ? (
|
||||
<div>
|
||||
<table className={styles.table}>
|
||||
<thead className={styles.thead}>
|
||||
<tr>
|
||||
{tableHeadings.map((heading) => (
|
||||
<th key={heading} className={styles.th}>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({ id: heading })}
|
||||
</Body>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((transaction, idx) => (
|
||||
<Row
|
||||
key={`${transaction.confirmationNumber}-${idx}`}
|
||||
transaction={transaction}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { dt } from "@/lib/dt"
|
||||
|
||||
import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Desktop/Row/AwardPoints"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import { getLang } from "@/i18n/serverContext"
|
||||
|
||||
import styles from "./mobile.module.css"
|
||||
|
||||
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
||||
|
||||
export default function MobileTable({ transactions }: TableProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<table className={styles.table}>
|
||||
<thead className={styles.thead}>
|
||||
<tr>
|
||||
<Body asChild>
|
||||
<th className={styles.th}>
|
||||
{intl.formatMessage({ id: "Transactions" })}
|
||||
</th>
|
||||
</Body>
|
||||
<Body asChild>
|
||||
<th className={styles.th}>
|
||||
{intl.formatMessage({ id: "Points" })}
|
||||
</th>
|
||||
</Body>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.length ? (
|
||||
transactions.map((transaction, idx) => (
|
||||
<tr
|
||||
className={styles.tr}
|
||||
key={`${transaction.confirmationNumber}-${idx}`}
|
||||
>
|
||||
<td className={`${styles.td} ${styles.transactionDetails}`}>
|
||||
<span className={styles.transactionDate}>
|
||||
{dt(transaction.checkinDate)
|
||||
.locale(getLang())
|
||||
.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>
|
||||
<AwardPoints awardPoints={transaction.awardPoints} />
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td className={styles.placeholder} colSpan={2}>
|
||||
{intl.formatMessage({
|
||||
id: "There are no transactions to display",
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thead {
|
||||
background-color: var(--Main-Grey-10);
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.tr {
|
||||
border-top: 1px solid var(--Main-Grey-10);
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.transactionDetails {
|
||||
display: grid;
|
||||
font-size: var(--typography-Footnote-Regular-fontSize);
|
||||
}
|
||||
|
||||
.transactionDate {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
padding: var(--Spacing-x4);
|
||||
border: 1px solid var(--Main-Grey-10);
|
||||
}
|
||||
.loadMoreButton {
|
||||
background-color: var(--Main-Grey-10);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
padding: var(--Spacing-x2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
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,
|
||||
})
|
||||
// Should the active page be mirroried in the URL with params?
|
||||
// That way the actual fetch could be moved up and Mobile/Desktop can be strictly server side
|
||||
useEffect(() => {
|
||||
if (typeof data?.data.pages === "number") {
|
||||
setTotalPages(data?.data.pages)
|
||||
}
|
||||
}, [data?.data.pages])
|
||||
|
||||
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}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user