From 3d1081249141e33cfc2e3687533859172d0dd718 Mon Sep 17 00:00:00 2001 From: jerem Date: Mon, 23 Oct 2023 16:34:53 +0200 Subject: [PATCH] customizing page titles --- client/src/hooks/usePageTitle.js | 11 +++++++++ client/src/pages/accessibility.js | 3 +++ client/src/pages/contact.js | 3 +++ .../pages/country/components/actors/[id].js | 23 +++++++++++-------- .../pages/country/components/actors/index.js | 4 +++- client/src/pages/country/index.js | 4 +++- client/src/pages/directory/index.js | 2 ++ client/src/pages/homepage/index.js | 2 ++ client/src/pages/mentions-legales.js | 3 +++ client/src/pages/ressources/ressources.js | 3 +++ client/src/pages/team-project.js | 3 +++ 11 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 client/src/hooks/usePageTitle.js diff --git a/client/src/hooks/usePageTitle.js b/client/src/hooks/usePageTitle.js new file mode 100644 index 0000000..d01c12e --- /dev/null +++ b/client/src/hooks/usePageTitle.js @@ -0,0 +1,11 @@ +import { useEffect } from 'react'; + +export function useTitle(title) { + useEffect(() => { + const prevTitle = document.title; + document.title = title; + return () => { + document.title = prevTitle; + }; + }); +} diff --git a/client/src/pages/accessibility.js b/client/src/pages/accessibility.js index 5fbe379..2fc0430 100644 --- a/client/src/pages/accessibility.js +++ b/client/src/pages/accessibility.js @@ -1,8 +1,11 @@ /* eslint-disable max-len */ import { Link as RouterLink } from 'react-router-dom'; import { Col, Container, Row, Text, Breadcrumb, BreadcrumbItem, Title } from '@dataesr/react-dsfr'; +import { useTitle } from '../hooks/usePageTitle'; export default function MentionsLegalesPage() { + useTitle('Curiexplore - Accessibilité'); + return ( diff --git a/client/src/pages/contact.js b/client/src/pages/contact.js index 6f8e7d0..c03a9de 100644 --- a/client/src/pages/contact.js +++ b/client/src/pages/contact.js @@ -3,8 +3,11 @@ import { Link as RouterLink } from 'react-router-dom'; import { Col, Container, Row, Text, Breadcrumb, BreadcrumbItem } from '@dataesr/react-dsfr'; import image1 from '../assets/img/mail-send.svg'; +import { useTitle } from '../hooks/usePageTitle'; export default function ContactsAndResourcesPage() { + useTitle('Curiexplore - Contacts'); + return ( diff --git a/client/src/pages/country/components/actors/[id].js b/client/src/pages/country/components/actors/[id].js index a090a73..83e18d3 100644 --- a/client/src/pages/country/components/actors/[id].js +++ b/client/src/pages/country/components/actors/[id].js @@ -10,6 +10,7 @@ import Identifiers from './actors-identifiers-card'; import WebSiteCard from './actors-website-card'; import WikipediaCard from './actors-wikipedia-card'; import SocialNetworkCard from './actors-socialMedias-card'; +import { useTitle } from '../../../../hooks/usePageTitle'; function RankingCard({ link, name }) { let rankingName = ''; @@ -77,6 +78,8 @@ export default function Actor() { const actorWebsiteUrl = dataActor.websites.map((url) => url.url); const actorNameEN = dataActor.currentName.nameEn; + useTitle(`Curiexplore - ${dataActor.displayName}`); + if (!dataActor) { return (
@@ -120,16 +123,16 @@ export default function Actor() { ) } { - dataActor.currentLocalisation && ( - - - - + dataActor.currentLocalisation && ( + + + + - + ) } @@ -152,7 +155,7 @@ export default function Actor() { /> -)} + )} { diff --git a/client/src/pages/country/components/actors/index.js b/client/src/pages/country/components/actors/index.js index 5d09824..00edea6 100644 --- a/client/src/pages/country/components/actors/index.js +++ b/client/src/pages/country/components/actors/index.js @@ -15,11 +15,13 @@ import './styles/custom.scss'; import List from './list'; import MapCategoriesActors from './map-categories-actors'; +import { useTitle } from '../../../../hooks/usePageTitle'; export default function ActorsPage() { const contextData = useOutletContext(); const data = contextData['actors-data']; const [selectedCategory, setSelectedCategory] = useState(null); + useTitle('Curiexplore - Les acteurs'); const categoriesLabels = [ { @@ -143,7 +145,7 @@ export default function ActorsPage() { selected={category === selectedCategory} > {categoriesLabels.find((el) => el.id === category).shortLabel} -  +   ))} diff --git a/client/src/pages/country/index.js b/client/src/pages/country/index.js index eb1c938..2fcf082 100644 --- a/client/src/pages/country/index.js +++ b/client/src/pages/country/index.js @@ -44,6 +44,8 @@ export default function Fiche({ exportState }) { const [exportList, setExportList] = useState([]); const [isExport, setIsExport] = useState(false); + document.title = `Curiexplore - ${dataPays.name_fr}`; + useEffect(() => { setIsExport(exportState); }, [exportState]); @@ -230,7 +232,7 @@ export default function Fiche({ exportState }) { /> - ) } + )} diff --git a/client/src/pages/directory/index.js b/client/src/pages/directory/index.js index 2203ef9..64a536f 100644 --- a/client/src/pages/directory/index.js +++ b/client/src/pages/directory/index.js @@ -3,6 +3,7 @@ import { Container, Col, Row, Text } from '@dataesr/react-dsfr'; import { useState } from 'react'; import AnnuaireBloc from '../../components/directory-blocs/annuaire-bloc'; +import { useTitle } from '../../hooks/usePageTitle'; const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'y', 'z']; @@ -32,6 +33,7 @@ Filter.propTypes = { export default function DirectoryPage() { const [selectedLetter, setSelectedLetter] = useState('a'); + useTitle('Curiexplore - Annuaire'); return ( setSelectedLetter()} /> diff --git a/client/src/pages/homepage/index.js b/client/src/pages/homepage/index.js index 4f67308..92f3b60 100644 --- a/client/src/pages/homepage/index.js +++ b/client/src/pages/homepage/index.js @@ -5,9 +5,11 @@ import WorldMap from './components/world-map'; import RegionFilters from './components/region-filters'; import CountryList from './components/country-list'; import LastUpdated from './components/last-updated'; +import { useTitle } from '../../hooks/usePageTitle'; export default function HomePage() { const [region, setRegion] = useState('world'); + useTitle('Curiexplore - Accueil'); return ( <> diff --git a/client/src/pages/mentions-legales.js b/client/src/pages/mentions-legales.js index f708537..1c0e2d5 100644 --- a/client/src/pages/mentions-legales.js +++ b/client/src/pages/mentions-legales.js @@ -4,8 +4,11 @@ import { Col, Container, Row, Text, Breadcrumb, BreadcrumbItem, Title } from '@d import logoMEAE from '../assets/img/logo-meae.svg'; import logoMESR from '../assets/img/logo-mesr.svg'; +import { useTitle } from '../hooks/usePageTitle'; export default function MentionsLegalesPage() { + useTitle('Curiexplore - Mentions légales'); + return ( diff --git a/client/src/pages/ressources/ressources.js b/client/src/pages/ressources/ressources.js index 75ac781..0cf1ecf 100644 --- a/client/src/pages/ressources/ressources.js +++ b/client/src/pages/ressources/ressources.js @@ -4,6 +4,7 @@ import { Col, Container, Row, Title, Breadcrumb, BreadcrumbItem } from '@dataesr import RessourceTile from '../country/components/country-links/components/tile'; import ressources from './ressources.json'; +import { useTitle } from '../../hooks/usePageTitle'; const mappings = { referentiel: { @@ -19,6 +20,8 @@ const mappings = { }; export default function RessourcesPage() { + useTitle('Curiexplore - Ressources'); + return ( diff --git a/client/src/pages/team-project.js b/client/src/pages/team-project.js index 9829d0f..21d2b7b 100644 --- a/client/src/pages/team-project.js +++ b/client/src/pages/team-project.js @@ -3,8 +3,11 @@ import { Link as RouterLink } from 'react-router-dom'; import { Breadcrumb, BreadcrumbItem, Col, Container, Row, Text, Title } from '@dataesr/react-dsfr'; import image1 from '../assets/img/human-cooperation.svg'; +import { useTitle } from '../hooks/usePageTitle'; export default function ProjetEtEquipe() { + useTitle("Curiexplore - L'équipe et son projet"); + return (