Merge pull request #14 from instalution/pagination-fix

Application determines hasNext/hasPrev in Pagination -- Fixes #13

Author: lipupini

components/Pagination/index.tsx

@@ -3,13 +3,13 @@ import { PaginationProps } from '../../types'
 import { useRouter } from 'next/router'
 
 const Pagination = ({ meta, pageState, locale, location }: PaginationProps) => {
-	const { setPage } = pageState
+	const { page, setPage } = pageState
 	const router = useRouter()
 
 	return <>
-		{(meta.hasPrevious || meta.hasNext) &&
+		{meta.total > meta.perPage &&
 			<div className="previous">
-				<button onClick={() => setPage(prevState => prevState - 1)} disabled={!meta.hasPrevious} title={t[locale].previous}>
+				<button onClick={() => setPage(prevState => prevState - 1)} disabled={page === 1} title={t[locale].previous}>
 					←
 				</button>
 			</div>
@@ -19,9 +19,9 @@ const Pagination = ({ meta, pageState, locale, location }: PaginationProps) => {
 				{ location === 'header' && '↑' }
 			</button>
 		</div>
-		{(meta.hasPrevious || meta.hasNext) &&
+		{meta.total > meta.perPage &&
 			<div className="next">
-				<button onClick={() => setPage(prevState => prevState + 1)} disabled={!meta.hasNext} title={t[locale].next}>
+				<button onClick={() => setPage(prevState => prevState + 1)} disabled={page === Math.ceil(meta.total / meta.perPage)} title={t[locale].next}>
 					→
 				</button>
 			</div>

pages/api/files.ts

@@ -62,8 +62,7 @@ export default function Handler(
 		data: files,
 		meta: {
 			total: totalFiles,
-			hasNext: pageNumber * perPage < totalFiles,
-			hasPrevious: pageNumber > 1,
+			perPage,
 		}
 	})
 }

styles/globals.scss

@@ -47,6 +47,7 @@ label {
 
 button[disabled] {
 	opacity: .2;
+	cursor: unset;
 }
 
 .app-bar {

types.ts

@@ -3,9 +3,8 @@ import { Dispatch, SetStateAction } from 'react'
 export type Breakpoint = 'small' | 'medium' | 'large'
 
 export interface AppApiResponseMeta {
-	total?: number
-	hasPrevious?: boolean
-	hasNext?: boolean
+	total: number
+	perPage: number
 }
 
 export interface AppApiResponse {