Include competition name in page title

thewca · Dec 16, 2024 · 5702cad · 5702cad
1 parent b476dde
commit 5702cad
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 16 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -28,6 +28,7 @@
     "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^6.0.2",
     "react-timeago": "^7.1.0",
     "react-virtualized-auto-sizer": "^1.0.6",

diff --git a/client/src/components/App/App.jsx b/client/src/components/App/App.jsx
@@ -4,28 +4,34 @@ import { ConfirmProvider } from "material-ui-confirm";
 import { ApolloProvider } from "@apollo/client";
 import { SnackbarProvider } from "notistack";
 import { StyledEngineProvider } from "@mui/material/styles";
+import { Helmet, HelmetProvider } from "react-helmet-async";
 import { client } from "./apollo";
 import ThemeProvider from "../ThemeProvider/ThemeProvider";
 import Navigation from "../Navigation/Navigation";
 
 function App() {
   return (
-    <Router>
-      <ApolloProvider client={client}>
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider>
-            <SnackbarProvider
-              anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-            >
-              <ConfirmProvider>
-                <CssBaseline />
-                <Navigation />
-              </ConfirmProvider>
-            </SnackbarProvider>
-          </ThemeProvider>
-        </StyledEngineProvider>
-      </ApolloProvider>
-    </Router>
+    <HelmetProvider>
+      <Helmet>
+        <title>WCA Live</title>
+      </Helmet>
+      <Router>
+        <ApolloProvider client={client}>
+          <StyledEngineProvider injectFirst>
+            <ThemeProvider>
+              <SnackbarProvider
+                anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+              >
+                <ConfirmProvider>
+                  <CssBaseline />
+                  <Navigation />
+                </ConfirmProvider>
+              </SnackbarProvider>
+            </ThemeProvider>
+          </StyledEngineProvider>
+        </ApolloProvider>
+      </Router>
+    </HelmetProvider>
   );
 }
 

diff --git a/client/src/components/CompetitionNavigation/CompetitionNavigation.jsx b/client/src/components/CompetitionNavigation/CompetitionNavigation.jsx
@@ -1,5 +1,6 @@
 import { Routes, Route, Navigate, useParams } from "react-router-dom";
 import { gql, useQuery } from "@apollo/client";
+import { Helmet } from "react-helmet-async";
 import CompetitionHome from "../CompetitionHome/CompetitionHome";
 import Round from "../Round/Round";
 import Competitors from "../Competitors/Competitors";
@@ -54,6 +55,11 @@ function CompetitionNavigation() {
   return (
     <CompetitionLayout competition={competition}>
       {loading && <Loading />}
+      {competition && (
+        <Helmet>
+          <title>{competition.shortName} - WCA Live</title>
+        </Helmet>
+      )}
       <Routes>
         <Route path="" element={<CompetitionHome />} />
         <Route path="rounds/:roundId/*" element={<Round />} />