From fbf5c3517ed5099d3923181f2c86641e3c29a829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Tue, 20 Jun 2023 13:15:07 +0200 Subject: [PATCH] Fix change lang with params in url --- site/source/components/App.tsx | 2 +- site/source/components/MoreInfosOnUs.tsx | 4 +-- .../components/layout/Footer/Footer.tsx | 31 ++++++++++++++++--- .../components/layout/Footer/useFeedback.ts | 2 +- site/source/components/layout/NewsBanner.tsx | 2 +- site/source/pages/Plan.tsx | 2 +- site/source/pages/nouveautés/index.tsx | 6 ++-- site/source/sitePaths.ts | 12 ++++--- site/source/utils/index.ts | 7 +++++ 9 files changed, 50 insertions(+), 18 deletions(-) diff --git a/site/source/components/App.tsx b/site/source/components/App.tsx index bb4a3b17b..a2348482b 100644 --- a/site/source/components/App.tsx +++ b/site/source/components/App.tsx @@ -154,7 +154,7 @@ const App = () => { element={} /> } /> } /> diff --git a/site/source/components/MoreInfosOnUs.tsx b/site/source/components/MoreInfosOnUs.tsx index 95beddfec..afe97c3f7 100644 --- a/site/source/components/MoreInfosOnUs.tsx +++ b/site/source/components/MoreInfosOnUs.tsx @@ -22,12 +22,12 @@ export default function MoreInfosOnUs() { <>

Plus d'infos sur mon-entreprise

- {!pathname.startsWith(absoluteSitePaths.nouveautés) && ( + {!pathname.startsWith(absoluteSitePaths.nouveautés.index) && ( } title={

Les nouveautés

} - to={absoluteSitePaths.nouveautés} + to={absoluteSitePaths.nouveautés.index} > Qu'avons-nous mis en production ces derniers mois ? diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx index 2c4dd9179..531b29214 100644 --- a/site/source/components/layout/Footer/Footer.tsx +++ b/site/source/components/layout/Footer/Footer.tsx @@ -1,6 +1,6 @@ import { Helmet } from 'react-helmet-async' import { Trans, useTranslation } from 'react-i18next' -import { useLocation } from 'react-router-dom' +import { generatePath, matchPath, useLocation } from 'react-router-dom' import styled, { css } from 'styled-components' import Contact from '@/components/Contact' @@ -15,25 +15,43 @@ import { Container, Grid } from '@/design-system/layout' import { Link } from '@/design-system/typography/link' import { Body } from '@/design-system/typography/paragraphs' import { alternatePathname, useSitePaths } from '@/sitePaths' +import { isNotNull } from '@/utils' import InscriptionBetaTesteur from './InscriptionBetaTesteur' import Privacy from './Privacy' const altPathname = alternatePathname() +const altPathnnamesWithParams = ( + lang: keyof typeof altPathname, + path: string +) => + Object.entries(altPathname[lang]) + .filter(([pth]) => /\/:/.test(pth)) + .map(([pth, alt]) => { + const match = matchPath(pth, path) + + return match && generatePath(alt, match.params) + }) + .filter(isNotNull) + export default function Footer() { const { absoluteSitePaths } = useSitePaths() const { pathname } = useLocation() const { t, i18n } = useTranslation() const language = i18n.language as 'fr' | 'en' - const path = pathname.replace(/^\/(mon-entreprise|infrance)/, '') + const path = decodeURIComponent( + pathname.replace(/^\/(mon-entreprise|infrance)/, '') + ) const altLang = language === 'en' ? 'fr' : 'en' const altHref = (language === 'en' ? import.meta.env.VITE_FR_BASE_URL - : import.meta.env.VITE_EN_BASE_URL) + altPathname[language][path] ?? - altPathname[language][path + '/'] + : import.meta.env.VITE_EN_BASE_URL) + + (altPathname[language][path] ?? + altPathnnamesWithParams(language, path)?.[0] ?? + '/') const isFrenchMode = language === 'fr' @@ -96,7 +114,10 @@ export default function Footer() { - + Nouveautés diff --git a/site/source/components/layout/Footer/useFeedback.ts b/site/source/components/layout/Footer/useFeedback.ts index e1c24678d..0b352c5f6 100644 --- a/site/source/components/layout/Footer/useFeedback.ts +++ b/site/source/components/layout/Footer/useFeedback.ts @@ -31,7 +31,7 @@ export const useFeedback = () => { // Exclure les pages et sous-pages ![ absoluteSitePaths.documentation.index, - absoluteSitePaths.nouveautés, + absoluteSitePaths.nouveautés.index, absoluteSitePaths.stats, absoluteSitePaths.développeur.index, ].some((path) => currentPathDecoded.includes(path)) diff --git a/site/source/components/layout/NewsBanner.tsx b/site/source/components/layout/NewsBanner.tsx index 1a2dcc8d1..66c33711c 100644 --- a/site/source/components/layout/NewsBanner.tsx +++ b/site/source/components/layout/NewsBanner.tsx @@ -68,7 +68,7 @@ function NewsBanner({ lastRelease }: { lastRelease: LastRelease }) { Découvrez les nouveautés {determinant(lastRelease.name)} {
  • - + Nouveautés
    • diff --git a/site/source/pages/nouveautés/index.tsx b/site/source/pages/nouveautés/index.tsx index 161c51671..08705ba79 100644 --- a/site/source/pages/nouveautés/index.tsx +++ b/site/source/pages/nouveautés/index.tsx @@ -30,8 +30,8 @@ export default function Nouveautés() { const { data } = useFetchData('/data/releases.json') const navigate = useNavigate() const { absoluteSitePaths } = useSitePaths() - const slug = useMatch(`${encodeURI(absoluteSitePaths.nouveautés)}/:slug`) - ?.params?.slug + const slug = useMatch(encodeURI(absoluteSitePaths.nouveautés.date))?.params + ?.date useHideNewsBanner() const { t } = useTranslation() @@ -48,7 +48,7 @@ export default function Nouveautés() { const selectedRelease = data.findIndex(({ name }) => slugify(name) === slug) const getPath = (index: number) => - `${absoluteSitePaths.nouveautés}/${slugify(data[index].name)}` + `${absoluteSitePaths.nouveautés.index}/${slugify(data[index].name)}` if (!slug || selectedRelease === -1) { return diff --git a/site/source/sitePaths.ts b/site/source/sitePaths.ts index 8a22d2ca7..48e22a918 100644 --- a/site/source/sitePaths.ts +++ b/site/source/sitePaths.ts @@ -87,7 +87,10 @@ const rawSitePathsFr = { is: 'impot-societe', dividendes: 'dividendes', }, - nouveautés: 'nouveautés', + nouveautés: { + index: 'nouveautés', + date: ':date', + }, stats: 'statistiques', accessibilité: 'accessibilité', budget: 'budget', @@ -173,7 +176,10 @@ const rawSitePathsEn = { is: 'corporate-tax', dividendes: 'dividends', }, - nouveautés: 'news', + nouveautés: { + index: 'news', + date: ':date', + }, stats: 'statistics', accessibilité: 'accessibility', simulateursEtAssistants: 'simulators-and-assistants', @@ -336,8 +342,6 @@ export const alternatePathname = () => { (acc, [key, path]): Return => typeof path === 'object' ? { ...acc, [key]: buildSitemap(lang, path, acc[key] as Return) } - : /\/:/.test(path) - ? acc : ({ ...acc, [key]: { ...acc[key], [lang]: path } } as Return), initialValue ) diff --git a/site/source/utils/index.ts b/site/source/utils/index.ts index 0af8b0509..f1fbfaccd 100644 --- a/site/source/utils/index.ts +++ b/site/source/utils/index.ts @@ -259,3 +259,10 @@ export const catchDivideByZeroError = (func: () => T) => { export const generateUuid = () => { return Math.floor(Math.random() * Date.now()).toString(16) } + +/** + * Returns true if x is not null, useful for filtering out nulls from arrays + * @example [1, null, 2].filter(isNotNull) // [1, 2] + * @param x + */ +export const isNotNull = (x: T | null): x is T => x !== null