Peek Pagination

"use client"

import * as React from "react"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { PaginationContent, PeekPagination } from "@/components/keyframery/peek-pagination"

// One query per page. The table and the peek card both go through it, so they share a cache.
const invoicesPage = (page: number, size: number) => ({
  queryKey: ["invoices", page, size],
  queryFn: ({ signal }: { signal: AbortSignal }) =>
    fetch(`/api/invoices?page=${page}&size=${size}`, { signal }).then((res) => res.json() as Promise<Invoice[]>),
})

export function Invoices({ total }: { total: number }) {
  const [page, setPage] = React.useState(1)
  const size = 10
  const queryClient = useQueryClient()
  const { data: rows = [] } = useQuery(invoicesPage(page, size))

  return (
    <>
      <PaginationContent page={page}>
        <InvoiceTable rows={rows} />
      </PaginationContent>
      <PeekPagination
        page={page}
        onPageChange={setPage}
        total={total}
        pageSize={size}
        // Pointing at a page fetches it into the same cache, so clicking it is instant.
        peek={(p) => queryClient.fetchQuery(invoicesPage(p, size))}
        preview={(p, invoices) => <InvoicePeek rows={invoices.slice(0, 3)} />}
      />
    </>
  )
}