fix counter inconsistency, move logic into use-pagination-hook

Author: CJ-Rose

components/reports/reports-view.tsx

@@ -34,7 +34,7 @@ export function ReportsView({ reports }: IPageData) {
 		sortingOptions.createdNewestFirst.value,
 	);
 	let filteredReports = useMemo(() => reports, [reports]);
-	const itemsPerPage = 10;
+	const itemsPerPage = 4;
 
 	const filterOptions = useMemo(() => {
 		return createFilterOptions(reports);
@@ -169,28 +169,22 @@ export function ReportsView({ reports }: IPageData) {
 									}
 								/>
 							</PaginationItem>
-							{pageNumbers
-								.filter((pageNum) =>
-									[currentPage - 1, currentPage, currentPage + 1].includes(
-										pageNum,
-									),
-								)
-								.map((pageNum, index) => (
-									<PaginationItem
-										onClick={() => loadPage(pageNum)}
-										className="hover:cursor-pointer"
-										key={`page-${pageNum}`}
-									>
-										<PaginationLink isActive={currentPage === pageNum}>
-											{pageNum}
-										</PaginationLink>
-									</PaginationItem>
-								))}
-							{maxPage > 3 && (
+							{pageNumbers.map((pageNum, index) => (
+								<PaginationItem
+									onClick={() => loadPage(pageNum)}
+									className="hover:cursor-pointer"
+									key={`page-${pageNum}`}
+								>
+									<PaginationLink isActive={currentPage === pageNum}>
+										{pageNum}
+									</PaginationLink>
+								</PaginationItem>
+							))}
+							{maxPage > 3 && currentPage < maxPage - 1 ? (
 								<PaginationItem>
 									<PaginationEllipsis />
 								</PaginationItem>
-							)}
+							) : null}
 							<PaginationItem className="hover:cursor-pointer">
 								<PaginationNext
 									onClick={() =>

hooks/use-pagination.ts

@@ -31,18 +31,12 @@ export const usePagination = <GT,>(items: GT[], itemsPerPage: number) => {
 		() => items.length > itemsPerPage,
 		[items.length, itemsPerPage],
 	);
-	const pageNumbers = useMemo(
-		() => Array.from({ length: maxPage }, (_, i) => i + 1),
-		[maxPage],
-	);
-
-	// const currentPageItems = useMemo(() => {
-	// 	const start = (currentPage - 1) * itemsPerPage;
-	// 	const end = start + itemsPerPage;
-	// 	return needsPagination ? items.slice(start, end) : items;
-	// }, [currentPage, items, itemsPerPage, needsPagination]);
+	const pageNumbers = useMemo(() => {
+      const range = Array.from({ length: 3 }, (_, i) => currentPage + i);
+      return currentPage === 1 ? range : currentPage === maxPage ? range.map(num => num - 2) : range.map(num => num - 1);
+  }, [maxPage, currentPage]);
 
-	// removing these from useMemo(), need recalculation to render correct reports
+	// no 'useMemo' for these, we need to recalculate to render correct reports
 	// when filter/sort options are updated
 	const start = (currentPage - 1) * itemsPerPage;
 	const end = start + itemsPerPage;