From 35946dbb2feb7f9d1cbab16fb0602ce0303562e9 Mon Sep 17 00:00:00 2001
From: Wolfboy248 <georgejvindkarlsen@gmail.com>
Date: Tue, 29 Oct 2024 10:09:17 +0100
Subject: refactor: upload run dialog, useMessage update, added loader spinner

---
 frontend/src/pages/Rankings.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

(limited to 'frontend/src/pages/Rankings.tsx')

diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 9280b02..1830815 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -13,6 +13,9 @@ const Rankings: React.FC = () => {
         official,
         unofficial
     }
+	const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+
+	const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
 
     enum RankingCategories {
         rankings_overall,
@@ -23,6 +26,7 @@ const Rankings: React.FC = () => {
     const [load, setLoad] = React.useState<boolean>(false);
 
     const _fetch_rankings = async () => {
+		setLeaderboardLoad(false);
         const rankings = await API.get_official_rankings();
         setLeaderboardData(rankings);
         if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -33,10 +37,12 @@ const Rankings: React.FC = () => {
             setCurrentLeaderboard(rankings.rankings_overall)
         }
         setLoad(true);
+		setLeaderboardLoad(true);
     }
 
     const __dev_fetch_unofficial_rankings = async () => {
         try {
+			setLeaderboardLoad(false);
             const rankings = await API.get_unofficial_rankings();
             setLeaderboardData(rankings);
             if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -47,6 +53,7 @@ const Rankings: React.FC = () => {
             } else {
                 setCurrentLeaderboard(rankings.rankings_overall)
             }
+			setLeaderboardLoad(true);
         } catch (e) {
             console.log(e)
         }
@@ -83,23 +90,23 @@ const Rankings: React.FC = () => {
         <main>
             <section className="nav-container nav-1">
                 <div>
-                    <button onClick={() => _fetch_rankings()} className="nav-1-btn">
+                    <button onClick={() => {_fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
                         <span>Official (LPHUB)</span>
                     </button>
-                    <button onClick={() => __dev_fetch_unofficial_rankings()} className="nav-1-btn">
+                    <button onClick={() => {__dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
                         <span>Unofficial (Steam)</span>
                     </button>
                 </div>
             </section>
             <section className="nav-container nav-2">
                 <div>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className="nav-2-btn">
+                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
                         <span>Singleplayer</span>
                     </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className="nav-2-btn">
+                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
                         <span>Cooperative</span>
                     </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className="nav-2-btn">
+                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
                         <span>Overall</span>
                     </button>
                 </div>
@@ -116,10 +123,16 @@ const Rankings: React.FC = () => {
 
                         <div className="splitter"></div>
 
-                        {currentLeaderboard?.map((curRankingData, i) => {
+                        {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
                             return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
                         })
                         }
+
+						{leaderboardLoad ? null :
+							<div style={{display: "flex", justifyContent: "center", margin: "30px 0px"}}>
+							<span className="loader"></span>
+							</div>
+						}
                     </div>
                 </section>
                 : null}
-- 
cgit v1.2.3

