From e40f07211f5f15dcb138e2520a76d13afd3c0cfd Mon Sep 17 00:00:00 2001
From: FifthWit <fifthwitbusiness@gmail.com>
Date: Thu, 30 Jan 2025 10:44:30 -0600
Subject: formatted with prettier

---
 frontend/src/pages/Rankings.tsx | 319 +++++++++++++++++++++++-----------------
 1 file changed, 186 insertions(+), 133 deletions(-)

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

diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 71aa427..885638d 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -1,147 +1,200 @@
-import React, { useEffect } from "react";
-import { Helmet } from "react-helmet";
+import React, { useEffect } from 'react';
+import { Helmet } from 'react-helmet';
 
-import RankingEntry from "@components/RankingEntry";
-import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking";
-import { API } from "@api/Api";
+import RankingEntry from '@components/RankingEntry';
+import {
+  Ranking,
+  SteamRanking,
+  RankingType,
+  SteamRankingType,
+} from '@customTypes/Ranking';
+import { API } from '@api/Api';
 
-import "@css/Rankings.css";
+import '@css/Rankings.css';
 
 const Rankings: React.FC = () => {
-    const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
-    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
-    enum LeaderboardTypes {
-        official,
-        unofficial
+  const [leaderboardData, setLeaderboardData] = React.useState<
+    Ranking | SteamRanking
+  >();
+  const [currentLeaderboard, setCurrentLeaderboard] = React.useState<
+    RankingType[] | SteamRankingType[]
+  >();
+  enum LeaderboardTypes {
+    official,
+    unofficial,
+  }
+  const [currentRankingType, setCurrentRankingType] =
+    React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+
+  const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+
+  enum RankingCategories {
+    rankings_overall,
+    rankings_multiplayer,
+    rankings_singleplayer,
+  }
+  const [currentLeaderboardType, setCurrentLeaderboardType] =
+    React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+  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) {
+      setCurrentLeaderboard(rankings.rankings_singleplayer);
+    } else if (
+      currentLeaderboardType == RankingCategories.rankings_multiplayer
+    ) {
+      setCurrentLeaderboard(rankings.rankings_multiplayer);
+    } else {
+      setCurrentLeaderboard(rankings.rankings_overall);
     }
-    const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
-
-    const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
-
-    enum RankingCategories {
-        rankings_overall,
-        rankings_multiplayer,
-        rankings_singleplayer
-    }
-    const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
-    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) {
-            setCurrentLeaderboard(rankings.rankings_singleplayer)
-        } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(rankings.rankings_multiplayer)
-        } else {
-            setCurrentLeaderboard(rankings.rankings_overall)
-        }
-        setLoad(true);
-        setLeaderboardLoad(true);
+    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) {
+        // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+        setCurrentLeaderboard(rankings.rankings_singleplayer);
+      } else if (
+        currentLeaderboardType == RankingCategories.rankings_multiplayer
+      ) {
+        setCurrentLeaderboard(rankings.rankings_multiplayer);
+      } else {
+        setCurrentLeaderboard(rankings.rankings_overall);
+      }
+      setLeaderboardLoad(true);
+    } catch (e) {
+      console.log(e);
     }
-
-    const __dev_fetch_unofficial_rankings = async () => {
-        try {
-            setLeaderboardLoad(false);
-            const rankings = await API.get_unofficial_rankings();
-            setLeaderboardData(rankings);
-            if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-                // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
-                setCurrentLeaderboard(rankings.rankings_singleplayer)
-            } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-                setCurrentLeaderboard(rankings.rankings_multiplayer)
-            } else {
-                setCurrentLeaderboard(rankings.rankings_overall)
-            }
-            setLeaderboardLoad(true);
-        } catch (e) {
-            console.log(e)
-        }
+  };
+
+  const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
+    if (ranking_cat == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
+    } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
+      setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
+    } else {
+      setCurrentLeaderboard(leaderboardData!.rankings_overall);
     }
 
-    const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
-        if (ranking_cat == RankingCategories.rankings_singleplayer) {
-            setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
-        } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-        } else {
-            setCurrentLeaderboard(leaderboardData!.rankings_overall);
-        }
+    setCurrentLeaderboardType(ranking_cat);
+  };
 
-        setCurrentLeaderboardType(ranking_cat);
+  const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+    if (leaderboard_type == LeaderboardTypes.official) {
+      _fetch_rankings();
+    } else {
     }
+  };
 
-    const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
-        if (leaderboard_type == LeaderboardTypes.official) {
-            _fetch_rankings();
-        } else {
-
-        }
+  useEffect(() => {
+    _fetch_rankings();
+    if (load) {
+      _set_current_leaderboard(RankingCategories.rankings_singleplayer);
     }
-
-    useEffect(() => {
-        _fetch_rankings();
-        if (load) {
-            _set_current_leaderboard(RankingCategories.rankings_singleplayer);
-        }
-    }, [load])
-
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Rankings</title>
-            </Helmet>
-            <section className="nav-container nav-1">
-                <div>
-                    <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(); 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 ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
-                        <span>Singleplayer</span>
-                    </button>
-                    <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 ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
-                        <span>Overall</span>
-                    </button>
-                </div>
-            </section>
-
-            {load ?
-                <section className="rankings-leaderboard">
-                    <div className="ranks-container">
-                        <div className="leaderboard-entry header">
-                            <span>Rank</span>
-                            <span>Player</span>
-                            <span>Portals</span>
-                        </div>
-
-                        <div className="splitter"></div>
-
-                        {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}
-        </main>
-    )
-}
+  }, [load]);
+
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Rankings</title>
+      </Helmet>
+      <section className="nav-container nav-1">
+        <div>
+          <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();
+              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 ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? 'selected' : ''}`}
+          >
+            <span>Singleplayer</span>
+          </button>
+          <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 ${currentLeaderboardType == RankingCategories.rankings_overall ? 'selected' : ''}`}
+          >
+            <span>Overall</span>
+          </button>
+        </div>
+      </section>
+
+      {load ? (
+        <section className="rankings-leaderboard">
+          <div className="ranks-container">
+            <div className="leaderboard-entry header">
+              <span>Rank</span>
+              <span>Player</span>
+              <span>Portals</span>
+            </div>
+
+            <div className="splitter"></div>
+
+            {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}
+    </main>
+  );
+};
 
 export default Rankings;
-- 
cgit v1.2.3