From 681f7d3ba097cd8d204ff3ac4dae01432d323e5b Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Thu, 30 Jan 2025 14:43:17 +0300
Subject: feat/frontend: dynamic title and meta descriptions (#261)

---
 frontend/src/pages/About.tsx    |  4 ++++
 frontend/src/pages/Games.tsx    | 12 +++++++----
 frontend/src/pages/Homepage.tsx |  6 +++++-
 frontend/src/pages/Maplist.tsx  | 48 ++++++++++++++++++++++-------------------
 frontend/src/pages/Maps.tsx     | 37 ++++++++++++++++++-------------
 frontend/src/pages/Profile.tsx  |  5 +++++
 frontend/src/pages/Rankings.tsx | 30 +++++++++++++++-----------
 frontend/src/pages/Rules.tsx    |  4 ++++
 frontend/src/pages/User.tsx     |  5 +++++
 9 files changed, 96 insertions(+), 55 deletions(-)

(limited to 'frontend/src/pages')

diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index ded3461..a8b7826 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import { Helmet } from 'react-helmet';
 
 import '@css/About.css';
 
@@ -28,6 +29,9 @@ const About: React.FC = () => {
 
     return (
         <div id="about">
+            <Helmet>
+                <title>LPHUB | About</title>
+            </Helmet>
             <ReactMarkdown>{aboutText}</ReactMarkdown>
         </div>
     );
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index 15105c9..15cc891 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import GameEntry from '@components/GameEntry';
 import { Game } from '@customTypes/Game';
@@ -11,10 +12,10 @@ interface GamesProps {
 const Games: React.FC<GamesProps> = ({ games }) => {
 
     const _page_load = () => {
-      const loaders = document.querySelectorAll(".loader");
-      loaders.forEach((loader) => {
-          (loader as HTMLElement).style.display = "none";
-      });
+        const loaders = document.querySelectorAll(".loader");
+        loaders.forEach((loader) => {
+            (loader as HTMLElement).style.display = "none";
+        });
     }
 
     React.useEffect(() => {
@@ -26,6 +27,9 @@ const Games: React.FC<GamesProps> = ({ games }) => {
 
     return (
         <div className='games-page'>
+            <Helmet>
+                <title>LPHUB | Games</title>
+            </Helmet>
             <section>
                 <div className='games-page-content'>
                     <div className='games-page-item-content'>
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 68562b6..4f46af5 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 const Homepage: React.FC = () => {
 
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | Homepage</title>
+            </Helmet>
             <section>
-                <p/>
+                <p />
                 <h1>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>
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 8fc52b0..04938cf 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 import "@css/Maplist.css";
 import { API } from "@api/Api";
@@ -25,9 +26,9 @@ const Maplist: React.FC = () => {
   const navigate = useNavigate();
 
   function _update_currently_selected(catNum2: number) {
-      setCurrentlySelected(catNum2);
-      navigate("/games/" + game?.id + "?cat=" + catNum2);
-      setHasClicked(true);
+    setCurrentlySelected(catNum2);
+    navigate("/games/" + game?.id + "?cat=" + catNum2);
+    setHasClicked(true);
   }
 
   const _fetch_chapters = async (chapter_id: string) => {
@@ -52,12 +53,12 @@ const Maplist: React.FC = () => {
     // location query params
     const queryParams = new URLSearchParams(location.search);
     if (queryParams.get("chapter")) {
-        let cat = parseFloat(queryParams.get("chapter") || "");
-		if (gameId == 2) {
-			cat += 10;
-		}
-		_fetch_chapters(cat.toString());
-	}
+      let cat = parseFloat(queryParams.get("chapter") || "");
+      if (gameId == 2) {
+        cat += 10;
+      }
+      _fetch_chapters(cat.toString());
+    }
 
     const _fetch_game = async () => {
       const games = await API.get_games();
@@ -68,7 +69,7 @@ const Maplist: React.FC = () => {
         setLoad(false);
       }
     };
-    
+
     const _fetch_game_chapters = async () => {
       const games_chapters = await API.get_games_chapters(gameId.toString());
       setGameChapters(games_chapters);
@@ -81,7 +82,7 @@ const Maplist: React.FC = () => {
   }, []);
 
   useEffect(() => {
-  	const queryParams = new URLSearchParams(location.search);
+    const queryParams = new URLSearchParams(location.search);
     if (gameChapters != undefined && !queryParams.get("chapter")) {
       _fetch_chapters(gameChapters!.chapters[0].id.toString());
     }
@@ -91,6 +92,9 @@ const Maplist: React.FC = () => {
 
   return (
     <main>
+      <Helmet>
+        <title>LPHUB | Maplist</title>
+      </Helmet>
       <section style={{ marginTop: "20px" }}>
         <Link to="/games">
           <button className="nav-button" style={{ borderRadius: "20px" }}>
@@ -121,7 +125,7 @@ const Maplist: React.FC = () => {
               </div>
               <div className="game-header-categories">
                 {game?.category_portals.map((cat, index) => (
-                  <button key={index} className={currentlySelected == cat.category.id || cat.category.id - 1 == catNum && !hasClicked ? "game-cat-button selected" : "game-cat-button"} onClick={() => {setCatNum(cat.category.id - 1); _update_currently_selected(cat.category.id)}}>
+                  <button key={index} className={currentlySelected == cat.category.id || cat.category.id - 1 == catNum && !hasClicked ? "game-cat-button selected" : "game-cat-button"} onClick={() => { setCatNum(cat.category.id - 1); _update_currently_selected(cat.category.id) }}>
                     <span>{cat.category.name}</span>
                   </button>
                 ))}
@@ -132,26 +136,26 @@ const Maplist: React.FC = () => {
           <div>
             <section className="chapter-select-container">
               <div>
-                <span style={{fontSize: "18px", transform: "translateY(5px)", display: "block", marginTop: "10px"}}>{curChapter?.chapter.name.split(" - ")[0]}</span>
+                <span style={{ fontSize: "18px", transform: "translateY(5px)", display: "block", marginTop: "10px" }}>{curChapter?.chapter.name.split(" - ")[0]}</span>
               </div>
               <div onClick={_handle_dropdown_click} className="dropdown">
                 <span>{curChapter?.chapter.name.split(" - ")[1]}</span>
                 <i className="triangle"></i>
               </div>
-              <div className="dropdown-elements" style={{display: dropdownActive}}>
+              <div className="dropdown-elements" style={{ display: dropdownActive }}>
                 {gameChapters?.chapters.map((chapter, i) => {
-                  return <div className="dropdown-element" onClick={() => {_fetch_chapters(chapter.id.toString()); _handle_dropdown_click()}}>{chapter.name}</div>
+                  return <div className="dropdown-element" onClick={() => { _fetch_chapters(chapter.id.toString()); _handle_dropdown_click() }}>{chapter.name}</div>
                 })
 
                 }
               </div>
             </section>
             <section className="maplist">
-                {curChapter?.maps.map((map, i) => {
-                  return <div className="maplist-entry">
-                    <Link to={`/maps/${map.id}`}>
+              {curChapter?.maps.map((map, i) => {
+                return <div className="maplist-entry">
+                  <Link to={`/maps/${map.id}`}>
                     <span>{map.name}</span>
-                    <div className="map-entry-image" style={{backgroundImage: `url(${map.image})`}}>
+                    <div className="map-entry-image" style={{ backgroundImage: `url(${map.image})` }}>
                       <div className="blur map">
                         <span>{map.is_disabled ? map.category_portals[0].portal_count : map.category_portals.find(
                           (obj) => obj.category.id === catNum + 1
@@ -169,9 +173,9 @@ const Maplist: React.FC = () => {
                         <div className="difficulty-point"></div>
                       </div>
                     </div>
-                    </Link>
-                  </div>
-                })}
+                  </Link>
+                </div>
+              })}
             </section>
           </div>
         </section>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index f73e8d2..fb13563 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { PortalIcon, FlagIcon, ChatIcon } from '@images/Images';
 import Summary from '@components/Summary';
@@ -53,26 +54,32 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
   if (!mapSummaryData) {
     // loading placeholder
     return (
-      <main>
-        <section id='section1' className='summary1'>
-          <div>
-            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
-          </div>
-        </section>
-
-        <section id='section2' className='summary1'>
-          <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
-          <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
-          <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
-        </section>
-
-        <section id='section6' className='summary2' />
-      </main>
+      <>
+        <main>
+          <section id='section1' className='summary1'>
+            <div>
+              <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+            </div>
+          </section>
+
+          <section id='section2' className='summary1'>
+            <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
+            <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+            <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+          </section>
+
+          <section id='section6' className='summary2' />
+        </main>
+      </>
     );
   }
 
   return (
     <>
+      <Helmet>
+        <title>LPHUB | {mapSummaryData.map.map_name}</title>
+        <meta name="description" content={mapSummaryData.map.map_name} />
+      </Helmet>
       {isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
 
       <div id='background-image'>
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 63b3c13..48233bf 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
@@ -109,6 +110,10 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
 
   return (
     <div>
+      <Helmet>
+        <title>LPHUB | {profile.user_name}</title>
+        <meta name="description" content={profile.user_name} />
+      </Helmet>
       {MessageDialogComponent}
       {MessageDialogLoadComponent}
       {ConfirmDialogComponent}
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 @@
 import React, { useEffect } from "react";
+import { Helmet } from "react-helmet";
 
 import RankingEntry from "@components/RankingEntry";
 import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking";
@@ -13,9 +14,9 @@ const Rankings: React.FC = () => {
         official,
         unofficial
     }
-	const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+    const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
 
-	const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+    const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
 
     enum RankingCategories {
         rankings_overall,
@@ -26,7 +27,7 @@ const Rankings: React.FC = () => {
     const [load, setLoad] = React.useState<boolean>(false);
 
     const _fetch_rankings = async () => {
-		setLeaderboardLoad(false);
+        setLeaderboardLoad(false);
         const rankings = await API.get_official_rankings();
         setLeaderboardData(rankings);
         if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -37,12 +38,12 @@ const Rankings: React.FC = () => {
             setCurrentLeaderboard(rankings.rankings_overall)
         }
         setLoad(true);
-		setLeaderboardLoad(true);
+        setLeaderboardLoad(true);
     }
 
     const __dev_fetch_unofficial_rankings = async () => {
         try {
-			setLeaderboardLoad(false);
+            setLeaderboardLoad(false);
             const rankings = await API.get_unofficial_rankings();
             setLeaderboardData(rankings);
             if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -53,7 +54,7 @@ const Rankings: React.FC = () => {
             } else {
                 setCurrentLeaderboard(rankings.rankings_overall)
             }
-			setLeaderboardLoad(true);
+            setLeaderboardLoad(true);
         } catch (e) {
             console.log(e)
         }
@@ -88,12 +89,15 @@ const Rankings: React.FC = () => {
 
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | Rankings</title>
+            </Helmet>
             <section className="nav-container nav-1">
                 <div>
-                    <button onClick={() => {_fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
+                    <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(); setCurrentRankingType(LeaderboardTypes.unofficial)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
+                    <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
                         <span>Unofficial (Steam)</span>
                     </button>
                 </div>
@@ -128,11 +132,11 @@ const Rankings: React.FC = () => {
                         })
                         }
 
-						{leaderboardLoad ? null :
-							<div style={{display: "flex", justifyContent: "center", margin: "30px 0px"}}>
-							<span className="loader"></span>
-							</div>
-						}
+                        {leaderboardLoad ? null :
+                            <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
+                                <span className="loader"></span>
+                            </div>
+                        }
                     </div>
                 </section>
                 : null}
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index b5625ce..9f57b7e 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import { Helmet } from 'react-helmet';
 
 import '@css/Rules.css';
 
@@ -29,6 +30,9 @@ const Rules: React.FC = () => {
 
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | Rules</title>
+            </Helmet>
             <ReactMarkdown>{rulesText}</ReactMarkdown>
         </main>
     );
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index 938dbd5..d43c0c6 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
@@ -92,6 +93,10 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
   return (
     <main>
+      <Helmet>
+        <title>LPHUB | {user.user_name}</title>
+        <meta name="description" content={user.user_name} />
+      </Helmet>
       {MessageDialogComponent}
       <section id='section1' className='profile'>
         <div>
-- 
cgit v1.2.3