fix/frontend: map pagination fix (#246)

4 files changed, 22 insertions, 9 deletions

diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 4a3f907..862e688 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -29,7 +29,7 @@ export const API = {
   get_unofficial_rankings: () => get_unofficial_rankings(),
   // Maps
   get_map_summary: (map_id: string) => get_map_summary(map_id),
-  get_map_leaderboard: (map_id: string) => get_map_leaderboard(map_id),
+  get_map_leaderboard: (map_id: string, page: string) => get_map_leaderboard(map_id, page),
   get_map_discussions: (map_id: string) => get_map_discussions(map_id),
   get_map_discussion: (map_id: string, discussion_id: number) => get_map_discussion(map_id, discussion_id),
 
diff --git a/frontend/src/api/Maps.ts b/frontend/src/api/Maps.ts
index 3832a2e..aa967ce 100644
--- a/frontend/src/api/Maps.ts
+++ b/frontend/src/api/Maps.ts
@@ -8,8 +8,8 @@ export const get_map_summary = async (map_id: string): Promise<MapSummary> => {
   return response.data.data;
 };
 
-export const get_map_leaderboard = async (map_id: string): Promise<MapLeaderboard | undefined> => {
-  const response = await axios.get(url(`maps/${map_id}/leaderboards`));
+export const get_map_leaderboard = async (map_id: string, page: string): Promise<MapLeaderboard | undefined> => {
+  const response = await axios.get(url(`maps/${map_id}/leaderboards?page=${page}`));
   if (!response.data.success) {
     return undefined;
   }
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 4a8b463..fb614fa 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,20 +1,33 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import { DownloadIcon, ThreedotIcon } from '@images/Images';
 import { MapLeaderboard } from '@customTypes/Map';
 import { ticks_to_time, time_ago } from '@utils/Time';
+import { API } from "@api/Api";
 import useMessage from "@hooks/UseMessage";
 import "@css/Maps.css"
 
 interface LeaderboardsProps {
-  data?: MapLeaderboard;
+        mapID: string;
 }
 
-const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
+const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
+  const navigate = useNavigate();
+  const [data, setData] = React.useState<MapLeaderboard | undefined>(undefined);
+  const [pageNumber, setPageNumber] = React.useState<number>(1);
+
+  const _fetch_map_leaderboards = async () => {
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, pageNumber.toString());
+    setData(mapLeaderboards);
+  };
 
   const { message, MessageDialogComponent } = useMessage();
-  const [pageNumber, setPageNumber] = React.useState<number>(1);
+
+  React.useEffect(() => {
+          _fetch_map_leaderboards();
+          console.log(data);
+  }, [pageNumber, navigate])
 
   if (!data) {
     return (
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index f1daa36..f73e8d2 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -35,7 +35,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
   };
 
   const _fetch_map_leaderboards = async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID);
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
     setMapLeaderboardData(mapLeaderboards);
   };
 
@@ -94,7 +94,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
         </section>
 
         {navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
-        {navState === 1 && <Leaderboards data={mapLeaderboardData} />}
+        {navState === 1 && <Leaderboards mapID={mapID} />}
         {navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
       </main>
     </>