budibase/examples/nextjs-api-sales/pages/index.tsx

import type { NextPage } from "next"
import styles from "../styles/home.module.css"
import { useState, useEffect, useCallback } from "react"
import Notifications from "../components/notifications"

const Home: NextPage = () => {
  const [sales, setSales] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const [loaded, setLoaded] = useState(false)

  const getSales = useCallback(async (page: Number = 1) => {
    let url = "/api/sales"
    if (page) {
      url += `?page=${page}`
    }
    const response = await fetch(url)
    if (!response.ok) {
      const error = await response.text()
      Notifications.error(error, "Failed to get sales")
      return
    }
    const sales = await response.json()
    // @ts-ignore
    setCurrentPage(page)
    return setSales(sales.data)
  }, [])

  const goToNextPage = useCallback(async () => {
    await getSales(currentPage + 1)
  }, [currentPage, getSales])

  const goToPrevPage = useCallback(async () => {
    if (currentPage > 1) {
      await getSales(currentPage - 1)
    }
  }, [currentPage, getSales])

  useEffect(() => {
    getSales().then(() => {
      setLoaded(true)
    }).catch(() => {
      setSales([])
    })
  }, [])

  if (!loaded) {
    return null
  }

  return (
    <div className={styles.container}>
      <div className={styles.tableSection}>
        <h1 className="subtitle">Sales</h1>
        <div className={styles.table}>
          <table className="table">
            <thead>
              <tr>
                <th>Sale ID</th>
                <th>name</th>
                <th>Sold by</th>
              </tr>
            </thead>
            <tbody>
              {sales.map((sale: any) =>
                <tr key={sale.sale_id}>
                  <th>{sale.sale_id}</th>
                  <th>{sale.sale_name}</th>
                  <th>{sale.sales_person?.map((person: any) => person.primaryDisplay)[0]}</th>
                </tr>
              )}
            </tbody>
          </table>
          <div className={styles.buttons}>
            <button className="button" onClick={goToPrevPage}>Prev Page</button>
            <button className="button" onClick={goToNextPage}>Next Page</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Home