add metadata,create capitalizeFirstLetter util + his test

WildCodeSchool · Aug 23, 2024 · 392b5c1 · 392b5c1
1 parent 53cf569
commit 392b5c1
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 14 deletions.
diff --git a/frontend/src/pages/admin/city/edit/[id].tsx b/frontend/src/pages/admin/city/edit/[id].tsx
@@ -4,10 +4,11 @@ import { EDIT_CITY_BY_ID } from "@mutations";
 import { GET_CITY_BY_ID } from "@queries";
 import { mainTheme } from "@theme";
 import { CityInput } from "@types";
-import { useAuth } from "../../../context";
+import { useAuth } from "context";
 import { useRouter } from "next/router";
 import React from "react";
 import { toast } from "react-toastify";
+import { capitalizeFirstLetter } from "utils";
 
 const EditCityByID = () => {
 	const { isAuthenticated } = useAuth();
@@ -34,7 +35,7 @@ const EditCityByID = () => {
 		editCity({
 			variables: {
 				cityData: {
-					name: form.name.charAt(0).toUpperCase() + form.name.slice(1),
+					name: capitalizeFirstLetter(form.name),
 					description: form.description,
 				},
 				updateCityId: cityData?.getCityById?.id,

diff --git a/frontend/src/pages/city/search/[keyword].tsx b/frontend/src/pages/city/search/[keyword].tsx
@@ -7,6 +7,8 @@ import { CategoryType, CityType, PoiType } from "@types";
 import { Box, CircularProgress, Grid, Typography } from "@mui/material";
 import { mainTheme } from "@theme";
 import { toast } from "react-toastify";
+import Head from "next/head";
+import { capitalizeFirstLetter } from "utils";
 
 const defaultState: CityType = {
 	name: "",
@@ -17,8 +19,6 @@ const defaultState: CityType = {
 };
 
 const SearchResults = () => {
-	const latFrance = 46.603354;
-	const lonFrance = 1.888334;
 	const router = useRouter();
 	const [searchedCity, setSearchedCity] = useState<CityType>(defaultState);
 	const [activePoiId, setActivePoiId] = useState<number | null>(null);
@@ -109,7 +109,25 @@ const SearchResults = () => {
 		<CircularProgress />
 	) : (
 		<>
-			<title>Liste des lieux d&#39;intérêts de la ville de {searchedCity.name}</title>
+			<Head>
+				<title>
+					Liste des lieux d&#39;intérêts de la ville de {searchedCity.name} |
+					CityGuide
+				</title>
+				<meta
+					name="title"
+					content={`Liste des lieux d'intérêts de la ville de ${searchedCity.name}`}
+				/>
+				<meta
+					name="description"
+					content={`Explorez, partagez et découvrez ${searchedCity.name}`}
+				/>
+				<meta name="author" content="CityGuide Team" />
+				<meta
+					name="keywords"
+					content={`CityGuide, explorez, partagez, découvrez, ville, point d'intérêt, POI,${searchedCity.name}`}
+				/>
+			</Head>
 			<Grid
 				container
 				display="flex"
@@ -140,14 +158,16 @@ const SearchResults = () => {
 							isActive={activeCategories.length === 0}
 							onClick={() => handleCategoryTagClick("Tous les catégories")}
 						/>
-						{categoryTags.map((category) => (
-							<Tag
-								key={category.id}
-								name={category.name}
-								isActive={activeCategories.includes(category.name)}
-								onClick={() => handleCategoryTagClick(category.name)}
-							/>
-						))}
+						{categoryTags.map((category) => {
+							return (
+								<Tag
+									key={category.id}
+									name={capitalizeFirstLetter(category.name)}
+									isActive={activeCategories.includes(category.name)}
+									onClick={() => handleCategoryTagClick(category.name)}
+								/>
+							);
+						})}
 					</Box>
 					{searchedCity.name !== "" && data!! ? (
 						<Box

diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -4,11 +4,21 @@ import Typography from "@mui/material/Typography";
 import { Box, Stack } from "@mui/material";
 import { mainTheme } from "@theme";
 import { ReactTyped } from "react-typed";
+import Head from "next/head";
 
 const Home = () => {
 	return (
 		<>
-			<title>Accueil</title>
+			<Head>
+				<title>Accueil | CityGuide</title>
+				<meta name="title" content="Accueil | CityGuide" />
+				<meta name="description" content="Explorez, partagez et découvrez" />
+				<meta name="author" content="CityGuide Team" />
+				<meta
+					name="keywords"
+					content="CityGuide, explorez, partagez, découvrez, ville, point d'intérêt, POI, tourisme, visitez"
+				/>
+			</Head>
 			<Stack
 				direction="row"
 				display="flex"

diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
@@ -0,0 +1,8 @@
+export const capitalizeFirstLetter = (word: string) => {
+	if (!word) {
+		throw new Error("String can not be empty.");
+	}
+	return (
+		word.trim().charAt(0).toUpperCase() + word.trim().slice(1).toLowerCase()
+	);
+};
diff --git a/frontend/tests/capitalizeFirstLetter.test.tsx b/frontend/tests/capitalizeFirstLetter.test.tsx
@@ -0,0 +1,29 @@
+import { capitalizeFirstLetter } from "../src/utils";
+
+describe("capitalizeFirstLetter utils", () => {
+	test("capitalize the first letter of a word", () => {
+		expect(capitalizeFirstLetter("test")).toBe("Test");
+	});
+
+	test("capitalize the first letter and makes other letters lowercase", () => {
+		expect(capitalizeFirstLetter("tEST")).toBe("Test");
+	});
+
+	test("When string is empty, trigger a new error", () => {
+		expect(() => {
+			capitalizeFirstLetter("");
+		}).toThrow();
+	});
+
+	test("process strings with leading spaces", () => {
+		expect(capitalizeFirstLetter("   hello")).toBe("Hello");
+	});
+
+	test("process strings with only one character", () => {
+		expect(capitalizeFirstLetter("t")).toBe("T");
+	});
+
+	test("keep non-alphabetic characters unchanged at the start", () => {
+		expect(capitalizeFirstLetter("123test")).toBe("123test");
+	});
+});