127 lines
3.1 KiB
TypeScript
127 lines
3.1 KiB
TypeScript
"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}
|
|
</>
|
|
)
|
|
}
|