web: use date descending sort

web/src/app/mapfixes/page.tsx

@@ -8,10 +8,11 @@ import Webpage from "@/app/_components/webpage";
 // TODO: MAKE MAPFIX & SUBMISSIONS USE THE SAME COMPONENTS :angry: (currently too lazy)
 
 import "./(styles)/page.scss";
+import { ListSortConstants } from "../ts/Sort";
 
 export default function MapfixInfoPage() {
 	const [mapfixes, setMapfixes] = useState<MapfixInfo[]>([])
-	const [currentPage, setCurrentPage] = useState(0);
+	const [currentPage, setCurrentPage] = useState(1);
 	const cardsPerPage = 24; // built to fit on a 1920x1080 monitor
 
 	const totalPages = Math.ceil(mapfixes.length / cardsPerPage);
@@ -22,20 +23,20 @@ export default function MapfixInfoPage() {
 	);
 
 	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}&Sort=${ListSortConstants.ListSortDateDescending}`)
 			if (res.ok) {
 				setMapfixes(await res.json())
 			}
@@ -44,7 +45,7 @@ export default function MapfixInfoPage() {
 		setTimeout(() => {
 			fetchMapfixes()
 		}, 50);
-	}, [])
+	}, [currentPage])
 
 	if (!mapfixes) {
 		return <Webpage>

web/src/app/submissions/page.tsx

@@ -6,10 +6,11 @@ import { SubmissionCard } from "../_components/mapCard";
 import Webpage from "@/app/_components/webpage";
 
 import "./(styles)/page.scss";
+import { ListSortConstants } from "../ts/Sort";
 
 export default function SubmissionInfoPage() {
 	const [submissions, setSubmissions] = useState<SubmissionInfo[]>([])
-	const [currentPage, setCurrentPage] = useState(0);
+	const [currentPage, setCurrentPage] = useState(1);
 	const cardsPerPage = 24; // built to fit on a 1920x1080 monitor
 
 	const totalPages = Math.ceil(submissions.length / cardsPerPage);
@@ -20,20 +21,20 @@ export default function SubmissionInfoPage() {
 	);
 
 	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}&Sort=${ListSortConstants.ListSortDateDescending}`)
 			if (res.ok) {
 				setSubmissions(await res.json())
 			}
@@ -42,7 +43,7 @@ export default function SubmissionInfoPage() {
 		setTimeout(() => {
 			fetchSubmissions()
 		}, 50);
-	}, [])
+	}, [currentPage])
 
 	if (!submissions) {
 		return <Webpage>

web/src/app/ts/Sort.ts

@@ -0,0 +1,15 @@
+type ListSort = number;
+
+// Constants
+const ListSortConstants = {
+	ListSortDisabled: 0,
+	ListSortDisplayNameAscending: 1,
+	ListSortDisplayNameDescending: 2,
+	ListSortDateAscending: 3,
+	ListSortDateDescending: 4,
+};
+
+export {
+  type ListSort,
+  ListSortConstants,
+};