diff options
Diffstat (limited to 'frontend/src/pages/Rankings.tsx')
| -rw-r--r-- | frontend/src/pages/Rankings.tsx | 30 |
1 files changed, 17 insertions, 13 deletions
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx index cdb87a8..71aa427 100644 --- a/frontend/src/pages/Rankings.tsx +++ b/frontend/src/pages/Rankings.tsx | |||
| @@ -1,4 +1,5 @@ | |||
| 1 | import React, { useEffect } from "react"; | 1 | import React, { useEffect } from "react"; |
| 2 | import { Helmet } from "react-helmet"; | ||
| 2 | 3 | ||
| 3 | import RankingEntry from "@components/RankingEntry"; | 4 | import RankingEntry from "@components/RankingEntry"; |
| 4 | import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking"; | 5 | import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking"; |
| @@ -13,9 +14,9 @@ const Rankings: React.FC = () => { | |||
| 13 | official, | 14 | official, |
| 14 | unofficial | 15 | unofficial |
| 15 | } | 16 | } |
| 16 | const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official); | 17 | const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official); |
| 17 | 18 | ||
| 18 | const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false); | 19 | const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false); |
| 19 | 20 | ||
| 20 | enum RankingCategories { | 21 | enum RankingCategories { |
| 21 | rankings_overall, | 22 | rankings_overall, |
| @@ -26,7 +27,7 @@ const Rankings: React.FC = () => { | |||
| 26 | const [load, setLoad] = React.useState<boolean>(false); | 27 | const [load, setLoad] = React.useState<boolean>(false); |
| 27 | 28 | ||
| 28 | const _fetch_rankings = async () => { | 29 | const _fetch_rankings = async () => { |
| 29 | setLeaderboardLoad(false); | 30 | setLeaderboardLoad(false); |
| 30 | const rankings = await API.get_official_rankings(); | 31 | const rankings = await API.get_official_rankings(); |
| 31 | setLeaderboardData(rankings); | 32 | setLeaderboardData(rankings); |
| 32 | if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { | 33 | if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { |
| @@ -37,12 +38,12 @@ const Rankings: React.FC = () => { | |||
| 37 | setCurrentLeaderboard(rankings.rankings_overall) | 38 | setCurrentLeaderboard(rankings.rankings_overall) |
| 38 | } | 39 | } |
| 39 | setLoad(true); | 40 | setLoad(true); |
| 40 | setLeaderboardLoad(true); | 41 | setLeaderboardLoad(true); |
| 41 | } | 42 | } |
| 42 | 43 | ||
| 43 | const __dev_fetch_unofficial_rankings = async () => { | 44 | const __dev_fetch_unofficial_rankings = async () => { |
| 44 | try { | 45 | try { |
| 45 | setLeaderboardLoad(false); | 46 | setLeaderboardLoad(false); |
| 46 | const rankings = await API.get_unofficial_rankings(); | 47 | const rankings = await API.get_unofficial_rankings(); |
| 47 | setLeaderboardData(rankings); | 48 | setLeaderboardData(rankings); |
| 48 | if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { | 49 | if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { |
| @@ -53,7 +54,7 @@ const Rankings: React.FC = () => { | |||
| 53 | } else { | 54 | } else { |
| 54 | setCurrentLeaderboard(rankings.rankings_overall) | 55 | setCurrentLeaderboard(rankings.rankings_overall) |
| 55 | } | 56 | } |
| 56 | setLeaderboardLoad(true); | 57 | setLeaderboardLoad(true); |
| 57 | } catch (e) { | 58 | } catch (e) { |
| 58 | console.log(e) | 59 | console.log(e) |
| 59 | } | 60 | } |
| @@ -88,12 +89,15 @@ const Rankings: React.FC = () => { | |||
| 88 | 89 | ||
| 89 | return ( | 90 | return ( |
| 90 | <main> | 91 | <main> |
| 92 | <Helmet> | ||
| 93 | <title>LPHUB | Rankings</title> | ||
| 94 | </Helmet> | ||
| 91 | <section className="nav-container nav-1"> | 95 | <section className="nav-container nav-1"> |
| 92 | <div> | 96 | <div> |
| 93 | <button onClick={() => {_fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}> | 97 | <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}> |
| 94 | <span>Official (LPHUB)</span> | 98 | <span>Official (LPHUB)</span> |
| 95 | </button> | 99 | </button> |
| 96 | <button onClick={() => {__dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}> | 100 | <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}> |
| 97 | <span>Unofficial (Steam)</span> | 101 | <span>Unofficial (Steam)</span> |
| 98 | </button> | 102 | </button> |
| 99 | </div> | 103 | </div> |
| @@ -128,11 +132,11 @@ const Rankings: React.FC = () => { | |||
| 128 | }) | 132 | }) |
| 129 | } | 133 | } |
| 130 | 134 | ||
| 131 | {leaderboardLoad ? null : | 135 | {leaderboardLoad ? null : |
| 132 | <div style={{display: "flex", justifyContent: "center", margin: "30px 0px"}}> | 136 | <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}> |
| 133 | <span className="loader"></span> | 137 | <span className="loader"></span> |
| 134 | </div> | 138 | </div> |
| 135 | } | 139 | } |
| 136 | </div> | 140 | </div> |
| 137 | </section> | 141 | </section> |
| 138 | : null} | 142 | : null} |