Merge pull request #15 from instalution/add-perPage-to-settings

Add `perPage` to `settings`

Author: lipupini

components/Pagination/index.tsx

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

pages/[account].tsx

@@ -26,6 +26,7 @@ const Home: NextPage = () => {
 		autoHeight: false,
 		sort: 'filename',
 		renderingMode: 'grid',
+		perPage: 36,
 		columnBreakpoints: {
 			small: 2,
 			medium: 4,
@@ -35,7 +36,9 @@ const Home: NextPage = () => {
 	const [ page, setPage ] = useState<number>(1)
 	const [ media, setMedia ] = useState<AppApiResponse>({
 		data: [],
-		meta: {},
+		meta: {
+			total: 0,
+		},
 	})
 
 	const detectBreakpoint = (): Breakpoint => {
@@ -122,7 +125,9 @@ const Home: NextPage = () => {
 			return
 		}
 
-		fetch('/api/files?account=' + account + '&page=' + page + '&sort=' + settings.sort, {
+		fetch(
+			'/api/files?account=' + account + '&page=' + page + '&perPage=' + settings.perPage + '&sort=' + settings.sort,
+			{
 			method: 'GET',
 			headers: { 'Content-type': 'application/json' },
 		})
@@ -165,7 +170,7 @@ const Home: NextPage = () => {
 							⚙
 						</button>
 					</div>
-					<Pagination meta={media.meta} pageState={{ page, setPage }} locale={locale} location="header" />
+					<Pagination meta={media.meta} pageState={{ page, setPage }} locale={locale} location="header" settings={settings} />
 					<div className="about">
 						<button onClick={() => window.open('https://github.com/instalution/frontend')} title={t[locale].about}>
 							?
@@ -189,7 +194,7 @@ const Home: NextPage = () => {
 					))}
 				</div>
 				<footer className="app-bar">
-					<Pagination meta={media.meta} pageState={{ page, setPage }} locale={locale} location="footer" />
+					<Pagination meta={media.meta} pageState={{ page, setPage }} locale={locale} location="footer" settings={settings} />
 				</footer>
 			</main>
 			<Modal openState={[ settingsModalOpen, setSettingsModalOpen ]}>

pages/api/files.ts

@@ -2,9 +2,6 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 import useConfig from 'next/config'
 import { AppApiResponse } from '../../types'
 
-// @TODO: Make this configurable
-const perPage = 36
-
 const glob = require('glob')
 const fs = require('fs')
 
@@ -19,13 +16,22 @@ export default function Handler(
 	const {serverRuntimeConfig} = useConfig()
 	const query = req.query
 	// `account` should be present because it's defined in the route
-	const { account, page, sort } = query
+	const { account, page, perPage, sort } = query
 	const pageNumber: number = parseInt(page as string)
 
 	if (!sort) {
 		throw new Error('No sort specified')
 	}
 
+	if (!perPage) {
+		throw new Error('No perPage specified')
+	}
+
+	const perPageInt = parseInt(perPage as string)
+	if (perPageInt < 1) {
+		throw new Error('Invalid perPage specified')
+	}
+
 	if (!['random', 'filename'].includes(sort.toString())) {
 		throw new Error('Unexpected value for sort')
 	}
@@ -49,8 +55,8 @@ export default function Handler(
 			new RegExp('^' + escapeRegExp(publicFolder)), '')
 	}
 
-	if (files.length > perPage) {
-		files = files.slice((pageNumber - 1) * perPage, perPage * pageNumber)
+	if (files.length > perPageInt) {
+		files = files.slice((pageNumber - 1) * perPageInt, perPageInt * pageNumber)
 	}
 
 	if (sort === 'random') {
@@ -62,7 +68,6 @@ export default function Handler(
 		data: files,
 		meta: {
 			total: totalFiles,
-			perPage,
 		}
 	})
 }

types.ts

@@ -4,7 +4,6 @@ export type Breakpoint = 'small' | 'medium' | 'large'
 
 export interface AppApiResponseMeta {
 	total: number
-	perPage: number
 }
 
 export interface AppApiResponse {
@@ -29,6 +28,7 @@ export interface Settings {
 	sort: string
 	columnBreakpoints: {[index in Breakpoint]: number}
 	renderingMode: 'grid' | 'columns'
+	perPage: number
 }
 
 export interface PageState {
@@ -49,4 +49,5 @@ export interface PaginationProps {
 	pageState: PageState
 	locale: string
 	location: 'header' | 'footer'
+	settings: Settings
 }