diff --git a/web/src/app/mapfixes/page.tsx b/web/src/app/mapfixes/page.tsx index 37f232b..46f97f9 100644 --- a/web/src/app/mapfixes/page.tsx +++ b/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}><</button> + <button onClick={prevPage} disabled={currentPage === 1}><</button> <span> - Page {currentPage + 1} of {totalPages} + Page {currentPage} of {totalPages} </span> - <button onClick={nextPage} disabled={currentPage === totalPages - 1}>></button> + <button onClick={nextPage} disabled={currentPage === totalPages}>></button> </div> <div className="grid"> {currentCards.map((mapfix) => ( diff --git a/web/src/app/submissions/page.tsx b/web/src/app/submissions/page.tsx index 05b877c..1a4b831 100644 --- a/web/src/app/submissions/page.tsx +++ b/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}><</button> + <button onClick={prevPage} disabled={currentPage === 1}><</button> <span> - Page {currentPage + 1} of {totalPages} + Page {currentPage} of {totalPages} </span> - <button onClick={nextPage} disabled={currentPage === totalPages - 1}>></button> + <button onClick={nextPage} disabled={currentPage === totalPages}>></button> </div> <div className="grid"> {currentCards.map((submission) => ( diff --git a/web/src/app/ts/Mapfix.ts b/web/src/app/ts/Mapfix.ts index b761fb1..e9727d8 100644 --- a/web/src/app/ts/Mapfix.ts +++ b/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, } diff --git a/web/src/app/ts/Submission.ts b/web/src/app/ts/Submission.ts index cbae508..a2003f1 100644 --- a/web/src/app/ts/Submission.ts +++ b/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, }