Added ability to change document title

erland-syafiq · Jun 3, 2024 · 2a1e0c1 · 2a1e0c1
1 parent acfa7ea
commit 2a1e0c1
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 6 deletions.
diff --git a/app/public/src/components/Navbar.jsx b/app/public/src/components/Navbar.jsx
@@ -20,12 +20,12 @@ function Navbar() {
                         <span className="navbar-toggler-icon"></span>
                     </button>
                     <div className="navbar-collapse collapse d-sm-inline-flex justify-content-end">
-                        <NavLink className="nav-link" to="/">Home</NavLink>
-                        <NavLink className="nav-link" to="/about"> About Us</NavLink>
-                        <NavLink className="nav-link" to="/committees">Committees</NavLink>
-                        <NavLink className="nav-link" to="/resources">Resources</NavLink>
-                        <NavLink className="nav-link" to="/sponsors"> Sponsors</NavLink>
-                        <NavLink className="nav-link" to="/register"> Registers</NavLink>
+                        <NavLink className="nav-link" to="/"> Home </NavLink>
+                        <NavLink className="nav-link" to="/about"> About Us </NavLink>
+                        <NavLink className="nav-link" to="/committees">Committees </NavLink>
+                        <NavLink className="nav-link" to="/resources">Resources </NavLink>
+                        <NavLink className="nav-link" to="/sponsors"> Sponsors </NavLink>
+                        <NavLink className="nav-link" to="/register"> Register </NavLink>
                     </div>
                 </div>
             </nav>

diff --git a/app/public/src/hooks/useDocumentTitle.jsx b/app/public/src/hooks/useDocumentTitle.jsx
@@ -0,0 +1,11 @@
+import React, {useEffect} from 'react';
+
+function useDocumentTitle(title) {
+    useEffect(() => {
+        const oldTitle = document.title;
+        document.title = title;
+        return () => document.title = oldTitle;
+    }, [title]);
+};
+
+export default useDocumentTitle
diff --git a/app/public/src/pages/AboutUs.jsx b/app/public/src/pages/AboutUs.jsx
@@ -2,10 +2,13 @@ import React from 'react';
 import UserCard from '../components/UserCard.jsx';
 import useStaticData from '../hooks/useStaticData.jsx';
 import './AboutUs.css';
+import useDocumentTitle from '../hooks/useDocumentTitle.jsx';
 
 function AboutUs() {
+    useDocumentTitle("About Us");
     const secretariat = useStaticData("/data/secretariat.json", []);
 
+
     return (
         <main className="container">
             <section>

diff --git a/app/public/src/pages/CommitteeDetails.jsx b/app/public/src/pages/CommitteeDetails.jsx
@@ -5,6 +5,7 @@ import NoPage from './NoPage.jsx';
 import './CommitteeDetails.css';
 import UserCard from '../components/UserCard.jsx';
 import FormattedParagraph from '../components/FormattedParagraph.jsx';
+import useDocumentTitle from '../hooks/useDocumentTitle.jsx';
 
 function findCommittee(committeeGroups, queryId) {
     for (const group of committeeGroups) {
@@ -23,6 +24,7 @@ export default function CommitteeDetails() {
     const committeeGroups = useStaticData('/data/committees.json');
     const {id} = useParams();
     if (!committeeGroups) {
+        useDocumentTitle("");
         return null;
     }
 
@@ -32,6 +34,7 @@ export default function CommitteeDetails() {
         return <NoPage />
     }
 
+    useDocumentTitle(committee.committee_name);
     const isOneChair = committee.co_chair_name == null;
 
 

diff --git a/app/public/src/pages/Committees.jsx b/app/public/src/pages/Committees.jsx
@@ -2,9 +2,12 @@ import React from 'react';
 import useStaticData from '../hooks/useStaticData.jsx';
 import Committee from '../components/Commitee';
 import './Committees.css';
+import useDocumentTitle from '../hooks/useDocumentTitle.jsx';
 
 function Committees() {
+    useDocumentTitle("Committees");
     const committeeGroups = useStaticData("/data/committees.json", []);
+
 
     return (
         <main className="container">

diff --git a/app/public/src/pages/Home.jsx b/app/public/src/pages/Home.jsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import './Home.css';
 import { Link } from 'react-router-dom';
+import useDocumentTitle from '../hooks/useDocumentTitle';
 
 function Home() {
+    useDocumentTitle("VTMUNC");
+
     return (
     <main className="container contentBackground">
         <section className="hero">

diff --git a/app/public/src/pages/NoPage.jsx b/app/public/src/pages/NoPage.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 function NoPage() {
+    useDocumentTitle("Page not found");
     return (
         <main className="vh-100 d-flex">
             <h1 className="d-flex">Error 404: Page not found</h1>

diff --git a/app/public/src/pages/Register.jsx b/app/public/src/pages/Register.jsx
@@ -2,13 +2,15 @@ import React from 'react';
 import {useState} from 'react';
 import './Register.css';
 import { useNavigate } from 'react-router-dom';
+import useDocumentTitle from '../hooks/useDocumentTitle';
 
 function isValidEmail(email) {
     const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
     return emailRegex.test(email);
 }
 
 function Register() {
+    useDocumentTitle("Register");
 
     const [formData, setFormData] = useState({
         advisorEmail: "",