diff --git a/src/components/App.tsx b/src/components/App.tsx index 7c4621ff74e7b5f7124b5b84ab84d7c001e6f744..aca132dc0d6ea3cf4056c4b436fc5d548ea1674e 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -11,12 +11,14 @@ import { useLocation } from 'react-router-dom' import { useAppSelector } from 'store/hooks' import MatomoTracker from 'utils/matomoTracker' import { theme } from './theme' +import usePageTitle from './Hooks/usePageTitle' interface AppProps { tracker: undefined | MatomoTracker } export const App = ({ tracker }: AppProps) => { + usePageTitle() const location = useLocation() const { global: { termsStatus }, diff --git a/src/components/Hooks/usePageTitle.spec.tsx b/src/components/Hooks/usePageTitle.spec.tsx new file mode 100644 index 0000000000000000000000000000000000000000..b184016e3f1ba43e381e57e3b67542c5b18c16c7 --- /dev/null +++ b/src/components/Hooks/usePageTitle.spec.tsx @@ -0,0 +1,59 @@ +import { act, render } from '@testing-library/react' +import React from 'react' +import { BrowserRouter as Router } from 'react-router-dom' +import usePageTitle from './usePageTitle' + +const TestComponent = () => { + usePageTitle() + return null +} + +const setLocation = (pathname: string) => { + render( + <Router> + <TestComponent /> + </Router> + ) + window.history.pushState({}, '', pathname) +} + +describe('usePageTitle hook', () => { + beforeEach(() => { + document.title = '' + }) + + const cases = [ + { pathname: '/consumption', expected: 'Conso | Ecolyo' }, + { + pathname: '/ecogesture-selection', + expected: 'Sélection des astuces | Ecolyo', + }, + { pathname: '/ecogesture-form', expected: 'Astuces | Ecolyo' }, + { pathname: '/ecogestures', expected: 'Astuces | Ecolyo' }, + { pathname: '/options', expected: 'Options | Ecolyo' }, + { pathname: '/options/legalnotice', expected: 'Mentions Légales | Ecolyo' }, + { + pathname: '/options/gcu', + expected: "Conditions Générales d'Utilisation | Ecolyo", + }, + { pathname: '/analysis', expected: 'Analyse | Ecolyo' }, + { pathname: '/profileType', expected: 'Ajuster mon profil | Ecolyo' }, + { pathname: '/challenges', expected: 'Défis | Ecolyo' }, + { pathname: '/challenges/duel', expected: 'Défis | Ecolyo' }, + { + pathname: '/consumption/electricity', + expected: 'Conso électrique | Ecolyo', + }, + { pathname: '/connect/electricity', expected: 'Conso électrique | Ecolyo' }, + { pathname: '/consumption/water', expected: "Conso d'eau | Ecolyo" }, + { pathname: '/consumption/gas', expected: 'Conso de gaz | Ecolyo' }, + { pathname: '/connect/gas', expected: 'Conso de gaz | Ecolyo' }, + ] + + test.each(cases)('sets the title for $pathname', ({ pathname, expected }) => { + act(() => { + setLocation(pathname) + }) + expect(document.title).toBe(expected) + }) +}) diff --git a/src/components/Hooks/usePageTitle.tsx b/src/components/Hooks/usePageTitle.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6fd87d8a6d3dd51e2818035f6ebe48d92f404e57 --- /dev/null +++ b/src/components/Hooks/usePageTitle.tsx @@ -0,0 +1,45 @@ +import { useEffect } from 'react' +import { useLocation } from 'react-router-dom' + +/** + * Update the page title based on the current location + */ +const usePageTitle = () => { + const { pathname } = useLocation() + + useEffect(() => { + const baseTitle = 'Ecolyo' + + const titleMap: { [route: string]: string } = { + '/electricity': 'Conso électrique', + '/water': "Conso d'eau", + '/gas': 'Conso de gaz', + '/consumption': 'Conso', + '/ecogesture-selection': 'Sélection des astuces', + '/options/legalnotice': 'Mentions Légales', + '/options/gcu': "Conditions Générales d'Utilisation", + '/options': 'Options', + '/analysis': 'Analyse', + '/profileType': 'Ajuster mon profil', + '/challenges': 'Défis', + '/ecogesture': 'Astuces', + } + + let title = '' + + for (const [key, value] of Object.entries(titleMap)) { + if (pathname.includes(key)) { + title = value + break + } + } + + if (title) { + document.title = `${title} | ${baseTitle}` + } else { + document.title = baseTitle + } + }, [pathname]) +} + +export default usePageTitle