Add titles and fix unauthed redirect to login

ddvleeuwen · ddvleeuwen · commit 8677e02257b4 · 2024-07-23T16:42:16.000+02:00
diff --git a/src/context/AuthContextProvider.tsx b/src/context/AuthContextProvider.tsx
@@ -11,7 +11,7 @@ const AuthContextProvider = ({ children }: AuthContextProviderType) => {
   const route = useLocation();
 
   if (!localStorage.getItem('token')) {
-    return <Navigate to={`/login?to=${route.pathname}`}/>;
+    return <Navigate replace={true} to={`/login?to=${route.pathname}`}/>;
   }
 
   return (
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
@@ -1,6 +1,10 @@
 import Headline from "../components/landing/Headline.tsx";
+import { useEffect } from "react";
+import { setSubTitle } from "../utils/title.tsx";
 
 const LandingPage = () => {
+  useEffect(() => setSubTitle('Meet new people'), []);
+
   return (
     <div className="flex flex-col">
       <Headline />
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
@@ -1,10 +1,13 @@
 import { Button } from '@headlessui/react'
 import { useNavigate } from "react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Field from "../components/generic/Field.tsx";
 import { login } from "../services/auth.service.tsx";
+import { setSubTitle } from "../utils/title.tsx";
 
 const LoginPage = () => {
+  useEffect(() => setSubTitle('Login'), []);
+
   const queryParameters = new URLSearchParams(window.location.search)
   const code = queryParameters.get("code")
 
@@ -17,7 +20,7 @@ const LoginPage = () => {
     if (/^\d+$/.test(loginCode)) {
       login(loginCode).then(() => {
         // use react-router route to /team
-        navigate("/team", { replace: true });
+        navigate("/team");
       }).catch(() => {
         setError("Wrong login code, please try again");
       });
diff --git a/src/pages/team/BingoPage.tsx b/src/pages/team/BingoPage.tsx
@@ -1,4 +1,9 @@
+import { useEffect } from "react";
+import { setSubTitle } from "../../utils/title.tsx";
+
 const BingoPage = () => {
+  useEffect(() => setSubTitle('Bingo'), []);
+
   return <div>BingoPage</div>;
 }
 
diff --git a/src/pages/team/CrazyPage.tsx b/src/pages/team/CrazyPage.tsx
@@ -2,8 +2,11 @@ import { useEffect, useState } from "react";
 import { getChallenges } from "../../services/challenge.service.tsx";
 import { Challenge } from "../../model/challenge.tsx";
 import CrazyChallenge from "../../components/crazy/CrazyChallenge.tsx";
+import { setSubTitle } from "../../utils/title.tsx";
 
 const CrazyPage = () => {
+  useEffect(() => setSubTitle('Crazy88'), []);
+
   const [ challenges, setChallenges ] = useState<Challenge[]>([]);
 
   useEffect(() => {
diff --git a/src/pages/team/TeamOverviewPage.tsx b/src/pages/team/TeamOverviewPage.tsx
@@ -1,10 +1,13 @@
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import BingoPage from "./BingoPage.tsx";
 import CrazyPage from "./CrazyPage.tsx";
 import AuthContextProvider from "../../context/AuthContextProvider.tsx";
+import { setSubTitle } from "../../utils/title.tsx";
 
 const TeamOverviewPage = () => {
+  useEffect(() => setSubTitle('Crazy88'), []);
+
   const queryParameters = new URLSearchParams(window.location.search)
   const page = queryParameters.get("page")
   const [ isRight, setIsRight ] = useState(page == "bingo");
diff --git a/src/utils/title.tsx b/src/utils/title.tsx
@@ -0,0 +1,5 @@
+import { cst } from "../constants.tsx";
+
+export const setSubTitle = (subTitle: string) => {
+  document.title = `${cst.title} - ${subTitle}`
+}

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const AuthContextProvider = ({ children }: AuthContextProviderType) => {`
`11`	`11`	`const route = useLocation();`
`12`	`12`
`13`	`13`	`if (!localStorage.getItem('token')) {`
`14`		- return <Navigate to={`/login?to=${route.pathname}`}/>;
	`14`	+ return <Navigate replace={true} to={`/login?to=${route.pathname}`}/>;
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,9 @@`
	`1`	`+import { useEffect } from "react";`
	`2`	`+import { setSubTitle } from "../../utils/title.tsx";`
	`3`	`+`
`1`	`4`	`const BingoPage = () => {`
	`5`	`+ useEffect(() => setSubTitle('Bingo'), []);`
	`6`	`+`
`2`	`7`	`return <div>BingoPage</div>;`
`3`	`8`	`}`
`4`	`9`