web: implement new list api with Total field for pages

web/src/app/mapfixes/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from "react";
-import { MapfixInfo } from "../ts/Mapfix";
+import { MapfixList } from "../ts/Mapfix";
 import { MapfixCard } from "../_components/mapCard";
 import Webpage from "@/app/_components/webpage";
 
@@ -10,32 +10,32 @@ import Webpage from "@/app/_components/webpage";
 import "./(styles)/page.scss";
 
 export default function MapfixInfoPage() {
-	const [mapfixes, setMapfixes] = useState<MapfixInfo[]>([])
-	const [currentPage, setCurrentPage] = useState(0);
+	const [mapfixes, setMapfixes] = useState<MapfixList>({Total:0,Mapfixes:[]})
+	const [currentPage, setCurrentPage] = useState(1);
 	const cardsPerPage = 24; // built to fit on a 1920x1080 monitor
 
-	const totalPages = Math.ceil(mapfixes.length / cardsPerPage);
+	const totalPages = Math.ceil(mapfixes.Total / cardsPerPage);
 
-	const currentCards = mapfixes.slice(
-		currentPage * cardsPerPage,
-		(currentPage + 1) * cardsPerPage
+	const currentCards = mapfixes.Mapfixes.slice(
+		(currentPage - 1) * cardsPerPage,
+		currentPage * cardsPerPage
 	);
 
 	const nextPage = () => {
-		if (currentPage < totalPages - 1) {
+		if (currentPage < totalPages) {
 			setCurrentPage(currentPage + 1);
 		}
 	};
 
 	const prevPage = () => {
-		if (currentPage > 0) {
+		if (currentPage > 1) {
 			setCurrentPage(currentPage - 1);
 		}
 	};
 
 	useEffect(() => {
 		async function fetchMapfixes() {
-			const res = await fetch('/api/mapfixes?Page=1&Limit=100')
+			const res = await fetch(`/api/mapfixes?Page=${currentPage}&Limit=${cardsPerPage}`)
 			if (res.ok) {
 				setMapfixes(await res.json())
 			}
@@ -44,7 +44,7 @@ export default function MapfixInfoPage() {
 		setTimeout(() => {
 			fetchMapfixes()
 		}, 50);
-	}, [])
+	}, [currentPage])
 
 	if (!mapfixes) {
 		return <Webpage>
@@ -54,7 +54,7 @@ export default function MapfixInfoPage() {
 		</Webpage>
 	}
 
-	if (mapfixes && mapfixes.length == 0) {
+	if (mapfixes && mapfixes.Total == 0) {
 		return <Webpage>
 			<main>
 				Mapfixes list is empty.
@@ -88,11 +88,11 @@ export default function MapfixInfoPage() {
 					))}
 				</div>
 				<div className="pagination">
-					<button onClick={prevPage} disabled={currentPage === 0}>&lt;</button>
+					<button onClick={prevPage} disabled={currentPage === 1}>&lt;</button>
 					<span>
-						Page {currentPage + 1} of {totalPages}
+						Page {currentPage} of {totalPages}
 					</span>
-					<button onClick={nextPage} disabled={currentPage === totalPages - 1}>&gt;</button>
+					<button onClick={nextPage} disabled={currentPage === totalPages}>&gt;</button>
 				</div>
 				<div className="grid">
 					{currentCards.map((mapfix) => (

web/src/app/submissions/page.tsx

@@ -1,39 +1,39 @@
 'use client'
 
 import React, { useState, useEffect } from "react";
-import { SubmissionInfo } from "../ts/Submission";
+import { SubmissionList } from "../ts/Submission";
 import { SubmissionCard } from "../_components/mapCard";
 import Webpage from "@/app/_components/webpage";
 
 import "./(styles)/page.scss";
 
 export default function SubmissionInfoPage() {
-	const [submissions, setSubmissions] = useState<SubmissionInfo[]>([])
-	const [currentPage, setCurrentPage] = useState(0);
+	const [submissions, setSubmissions] = useState<SubmissionList>({Total:0,Submissions:[]})
+	const [currentPage, setCurrentPage] = useState(1);
 	const cardsPerPage = 24; // built to fit on a 1920x1080 monitor
 
-	const totalPages = Math.ceil(submissions.length / cardsPerPage);
+	const totalPages = Math.ceil(submissions.Total / cardsPerPage);
 
-	const currentCards = submissions.slice(
-		currentPage * cardsPerPage,
-		(currentPage + 1) * cardsPerPage
+	const currentCards = submissions.Submissions.slice(
+		(currentPage - 1) * cardsPerPage,
+		currentPage * cardsPerPage
 	);
 
 	const nextPage = () => {
-		if (currentPage < totalPages - 1) {
+		if (currentPage < totalPages) {
 			setCurrentPage(currentPage + 1);
 		}
 	};
 
 	const prevPage = () => {
-		if (currentPage > 0) {
+		if (currentPage > 1) {
 			setCurrentPage(currentPage - 1);
 		}
 	};
 
 	useEffect(() => {
 		async function fetchSubmissions() {
-			const res = await fetch('/api/submissions?Page=1&Limit=100')
+			const res = await fetch(`/api/submissions?Page=${currentPage}&Limit=${cardsPerPage}`)
 			if (res.ok) {
 				setSubmissions(await res.json())
 			}
@@ -42,7 +42,7 @@ export default function SubmissionInfoPage() {
 		setTimeout(() => {
 			fetchSubmissions()
 		}, 50);
-	}, [])
+	}, [currentPage])
 
 	if (!submissions) {
 		return <Webpage>
@@ -52,7 +52,7 @@ export default function SubmissionInfoPage() {
 		</Webpage>
 	}
 
-	if (submissions && submissions.length == 0) {
+	if (submissions && submissions.Total == 0) {
 		return <Webpage>
 			<main>
 				Submissions list is empty.
@@ -86,11 +86,11 @@ export default function SubmissionInfoPage() {
 					))}
 				</div>
 				<div className="pagination">
-					<button onClick={prevPage} disabled={currentPage === 0}>&lt;</button>
+					<button onClick={prevPage} disabled={currentPage === 1}>&lt;</button>
 					<span>
-						Page {currentPage + 1} of {totalPages}
+						Page {currentPage} of {totalPages}
 					</span>
-					<button onClick={nextPage} disabled={currentPage === totalPages - 1}>&gt;</button>
+					<button onClick={nextPage} disabled={currentPage === totalPages}>&gt;</button>
 				</div>
 				<div className="grid">
 					{currentCards.map((submission) => (

web/src/app/ts/Mapfix.ts

@@ -28,6 +28,11 @@ interface MapfixInfo {
     readonly StatusMessage: string,
 }
 
+interface MapfixList {
+	readonly Total: number,
+	readonly Mapfixes: MapfixInfo[],
+}
+
 function MapfixStatusToString(mapfix_status: MapfixStatus): string {
 	switch (mapfix_status) {
    	case MapfixStatus.Rejected:
@@ -56,5 +61,6 @@ function MapfixStatusToString(mapfix_status: MapfixStatus): string {
 export {
 	MapfixStatus,
 	MapfixStatusToString,
-	type MapfixInfo
+	type MapfixInfo,
+	type MapfixList,
 }

web/src/app/ts/Submission.ts

@@ -28,6 +28,11 @@ interface SubmissionInfo {
     readonly StatusMessage: string,
 }
 
+interface SubmissionList {
+	readonly Total: number,
+	readonly Submissions: SubmissionInfo[],
+}
+
 function SubmissionStatusToString(submission_status: SubmissionStatus): string {
 	switch (submission_status) {
     	case SubmissionStatus.Released:
@@ -58,5 +63,6 @@ function SubmissionStatusToString(submission_status: SubmissionStatus): string {
 export {
 	SubmissionStatus,
 	SubmissionStatusToString,
-	type SubmissionInfo
+	type SubmissionInfo,
+	type SubmissionList,
 }