diff --git a/src/app/components/PaginationToolbar.js b/src/app/components/PaginationToolbar.js index 759901d..1744f9c 100644 --- a/src/app/components/PaginationToolbar.js +++ b/src/app/components/PaginationToolbar.js @@ -1,27 +1,33 @@ import React from "react"; -import { Button, Flex } from "@chakra-ui/react"; +import { Box, Button, Flex } from "@chakra-ui/react"; import { Link, useLocation } from "react-router-dom"; +const PER_PAGE = 30; + function PaginationToolbar({ isLoading, totalCount, ...props }) { const { search } = useLocation(); const currentOffset = parseInt(new URLSearchParams(search).get("offset")) || 0; + const currentPageIndex = Math.floor(currentOffset / PER_PAGE); + const currentPageNumber = currentPageIndex + 1; + const numTotalPages = totalCount ? Math.ceil(totalCount / PER_PAGE) : null; + const prevPageSearchParams = new URLSearchParams(search); - const prevPageOffset = currentOffset - 30; + const prevPageOffset = currentOffset - PER_PAGE; prevPageSearchParams.set("offset", prevPageOffset); const prevPageUrl = "?" + prevPageSearchParams.toString(); const prevPageIsDisabled = isLoading || prevPageOffset < 0; const nextPageSearchParams = new URLSearchParams(search); - const nextPageOffset = currentOffset + 30; + const nextPageOffset = currentOffset + PER_PAGE; nextPageSearchParams.set("offset", nextPageOffset); const nextPageUrl = "?" + nextPageSearchParams.toString(); const nextPageIsDisabled = isLoading || nextPageOffset >= totalCount; return ( - + + {numTotalPages && ( + + Page {currentPageNumber} of {numTotalPages} + + )}