customizing page titles

dataesr · Oct 23, 2023 · 3d10812 · 3d10812
1 parent 4145ec1
commit 3d10812
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 12 deletions.
diff --git a/client/src/hooks/usePageTitle.js 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
@@ -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 (
     <Container>
       <Breadcrumb>

diff --git 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 (
     <Container>
       <Breadcrumb>

diff --git 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 (
       <div>
@@ -120,16 +123,16 @@ export default function Actor() {
           )
         }
         {
-        dataActor.currentLocalisation && (
-        <Col n="4">
-          <Callout
-            hasInfoIcon={false}
-            colors={['#e18b76', '#eee']}
-          >
-            <AddressCard address={dataActor.currentLocalisation} />
-          </Callout>
+          dataActor.currentLocalisation && (
+            <Col n="4">
+              <Callout
+                hasInfoIcon={false}
+                colors={['#e18b76', '#eee']}
+              >
+                <AddressCard address={dataActor.currentLocalisation} />
+              </Callout>
 
-        </Col>
+            </Col>
           )
         }
       </Row>
@@ -152,7 +155,7 @@ export default function Actor() {
           />
           <Identifiers type={actorIdentifierType} identifiersId={actorIdentifierValues} />
         </>
-)}
+      )}
       <SocialNetworkCard actorId={actorId} />
 
       {

diff --git 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}
-&nbsp;
+                  &nbsp;
                   <Badge text={categories[category].length.toString()} />
                 </Tag>
               ))}

diff --git 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 }) {
                       />
                     </Text>
                   </Row>
-                ) }
+                )}
               </Container>
               <Container fluid as="section">
                 <Outlet context={data} />

diff --git 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 (
     <Container as="section">
       <Filter selectedLetter={selectedLetter} setSelectedLetterHandler={() => setSelectedLetter()} />

diff --git 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 (
     <>
       <Container fluid aria-hidden>

diff --git 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 (
     <Container>
       <Breadcrumb>

diff --git 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 (
     <Container className="fr-mb-3w">
       <Breadcrumb>

diff --git 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 (
     <Container>
       <Breadcrumb>