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

3 files changed, 17 insertions, 7 deletions

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>