refactor: rankings page

1 files changed, 36 insertions, 14 deletions

diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index 023a896..58a6aa6 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -1,24 +1,46 @@
 import React from 'react';
 import { Link } from "react-router-dom";
-import { RankingType } from '../types/Ranking';
+import { RankingType, SteamRanking, SteamRankingType } from '../types/Ranking';
+
+enum RankingCategories {
+    rankings_overall,
+    rankings_multiplayer,
+    rankings_singleplayer
+}
 
 interface RankingEntryProps {
-    curRankingData: RankingType;
+    curRankingData: RankingType | SteamRankingType;
+    currentLeaderboardType: RankingCategories
 };
 
-const RankingEntry: React.FC<RankingEntryProps> = (curRankingData) => {
-    return (
-        <div className='leaderboard-entry'>
-            <span>{curRankingData.curRankingData.placement}</span>
-            <div>
-            <Link to={`/users/${curRankingData.curRankingData.user.steam_id}`}>           
-                <img src={curRankingData.curRankingData.user.avatar_link}></img>
-                <span>{curRankingData.curRankingData.user.user_name}</span>
-            </Link>
+const RankingEntry: React.FC<RankingEntryProps> = (prop) => {
+    if ("placement" in prop.curRankingData) {
+        return (
+            <div className='leaderboard-entry'>
+                <span>{prop.curRankingData.placement}</span>
+                <div>
+                <Link to={`/users/${prop.curRankingData.user.steam_id}`}>           
+                    <img src={prop.curRankingData.user.avatar_link}></img>
+                    <span>{prop.curRankingData.user.user_name}</span>
+                </Link>
+                </div>
+                <span>{prop.curRankingData.total_score}</span>
+            </div>
+        )
+    } else {
+        return (
+            <div className='leaderboard-entry'>
+                <span>{prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_rank : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_rank : prop.curRankingData.overall_rank}</span>
+                <div>
+                <Link to={`/users/${prop.curRankingData.steam_id}`}>           
+                    <img src={prop.curRankingData.avatar_link}></img>
+                    <span>{prop.curRankingData.user_name}</span>
+                </Link>
+                </div>
+                <span>{prop.curRankingData.overall_score}</span>
             </div>
-            <span>{curRankingData.curRankingData.total_score}</span>
-        </div>
-    )
+        )
+    }
 }
 
 export default RankingEntry;