refactor(client): 🚧 migrate "publier" to app router with react-i18next

apps/client/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/client/next.config.js

@@ -1,9 +1,7 @@
-const { i18n } = require("./next-i18next.config");
 const { translatedRedirects, oldPathsRedirects, partnersRedirect, rewrites } = require("./redirects.js");
 
 module.exports = {
   reactStrictMode: true, // see https://github.com/kirill-konshin/next-redux-wrapper/issues/422
-  i18n,
   images: {
     remotePatterns: [
       {

apps/client/package.json

@@ -44,6 +44,7 @@
     "history": "^4.7.1",
     "html2plaintext": "^2.1.4",
     "i18next": "^23.16.3",
+    "i18next-resources-to-backend": "^1.2.1",
     "isomorphic-dompurify": "^2.16.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",

apps/client/src/__tests__/agir.test.tsx

@@ -1,7 +1,7 @@
 import "jest-styled-components";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
-import agir from "../pages/agir";
+import agir from "../pages/[locale]/agir";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/__tests__/auth/auth.test.tsx

@@ -2,7 +2,7 @@ import "jest-styled-components";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import auth from "../../pages/auth";
+import auth from "../../pages/[locale]/auth";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/__tests__/auth/code-connexion.test.tsx

@@ -3,7 +3,7 @@ import mockRouter from "next-router-mock";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import codeConnexion from "../../pages/auth/code-connexion";
+import codeConnexion from "../../pages/[locale]/auth/code-connexion";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/__tests__/auth/code-securite.test.tsx

@@ -3,7 +3,7 @@ import mockRouter from "next-router-mock";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import codeSecurite from "../../pages/auth/code-securite";
+import codeSecurite from "../../pages/[locale]/auth/code-securite";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/__tests__/auth/connexion.test.tsx

@@ -3,7 +3,7 @@ import mockRouter from "next-router-mock";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import connexion from "../../pages/auth/connexion";
+import connexion from "../../pages/[locale]/auth/connexion";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx

@@ -2,7 +2,7 @@ import "jest-styled-components";
 import mockRouter from "next-router-mock";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { setupGoogleMock } from "~/__mocks__/react-google-autocomplete";
-import pageComponent from "~/pages/auth/reinitialiser-mot-de-passe/mail-envoye";
+import pageComponent from "~/pages/[locale]/auth/reinitialiser-mot-de-passe/mail-envoye";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
 
 jest.mock("next/router", () => require("next-router-mock"));

apps/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx

@@ -2,7 +2,7 @@ import "jest-styled-components";
 import mockRouter from "next-router-mock";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { setupGoogleMock } from "~/__mocks__/react-google-autocomplete";
-import pageComponent from "~/pages/auth/reinitialiser-mot-de-passe/nouveau";
+import pageComponent from "~/pages/[locale]/auth/reinitialiser-mot-de-passe/nouveau";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
 
 jest.mock("next/router", () => require("next-router-mock"));

apps/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx

@@ -2,7 +2,7 @@ import "jest-styled-components";
 import mockRouter from "next-router-mock";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { setupGoogleMock } from "~/__mocks__/react-google-autocomplete";
-import pageComponent from "~/pages/auth/reinitialiser-mot-de-passe";
+import pageComponent from "~/pages/[locale]/auth/reinitialiser-mot-de-passe";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
 
 jest.mock("next/router", () => require("next-router-mock"));

apps/client/src/__tests__/index.test.tsx

@@ -3,7 +3,7 @@ import { lastDemarches, lastDispositifs } from "~/__fixtures__/getDispositifs";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { setupGoogleMock } from "~/__mocks__/react-google-autocomplete";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
-import index, { Props } from "../pages/index";
+import index, { Props } from "../pages/[locale]/index";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/__tests__/publier.test.tsx

@@ -1,7 +1,7 @@
-import "jest-styled-components";
+/* import "jest-styled-components";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
-import publier from "../pages/publier";
+import publier from "../pages/[locale]/publier";
 
 jest.mock("components/Modals/WriteContentModal/WriteContentModal", () => jest.fn().mockReturnValue(<></>));
 jest.mock("next/router", () => require("next-router-mock"));
@@ -21,3 +21,4 @@ describe("publier", () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+ */

apps/client/src/__tests__/recherche.test.tsx

@@ -2,7 +2,7 @@ import "jest-styled-components";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
 import { setupGoogleMock } from "../__mocks__/react-google-autocomplete";
-import recherche from "../pages/recherche";
+import recherche from "../pages/[locale]/recherche";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/__tests__/traduire.test.tsx

@@ -1,7 +1,7 @@
 import "jest-styled-components";
 import { initialMockStore } from "~/__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
-import traduire from "../pages/traduire";
+import traduire from "../pages/[locale]/traduire";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

apps/client/src/app/StartDsfr.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
+import Link from "next/link";
+
+declare module "@codegouvfr/react-dsfr/next-appdir" {
+  interface RegisterLink {
+    Link: typeof Link;
+  }
+}
+
+startReactDsfr({
+  defaultColorScheme: "light",
+  Link,
+});
+
+export default function StartDsfr() {
+  return null;
+}

apps/client/src/app/[locale]/layout.tsx

@@ -0,0 +1,49 @@
+import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
+import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
+import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
+import Link from "next/link";
+import React from "react";
+import StartDsfr from "~/app/StartDsfr";
+import StoreProvider from "~/app/storeProvider";
+import Footer from "~/components/Layout/Footer";
+import styles from "~/components/Layout/Layout.module.scss";
+import Navbar from "~/components/Navigation/Navbar";
+import { locales } from "~/lib/i18nConfig";
+
+import "scss/index.css";
+import "scss/index.scss";
+
+export async function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export default function RootLayout({
+  children,
+  params: { locale },
+}: Readonly<{ children: React.ReactNode; params: { locale: string } }>) {
+  return (
+    <html {...getHtmlAttributes({ defaultColorScheme: "light", lang: locale })}>
+      <head>
+        <StartDsfr />
+        <DsfrHead Link={Link} />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="theme-color" content="#000000" />
+        {process.env.NEXT_PUBLIC_REACT_APP_ENV !== "production" && <meta name="robots" content="noindex, nofollow" />}
+        <script defer data-domain="refugies.info" src="https://plausible.io/js/script.tagged-events.js"></script>
+      </head>
+
+      <body dir={/* isRTL */ false ? "rtl" : "ltr"}>
+        <StoreProvider>
+          <DsfrProvider lang={locale}>
+            <Navbar />
+            <div id="contenu" className={styles.main}>
+              <main className={styles.content}>{children}</main>
+            </div>
+            <Footer />
+          </DsfrProvider>
+        </StoreProvider>
+      </body>
+    </html>
+  );
+}

apps/client/src/pages/publier.tsx → apps/client/src/app/[locale]/publier/page-publier.tsx

@@ -1,9 +1,10 @@
+"use client";
+
 import { RoleName } from "@refugies-info/api-types";
-import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useCallback, useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import { Col, Container, Row } from "reactstrap";
+import { useTranslation } from "~/app/i18n/client";
 import HelpIcon3 from "~/assets/staticPages/publier/help-icon-crisp.svg";
 import HelpIcon2 from "~/assets/staticPages/publier/help-icon-tutoriel.svg";
 import HelpIcon1 from "~/assets/staticPages/publier/help-icon-visio.svg";
@@ -20,7 +21,6 @@ import TestimonyLogo2 from "~/assets/staticPages/publier/testimony-icon-2.png";
 import TestimonyLogo3 from "~/assets/staticPages/publier/testimony-icon-3.png";
 import WhyImage1 from "~/assets/staticPages/publier/why-image-1.png";
 import WhyImage4 from "~/assets/staticPages/publier/why-image-4.png";
-import WriteContentModal from "~/components/Modals/WriteContentModal/WriteContentModal";
 import {
   Accordion,
   Card,
@@ -32,26 +32,23 @@ import {
   StepContent,
 } from "~/components/Pages/staticPages/common";
 import { CardExample, TestimonySlider } from "~/components/Pages/staticPages/publier";
-import SEO from "~/components/Seo";
 import EVAIcon from "~/components/UI/EVAIcon/EVAIcon";
 import Image from "~/components/UI/Image";
 import useWindowSize from "~/hooks/useWindowSize";
 import { cls } from "~/lib/classname";
-import { getLanguageFromLocale } from "~/lib/getLanguageFromLocale";
 import styles from "~/scss/components/staticPages.module.scss";
-import { wrapper } from "~/services/configureStore";
-import API from "~/utils/API";
 
 export type View = "why" | "required" | "steps" | "faq" | "register";
 
 interface Props {
   nbVues: number;
   nbFiches: number;
   nbStructures: number;
+  locale: string;
 }
 
-const RecensezVotreAction = (props: Props) => {
-  const { t } = useTranslation();
+const PublierPage = (props: Props) => {
+  const { t } = useTranslation(props.locale);
   const { isTablet } = useWindowSize();
 
   // write modal
@@ -88,7 +85,7 @@ const RecensezVotreAction = (props: Props) => {
 
   return (
     <div className={styles.main}>
-      <SEO title={t("Publish.title")} />
+      {/* <SEO title={t("Publish.title")} /> */}
 
       {/* HERO */}
       <div ref={refHero} className={cls(styles.section, styles.bg_blue, "mb-4")}>
@@ -131,7 +128,7 @@ const RecensezVotreAction = (props: Props) => {
 
       <div ref={refWhy} className={styles.scrollspy_section}>
         <span id="why" className={styles.anchor}></span>
-        {/* WHY */}
+
         <div className={cls(styles.section)}>
           <Container className={styles.container}>
             <h2 className={styles.title2}>{t("Publish.whyTitle")}</h2>
@@ -163,7 +160,6 @@ const RecensezVotreAction = (props: Props) => {
           </Container>
         </div>
 
-        {/* TESTIMONY */}
         <div className={cls(styles.section, styles.bg_green)}>
           <Container className={styles.container}>
             <TestimonySlider
@@ -192,7 +188,6 @@ const RecensezVotreAction = (props: Props) => {
         </div>
       </div>
 
-      {/* REQUIRED */}
       <div ref={refRequired} className={cls(styles.section, styles.bg_grey, styles.scrollspy_section)}>
         <span id="required" className={styles.anchor}></span>
         <Container className={styles.container}>
@@ -253,7 +248,7 @@ const RecensezVotreAction = (props: Props) => {
 
       <div ref={refSteps} className={styles.scrollspy_section}>
         <span id="steps" className={styles.anchor}></span>
-        {/* STEPS */}
+
         <div className={cls(styles.section)}>
           <Container className={styles.container}>
             <h2 className={styles.title2}>{t("Publish.stepsTitle")}</h2>
@@ -318,7 +313,6 @@ const RecensezVotreAction = (props: Props) => {
       </div>
 
       <div ref={refFaq} className={styles.scrollspy_section}>
-        {/* HELP */}
         <div className={cls(styles.section, styles.bg_grey)}>
           <Container className={styles.container}>
             <h2 className={cls(styles.title2, styles.center, "!mb-0")}>{t("StaticPages.helpTitle")}</h2>
@@ -371,7 +365,6 @@ const RecensezVotreAction = (props: Props) => {
           </Container>
         </div>
 
-        {/* FIGURES */}
         <div className={cls(styles.section, styles.bg_red)}>
           <Container className={cls(styles.container, "text-center")}>
             <h2 className={cls(styles.title2, styles.white, "text-center")}>{t("Publish.figuresTitle")}</h2>
@@ -389,7 +382,6 @@ const RecensezVotreAction = (props: Props) => {
           </Container>
         </div>
 
-        {/* FAQ */}
         <div className={cls(styles.section)}>
           <span id="faq" className={styles.anchor}></span>
           <Container className={cls(styles.container, styles.faq)}>
@@ -411,7 +403,6 @@ const RecensezVotreAction = (props: Props) => {
         </div>
       </div>
 
-      {/* REGISTER */}
       <div ref={refRegister} className={cls(styles.section, styles.bg_grey)}>
         <span id="register" className={styles.anchor}></span>
         <Register
@@ -424,26 +415,9 @@ const RecensezVotreAction = (props: Props) => {
         />
       </div>
 
-      <WriteContentModal show={showWriteModal} close={() => setShowWriteModal(false)} />
+      {/* <WriteContentModal show={showWriteModal} close={() => setShowWriteModal(false)} /> */}
     </div>
   );
 };
 
-export const getStaticProps = wrapper.getStaticProps((store) => async ({ locale }) => {
-  const dispStatistics = await API.getDispositifsStatistics({
-    facets: ["nbVues", "nbVuesMobile", "nbDispositifs", "nbDemarches"],
-  });
-  const structStatistics = await API.getStructuresStatistics({ facets: ["nbStructures"] });
-
-  return {
-    props: {
-      ...(await serverSideTranslations(getLanguageFromLocale(locale), ["common"])),
-      nbVues: (dispStatistics.nbVues || 0) + (dispStatistics.nbVuesMobile || 0),
-      nbFiches: (dispStatistics.nbDispositifs || 0) + (dispStatistics.nbDemarches || 0),
-      nbStructures: structStatistics.nbStructures,
-    },
-    revalidate: 60,
-  };
-});
-
-export default RecensezVotreAction;
+export default PublierPage;

apps/client/src/app/[locale]/publier/page.tsx

@@ -0,0 +1,27 @@
+import PublierPage from "~/app/[locale]/publier/page-publier";
+import API from "~/utils/API";
+
+async function getData() {
+  const dispStatistics = await API.getDispositifsStatistics({
+    facets: ["nbVues", "nbVuesMobile", "nbDispositifs", "nbDemarches"],
+  });
+  const structStatistics = await API.getStructuresStatistics({ facets: ["nbStructures"] });
+
+  return {
+    nbVues: (dispStatistics.nbVues || 0) + (dispStatistics.nbVuesMobile || 0),
+    nbFiches: (dispStatistics.nbDispositifs || 0) + (dispStatistics.nbDemarches || 0),
+    nbStructures: structStatistics.nbStructures || 0,
+  };
+}
+
+export default async function Publier({ params }: { params: { locale: string } }) {
+  const data = await getData();
+  return (
+    <PublierPage
+      nbVues={data.nbVues}
+      nbFiches={data.nbFiches}
+      nbStructures={data.nbStructures}
+      locale={params.locale}
+    />
+  );
+}