127 lines
3.0 KiB
TypeScript
127 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { keepPreviousData } from "@tanstack/react-query"
|
|
import { useState } from "react"
|
|
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import { ChevronRightIcon } from "@/components/Icons"
|
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
|
|
|
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
|
|
type={"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({
|
|
initialJourneyTransactions,
|
|
}: {
|
|
initialJourneyTransactions: {
|
|
data: { transactions: Transactions }
|
|
meta: { totalPages: number }
|
|
}
|
|
}) {
|
|
const limit = 5
|
|
const [page, setPage] = useState(1)
|
|
const { data, isFetching, isLoading } =
|
|
trpc.user.transaction.friendTransactions.useQuery(
|
|
{
|
|
limit,
|
|
page,
|
|
},
|
|
{
|
|
// TODO: fix the initial data issues on page load
|
|
// initialData: initialJourneyTransactions,
|
|
placeholderData: keepPreviousData,
|
|
}
|
|
)
|
|
|
|
return isLoading ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<>
|
|
<MobileTable transactions={data?.data.transactions || []} />
|
|
<DesktopTable transactions={data?.data.transactions || []} />
|
|
{data && data.meta.totalPages > 1 ? (
|
|
<Pagination
|
|
handlePageChange={setPage}
|
|
pageCount={data.meta.totalPages}
|
|
isFetching={isFetching}
|
|
currentPage={page}
|
|
/>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|