refactor: upload run dialog, useMessage update, added loader spinner

2 files changed, 28 insertions, 12 deletions

diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 5d1c75d..3dba3ae 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -103,10 +103,12 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   };
 
   return (
-    <main>
-      {ConfirmDialogComponent}
-      {MessageDialogComponent}
-      <section id='section1' className='profile'>
+        <div>
+        {MessageDialogComponent}
+    {ConfirmDialogComponent}
+
+    <main>      
+        <section id='section1' className='profile'>
 
         {profile.profile
           ? (
@@ -266,7 +268,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                         <span>{e.date.split("T")[0]}</span>
                         <span style={{ flexDirection: "row-reverse" }}>
 
-                          <button style={{ marginRight: "10px" }} onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                          <button style={{ marginRight: "10px" }} onClick={() => { message("Demo information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
                           <button onClick={() => { _delete_submission(r.map_id, e.record_id) }}><img src={DeleteIcon}></img></button>
                           <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                           {i === 0 && r.scores.length > 1 ? <button onClick={() => {
@@ -312,7 +314,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                           <span>{record!.scores[i].date.split("T")[0]}</span>
                           <span style={{ flexDirection: "row-reverse" }}>
 
-                            <button onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                            <button onClick={() => { message("Demo information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
                             <button onClick={() => { _delete_submission(r.id, e.record_id) }}><img src={DeleteIcon}></img></button>
                             <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                             {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
@@ -333,6 +335,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
         </div>
       </section>
     </main>
+        </div>
   );
 };
 
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 9280b02..1830815 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -13,6 +13,9 @@ const Rankings: React.FC = () => {
         official,
         unofficial
     }
+        const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+
+        const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
 
     enum RankingCategories {
         rankings_overall,
@@ -23,6 +26,7 @@ const Rankings: React.FC = () => {
     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) {
@@ -33,10 +37,12 @@ const Rankings: React.FC = () => {
             setCurrentLeaderboard(rankings.rankings_overall)
         }
         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) {
@@ -47,6 +53,7 @@ const Rankings: React.FC = () => {
             } else {
                 setCurrentLeaderboard(rankings.rankings_overall)
             }
+                        setLeaderboardLoad(true);
         } catch (e) {
             console.log(e)
         }
@@ -83,23 +90,23 @@ const Rankings: React.FC = () => {
         <main>
             <section className="nav-container nav-1">
                 <div>
-                    <button onClick={() => _fetch_rankings()} className="nav-1-btn">
+                    <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()} className="nav-1-btn">
+                    <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">
+                    <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">
+                    <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">
+                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
                         <span>Overall</span>
                     </button>
                 </div>
@@ -116,10 +123,16 @@ const Rankings: React.FC = () => {
 
                         <div className="splitter"></div>
 
-                        {currentLeaderboard?.map((curRankingData, i) => {
+                        {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}