fix des routes pour l'ouverture des popins

components/PopinManager.jsx

@@ -27,7 +27,7 @@ import { DialogContent, Dialog, Drawer } from "@material-ui/core";
 import LoginForm from "./connexion";
 import EnSavoirPlus from "./en-savoir-plus";
 import ConfirmationConnexion from "./confirmation-connexion";
-import { closeCurrentOpenedRoutingPopin } from "./actions";
+import { closeCurrentPopin } from "./actions";
 
 const styles = () => ({
   dialog: {
@@ -52,7 +52,7 @@ class PopinManager extends PureComponent {
     return (
       <Dialog
         open={showConnexion}
-        onClose={closeCurrentOpenedRoutingPopin}
+        onClose={closeCurrentPopin}
         classes={{ root: classes.dialog, paper: classes.dialogPaper }}>
         <DialogContent classes={{ root: classes.dialogContent }}>
           <LoginForm />
@@ -67,7 +67,7 @@ class PopinManager extends PureComponent {
     return (
       <Dialog
         open={showConfirmationConnexion}
-        onClose={closeCurrentOpenedRoutingPopin}
+        onClose={closeCurrentPopin}
         classes={{ root: classes.dialog, paper: classes.dialogPaper }}>
         <DialogContent classes={{ root: classes.dialogContent }}>
           <ConfirmationConnexion />
@@ -83,7 +83,7 @@ class PopinManager extends PureComponent {
         anchor="bottom"
         variant="temporary"
         open={showEnSavoirPlus}
-        onClose={closeCurrentOpenedRoutingPopin}>
+        onClose={closeCurrentPopin}>
         <EnSavoirPlus />
       </Drawer>
     );
@@ -91,7 +91,7 @@ class PopinManager extends PureComponent {
 
   render() {
     const { router } = this.props;
-    const pathString = "query.showPopin";
+    const pathString = "query.popin";
     const popinType = get(router, pathString, false);
     return (
       <Fragment>

components/actions/routing.js → components/actions/close-current-popin.js

@@ -10,14 +10,8 @@
 */
 import Router from "next/router";
 
-export function showConnexionPopin() {
-  Router.push("/?showPopin=connection", "/connection");
-}
-
-export function showEnSavoirPlusPopin() {
-  Router.push("/?showPopin=en-savoir-plus", "/en-savoir-plus");
-}
-
-export function closeCurrentOpenedRoutingPopin() {
+const closeCurrentPopin = () => {
   Router.push("/");
-}
+};
+
+export default closeCurrentPopin;

components/actions/index.js

@@ -8,4 +8,6 @@
     groups: ["builtin", "external", "parent", "sibling", "index"]
   }]
 */
-export * from "./routing";
+export { default as closeCurrentPopin } from "./close-current-popin";
+export { default as showEnSavoirPlusPopin } from "./show-en-savoir-plus-popin";
+export { default as showConnexionPopin } from "./show-connexion-popin";

components/actions/show-connexion-popin.js

+/* eslint
+  indent: [2, 2],
+  semi: [2, "always"],
+  react/jsx-indent: [2, 2,{indentLogicalExpressions: false}],
+  react/jsx-indent-props: [2, 2],
+  import/order: [2, {
+    newlines-between: "always",
+    groups: ["builtin", "external", "parent", "sibling", "index"]
+  }]
+*/
+import Router from "next/router";
+
+const showConnexionPopin = () => {
+  Router.push("/?popin=connection");
+};
+
+export default showConnexionPopin;

components/actions/show-en-savoir-plus-popin.js

+/* eslint
+  indent: [2, 2],
+  semi: [2, "always"],
+  react/jsx-indent: [2, 2,{indentLogicalExpressions: false}],
+  react/jsx-indent-props: [2, 2],
+  import/order: [2, {
+    newlines-between: "always",
+    groups: ["builtin", "external", "parent", "sibling", "index"]
+  }]
+*/
+import Router from "next/router";
+
+const showEnSavoirPlusPopin = () => {
+  Router.push("/?popin=en-savoir-plus");
+};
+
+export default showEnSavoirPlusPopin;

components/actions/tests/show-connexion-popin.test.js

+/* eslint
+    indent: [2, 2],
+    semi: [2, "always"],
+    react/jsx-indent: [2, 2],
+    react/jsx-indent-props: [2, 2]
+    max-nested-callbacks: [2, { "max": 4 }],
+    import/order: [2, {
+      newlines-between: "always",
+      groups: ["builtin", "external", "parent", "sibling", "index"]
+    }]
+*/
+import Router from "next/router";
+
+import showConnexionPopin from "../show-connexion-popin";
+
+jest.mock("next/router", () => ({ push: jest.fn() }));
+
+describe("components | actions | showConnexionPopin", () => {
+  describe("teste les appels de methode du router avec les bons arguments", () => {
+    afterEach(() => {
+      Router.push.mockClear();
+    });
+
+    it("doit avoir appeler la methode push du Router a l'ouverture de la popin 'connection'", () => {
+      showConnexionPopin();
+      expect(Router.push).toHaveBeenCalledTimes(1);
+      expect(Router.push).toHaveBeenCalledWith("/?popin=connection");
+    });
+  });
+});

components/actions/tests/routing.test.js → components/actions/tests/show-en-savoir-plus-popin.test.js

@@ -11,11 +11,11 @@
 */
 import Router from "next/router";
 
-import { showConnexionPopin, showEnSavoirPlusPopin } from "../routing";
+import showEnSavoirPlusPopin from "../show-en-savoir-plus-popin";
 
 jest.mock("next/router", () => ({ push: jest.fn() }));
 
-describe("components | actions | routing", () => {
+describe("components | actions | showEnSavoirPlusPopin", () => {
   describe("teste les appels de methode du router avec les bons arguments", () => {
     afterEach(() => {
       Router.push.mockClear();
@@ -24,19 +24,7 @@ describe("components | actions | routing", () => {
     it("doit avoir appeler la methode push du Router a l'ouverture de la popin 'en savoir plus'", () => {
       showEnSavoirPlusPopin();
       expect(Router.push).toHaveBeenCalledTimes(1);
-      expect(Router.push).toHaveBeenCalledWith(
-        "/?showPopin=en-savoir-plus",
-        "/en-savoir-plus",
-      );
-    });
-
-    it("doit avoir appeler la methode push du Router a l'ouverture de la popin 'connection'", () => {
-      showConnexionPopin();
-      expect(Router.push).toHaveBeenCalledTimes(1);
-      expect(Router.push).toHaveBeenCalledWith(
-        "/?showPopin=connection",
-        "/connection",
-      );
+      expect(Router.push).toHaveBeenCalledWith("/?popin=en-savoir-plus");
     });
   });
 });

components/app-header/tests/login-button.test.jsx

@@ -20,11 +20,11 @@
 import { createShallow } from "@material-ui/core/test-utils";
 
 import LoginButton from "../login-button";
-import { showConnexionPopin } from "../../actions/routing";
+import { showConnexionPopin } from "../../actions";
 
 const MockButtonClickHandler = jest.fn();
 jest.mock("next/router", () => ({ push: jest.fn() }));
-jest.mock("../../actions/routing", () => ({
+jest.mock("../../actions", () => ({
   showConnexionPopin: jest.fn(),
 }));
 

components/app-header/tests/menu-button.test.jsx

@@ -8,11 +8,11 @@
 import { createShallow } from "@material-ui/core/test-utils";
 
 import HeaderMenuButton from "../menu-button";
-import { showEnSavoirPlusPopin } from "../../actions/routing";
+import { showEnSavoirPlusPopin } from "../../actions";
 
 const MockButtonClickHandler = jest.fn();
 jest.mock("next/router", () => ({ push: jest.fn() }));
-jest.mock("../../actions/routing", () => ({
+jest.mock("../../actions", () => ({
   showEnSavoirPlusPopin: jest.fn(),
 }));
 

components/confirmation-connexion/index.jsx

@@ -49,9 +49,9 @@ const styles = {
 
 class ConfirmationConnexion extends PureComponent {
   componentDidMount() {
+    // obtient le token de connexion depuis l'URL
     const { router } = this.props;
-    const pathString = "query.token";
-    const token = get(router, pathString, false);
+    const token = get(router, "query.token", false);
     Cookies.set("token", token);
   }
 
@@ -59,22 +59,20 @@ class ConfirmationConnexion extends PureComponent {
     const { classes } = this.props;
     return (
       <div>
-        <h1 inline className={classes.h1Style}>
+        <h1 className={classes.h1Style}>
           <Icon inline icon={partyPopper} width="40" />
           &nbsp;Vous êtes bien connectés à LexImpact POP&nbsp;
         </h1>
         <p className={classes.pStyle}>
           Vous pouvez désormais
-          <b>
-          &nbsp;simuler les impacts macros&nbsp;
-          </b>
+          <b>&nbsp;simuler les impacts macros&nbsp;</b>
           d’une réforme
           <br />
           sur la population&nbsp;
           <Icon inline icon={peopleHoldingHands} width="25" />
           &nbsp;et les recettes de l’État&nbsp;
           <Icon inline icon={classicalBuilding} width="25" />
-          .
+          <span>.</span>
         </p>
       </div>
     );

components/connexion/connexion-form-success.jsx

@@ -27,7 +27,6 @@ import { Icon } from "@iconify/react";
 import openMailboxWithRaisedFlag from "@iconify/icons-twemoji/open-mailbox-with-raised-flag";
 
 const styles = {
-
   pStyle: {
     fontFamily: "Lato",
     fontSize: "18px",
@@ -39,6 +38,9 @@ const styles = {
 
 class ConnexionFormSuccess extends PureComponent {
   componentDidMount() {
+    // recupere le token depuis l'URL
+    // recu via l'email contenant le magic-link
+    // affecte une variable dans le navigateur user
     const { router } = this.props;
     const pathString = "query.token";
     const token = get(router, pathString, false);
@@ -52,8 +54,8 @@ class ConnexionFormSuccess extends PureComponent {
         <p className={classes.pStyle}>
           <Icon inline icon={openMailboxWithRaisedFlag} width="25" />
           <b>
-          &nbsp;Nous venons juste de vous envoyer par mail
-          un lien de confirmation.
+            &nbsp;Nous venons juste de vous envoyer par mail un lien de
+            confirmation.
           </b>
           <br />
           Cliquez sur le lien du courriel pour vous connecter.

components/connexion/mentions-legales-text.jsx

@@ -42,9 +42,7 @@ const styles = () => ({
   },
 });
 
-const MentionsLegales = ({ classes }) => {
-  const linkDestination = "";
-  return (
+const MentionsLegales = ({ classes }) => (
   <div className={classes.mentionsLegales}>
     <span>
         * LexImpact POP s’appuie sur des données couvertes par des secrets
@@ -56,7 +54,6 @@ const MentionsLegales = ({ classes }) => {
     </Link>
   </div>
 );
-};
 
 MentionsLegales.propTypes = {
   classes: PropTypes.shape().isRequired,

next.config.js

@@ -25,19 +25,9 @@ const { assign, concat, flow } = require("lodash/fp");
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { EnvironmentPlugin } = require("webpack");
 
-const internalStaticNextJSRoutes = {
-  // Routes internes à l'application utilisées par next.config.js
-  // Ces routes ne peuvent pas comporter des parametres
-  "/en-savoir-plus": {
-    page: "/",
-    query: { showPopin: "en-savoir-plus" },
-  },
-};
-
 const nextConfig = {
   exportPathMap: defaults => ({
     ...defaults,
-    ...internalStaticNextJSRoutes,
   }),
   webpack: (webpackConfig) => {
     const isProductionEnvironment = env === "production";

server.js

@@ -25,47 +25,10 @@ import bodyParser from "body-parser";
 import cookieParser from "cookie-parser";
 
 const dev = process.env.NODE_ENV !== "production";
-const app = next({ dev });
-const handle = app.getRequestHandler();
 const port = parseInt(process.env.PORT, 10) || 9001;
 
-const renderApplicationPageFromServer = (routeObject, nextApplication) => (
-  req,
-  res,
-) => {
-  const { page, query } = routeObject;
-  nextApplication.render(req, res, page, query(req));
-};
-
-const generateServerDynamicRoutes = (
-  nextApplication,
-  expressServer,
-  dynamicRoutes,
-) => {
-  // Génére les routes côté server ExpressJS
-  // Cela permet de récupérer par exemple un token dans l'URL
-  // Et d'afficher la popin de confirmation d'enregistrement
-  Object.keys(dynamicRoutes).forEach((routePath) => {
-    const routeObject = dynamicRoutes[routePath];
-    const callback = renderApplicationPageFromServer(
-      routeObject,
-      nextApplication,
-    );
-    expressServer.get(routePath, callback);
-  });
-};
-
-const externalDynamicExpressJSRoutes = {
-  // Routes externes à l'application utilisées par server.js
-  // Ces routes ont besoin d'un parametre dynamique pour fonctionner
-  "/connection/:token": {
-    page: "/",
-    query: req => ({
-      token: req.params.token,
-      showPopin: "confirmation-connexion",
-    }),
-  },
-};
+const app = next({ dev });
+const handle = app.getRequestHandler();
 
 async function start() {
   await app.prepare();
@@ -80,7 +43,15 @@ async function start() {
 
   ------------------------------------ */
   server.use("/", express.static(path.join(__dirname, "public")));
-  generateServerDynamicRoutes(app, server, externalDynamicExpressJSRoutes);
+  // Ouverture de la popin de confirmation de connexion
+  // depuis l'URL /connection/:token
+  // recue via le mail contenant le magic-link
+  server.get("/connection/:token", (req, res) => {
+    const { token } = req.params;
+    const popin = "confirmation-connexion";
+    const query = { token, popin };
+    return app.render(req, res, "/", query);
+  });
   server.get("*", handle);
   /* ------------------------------------ */
   server.listen(port);