feat: dynamically update document title

yun-cheng · Mar 23, 2024 · a06d7ce · a06d7ce
1 parent ece084d
commit a06d7ce
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -5,9 +5,9 @@
 		<link rel="icon" type="image/png" href="/favicon.png" />
 		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="description" content="Vitamin" />
+		<meta name="description" content="Aha Front-End Assessment" />
 		<meta name="theme-color" content="#42b883" />
-		<title>Vitamin</title>
+		<title>Aha Front-End Assessment</title>
 	</head>
 	<body class="bg-background text-white">
 		<noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "vitamin",
+	"name": "aha-frontend-assessment",
 	"license": "MIT",
 	"private": true,
 	"version": "0.0.0",

diff --git a/src/components/common/NavBar/NavBar.tsx b/src/components/common/NavBar/NavBar.tsx
@@ -1,14 +1,15 @@
 import { hasTagsNotificationAtom } from 'atoms/core'
 import { useAtom } from 'jotai'
 import { useEffect, type ReactElement } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation, useSearchParams } from 'react-router-dom'
 import cn from 'utils/cn'
 import ArrowBackSvg from '../../../icons/ArrowBack.svg?react'
 import Logo from '../Logo'
 import NavButton from './NavButton'
 
 export default function NavBar(): ReactElement {
 	const { pathname } = useLocation()
+	const [searchParams] = useSearchParams()
 
 	const [hasTagsNotification, setHasTagsNotification] = useAtom(
 		hasTagsNotificationAtom
@@ -20,6 +21,16 @@ export default function NavBar(): ReactElement {
 		}
 	}, [pathname, setHasTagsNotification])
 
+	useEffect(() => {
+		let title = 'Aha Front-End Assessment'
+		if (pathname === '/tags') {
+			title = `Tags - ${title}`
+		} else if (pathname === '/results') {
+			title = `${searchParams.get('keyword')} - ${title}`
+		}
+		document.title = title
+	}, [pathname, searchParams])
+
 	return (
 		<>
 			<div