refactor: make names clickable throughout the site, fix user pages

9 files changed, 38 insertions, 17 deletions

diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx
index 1f77088..30c0ad6 100644
--- a/frontend/src/api/Api.tsx
+++ b/frontend/src/api/Api.tsx
@@ -145,7 +145,17 @@ const get_map_leaderboard = async (map_id: string): Promise<MapLeaderboard | und
   if (!response.data.success) {
     return undefined;
   }
-  return response.data.data;
+  const data = response.data.data;
+  // map the kind of leaderboard
+  data.records = data.records.map((record: any) => {
+    if (record.host && record.partner) {
+      return { ...record, kind: 'multiplayer' };
+    } else {
+      return { ...record, kind: 'singleplayer' };
+    }
+  });
+  // should be unreachable
+  return undefined;
 };
 
 // MAP DISCUSSIONS
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index 1cd3523..787104b 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -5,6 +5,7 @@ import { MapDiscussionCommentContent, MapDiscussionContent } from '../types/Cont
 import { time_ago } from '../utils/Time';
 import { API } from '../api/Api';
 import "../css/Maps.css"
+import { Link } from 'react-router-dom';
 
 interface DiscussionsProps {
   data?: MapDiscussions;
@@ -88,7 +89,9 @@ const Discussions: React.FC<DiscussionsProps> = ({ data, isModerator, mapID, onR
                 </div>
 
                 <div>
-                  <img src={discussionThread.discussion.creator.avatar_link} alt="" />
+                  <Link to={`/users/${discussionThread.discussion.creator.steam_id}`}>
+                    <img src={discussionThread.discussion.creator.avatar_link} alt="" />
+                  </Link>
                   <div>
                     <span>{discussionThread.discussion.creator.user_name}</span>
                     <span>{time_ago(new Date(discussionThread.discussion.created_at.replace("T", " ").replace("Z", "")))}</span>
@@ -98,7 +101,9 @@ const Discussions: React.FC<DiscussionsProps> = ({ data, isModerator, mapID, onR
                     discussionThread.discussion.comments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
                       .map(e => (
                         <>
-                          <img src={e.user.avatar_link} alt="" />
+                          <Link to={`/users/${e.user.steam_id}`}>
+                            <img src={e.user.avatar_link} alt="" />
+                          </Link>
                           <div>
                             <span>{e.user.user_name}</span>
                             <span>{time_ago(new Date(e.date.replace("T", " ").replace("Z", "")))}</span>
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index badff37..159f3ed 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { DownloadIcon, ThreedotIcon } from '../images/Images';
 import { MapLeaderboard } from '../types/Map';
@@ -70,11 +71,13 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
             <span> </span>
             {r.kind === "multiplayer" ? (
               <div>
-                <span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span>
-                <span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span>
+                  <Link to={`/users/${r.host.steam_id}`}><span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span></Link>
+                  <Link to={`/users/${r.partner.steam_id}`}><span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span></Link>
+              </div>
+            ) : r.kind === "singleplayer" && (
+              <div>
+                  <Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></Link>
               </div>
-            ) : (
-              <div><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></div>
             )}
 
             <span>{r.score_count}</span>
@@ -88,7 +91,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
                 <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button>
                 <button onClick={() => window.location.href = `https://lp.ardapektezol.com/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button>
               </span>
-            ) : (
+            ) : r.kind === "singleplayer" && (
 
               <span>
                 <button onClick={() => { window.alert(`Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index b77bb3d..023a896 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -11,8 +11,10 @@ const RankingEntry: React.FC<RankingEntryProps> = (curRankingData) => {
         <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>
             </div>
             <span>{curRankingData.curRankingData.total_score}</span>
         </div>
diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css
index d38eea5..b69f588 100644
--- a/frontend/src/css/Maps.css
+++ b/frontend/src/css/Maps.css
@@ -399,7 +399,7 @@ text-align: center;
     height: 44px;
 }
 
-.leaderboard-record>div>span>img{
+.leaderboard-record>div>a>span>img{
     height: 36px;
     border-radius: 50px;
     padding: 0;
@@ -410,7 +410,7 @@ text-align: center;
     grid-template-columns: 50% 50%;
     place-items: left;
 }
-.leaderboard-record>div>span{
+.leaderboard-record>div>a>span{
     display: flex;
     place-items: center;
     height: 44px;
@@ -611,7 +611,7 @@ text-align: center;
 }
 
 
-#discussion-thread>div:nth-child(2)>img{
+#discussion-thread>div:nth-child(2)>a>img{
     width: 60px; height: 60px;
     border-radius: 100px;
     margin: 20px 0 0 0;
diff --git a/frontend/src/css/Rankings.css b/frontend/src/css/Rankings.css
index 8e49ef9..edc5a00 100644
--- a/frontend/src/css/Rankings.css
+++ b/frontend/src/css/Rankings.css
@@ -32,11 +32,11 @@
 }
 
 .nav-1 div {
-    width: 65%;
+    width: 60%;
 }
 
 .nav-2 div {
-    width: 80%;
+    width: 75%;
 }
 
 .rankings-leaderboard {
@@ -73,12 +73,12 @@
     text-align: left;
 }
 
-.leaderboard-entry div {
+.leaderboard-entry div a {
     display: flex;
     align-items: center;
 }
 
-.leaderboard-entry div span {
+.leaderboard-entry div a span {
     margin-left: 5px;
 }
 
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index d4f3095..8e5bb4b 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -10,7 +10,7 @@ const Homepage: React.FC = () => {
                 <h1><img src={PortalIcon} alt="lphub"/>Welcome to Least Portals Hub!</h1>
                 <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
                 <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
-                <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About P2LP' pages.</p>
+                <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
             </section>
         </main>
     );
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index 5548650..62fc3cc 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -39,6 +39,7 @@ const Maps: React.FC<MapProps> = ({ profile, isModerator, onUploadRun }) => {
 
   const _fetch_map_leaderboards = async () => {
     const mapLeaderboards = await API.get_map_leaderboard(mapID);
+    console.log(mapLeaderboards?.records[0]);
     setMapLeaderboardData(mapLeaderboards);
   };
 
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index 1f6d8d0..1605ada 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -79,7 +79,7 @@ const User: React.FC = () => {
 
   React.useEffect(() => {
     _fetch_user();
-  }, []);
+  }, [user]);
 
   React.useEffect(() => {
     if (game !== "0") {