web: implement new list api with Total field for pages

This commit is contained in:
Quaternions 2025-04-06 15:03:36 -07:00
parent 0ae06544a4
commit e1685fd047
Signed by: Quaternions
GPG Key ID: D0DF5964F79AC131
4 changed files with 24 additions and 12 deletions
web/src/app

@ -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";
@ -11,13 +11,13 @@ import "./(styles)/page.scss";
import { ListSortConstants } from "../ts/Sort";
export default function MapfixInfoPage() {
const [mapfixes, setMapfixes] = useState<MapfixInfo[]>([])
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(
const currentCards = mapfixes.Mapfixes.slice(
currentPage * cardsPerPage,
(currentPage + 1) * cardsPerPage
);
@ -55,7 +55,7 @@ export default function MapfixInfoPage() {
</Webpage>
}
if (mapfixes && mapfixes.length == 0) {
if (mapfixes && mapfixes.Total == 0) {
return <Webpage>
<main>
Mapfixes list is empty.

@ -1,7 +1,7 @@
'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";
@ -9,13 +9,13 @@ import "./(styles)/page.scss";
import { ListSortConstants } from "../ts/Sort";
export default function SubmissionInfoPage() {
const [submissions, setSubmissions] = useState<SubmissionInfo[]>([])
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(
const currentCards = submissions.Submissions.slice(
currentPage * cardsPerPage,
(currentPage + 1) * cardsPerPage
);
@ -53,7 +53,7 @@ export default function SubmissionInfoPage() {
</Webpage>
}
if (submissions && submissions.length == 0) {
if (submissions && submissions.Total == 0) {
return <Webpage>
<main>
Submissions list is empty.

@ -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,
}

@ -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,
}