ajout de la barre de menu de simulation

- update du menu label/key/action impact
- update des test + actions
- update graphique des composants
- Modifications des noms et d'un icon
- update des styles de la barre simpop
- move du dossier de la simpop-menu-bar
-  fix du chargement de token au chargement de la page

.eslintrc.json

@@ -12,7 +12,14 @@
     "es6": true,
     "node": true
   },
-  "plugins": ["import", "jest", "jsx-a11y", "react"],
+  "plugins": [
+    "import",
+    "jest",
+    "jsx-a11y",
+    "react",
+    "simple-import-sort",
+    "sort-destructure-keys"
+  ],
   "extends": ["airbnb", "plugin:jest/recommended"],
   "settings": {
     "react": {
@@ -20,6 +27,7 @@
     }
   },
   "rules": {
+    "sort-keys": [2, "asc"],
     "array-bracket-newline": ["error", { "multiline": true }],
     "array-element-newline": ["error", "consistent"],
     "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
@@ -50,12 +58,19 @@
         "specialLink": ["hrefLeft", "hrefRight"]
       }
     ],
-    "import/order": [
+    "react/jsx-sort-props": [
       2,
       {
-        "newlines-between": "always",
-        "groups": ["builtin", "external", "parent", "sibling", "index"]
+        "noSortAlphabetically": false,
+        "ignoreCase": true,
+        "reservedFirst": true,
+        "callbacksLast": true,
+        "shorthandFirst": true
       }
-    ]
+    ],
+    "import/order": "off",
+    "sort-imports": "off",
+    "simple-import-sort/sort": "error",
+    "sort-destructure-keys/sort-destructure-keys": 2
   }
 }

.kiss/connect.js

-import { connect } from "react-redux"
+import { connect } from "react-redux";
 
-import MyComponent from "./my-component"
+import MyComponent from "./my-component";
 
-const mapStateToProps = state => ({})
+const mapStateToProps = state => ({});
 
-const mapDispatchToProps = dispatch => ({})
+const mapDispatchToProps = dispatch => ({});
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(MyComponent)
+)(MyComponent);

.kiss/jest.jsx

-import { createShallow } from "@material-ui/core/test-utils"
+import { createShallow } from "@material-ui/core/test-utils";
 
-import MyComponent from "../index"
+import MyComponent from "../index";
 
 describe("components | path | to | index", () => {
-  let shallow
+  let shallow;
   beforeAll(() => {
-    const options = { dive: true }
-    shallow = createShallow(options)
-  })
+    const options = { dive: true };
+    shallow = createShallow(options);
+  });
 
   describe("snapshot", () => {
     it("doit correspondre avec les props requises", () => {
-      const props = {}
-      const wrapper = shallow(<MyComponent {...props} />)
-      expect(wrapper).toBeDefined()
-      expect(wrapper).toMatchSnapshot()
-    })
-  })
-})
+      const props = {};
+      const wrapper = shallow(<MyComponent {...props} />);
+      expect(wrapper).toBeDefined();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

.kiss/pure.jsx

-import { PureComponent } from "react"
-import PropTypes from "prop-types"
-import { withStyles } from "@material-ui/core/styles"
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core/styles";
 
 const styles = {
   container: {},
-}
+};
 
 class MyComponent extends PureComponent {
   render() {
-    const { classes } = this.props
-    return <div className={classes.container} />
+    const { classes } = this.props;
+    return <div className={classes.container} />;
   }
 }
 
 MyComponent.propTypes = {
   classes: PropTypes.shape().isRequired,
-}
+};
 
-export default withStyles(styles)(MyComponent)
+export default withStyles(styles)(MyComponent);

.prettierrc → .prettierrc.json

@@ -2,7 +2,7 @@
   "printWidth": 80,
   "tabWidth": 2,
   "useTabs": false,
-  "semi": false,
+  "semi": true,
   "singleQuote": false,
   "quoteProps": "as-needed",
   "jsxSingleQuote": false,

components/actions/api/fetch-calculate-compare.js → components/actions/api-calculate-compare.js

-import { get } from "lodash";
 import fetch from "isomorphic-fetch";
+import { get } from "lodash";
 
-import { loadingStart, loadingComplete } from "../loading";
+import { loadingComplete, loadingStart } from "./loading";
 
 const fetchCalculateCompare = () => (dispatch, getState, { apiEndpoint }) => {
   dispatch(loadingStart());
   const { casTypes, reforme } = getState();
   const body = JSON.stringify({
-    reforme,
     description_cas_types: casTypes,
+    reforme,
   });
   const promise = fetch(`${apiEndpoint}/calculate/compare`, {
     body,
-    method: "POST",
     headers: { "Content-Type": "application/json" },
+    method: "POST",
   })
     .then(response => response.json())
     .then((payload) => {
       const data = get(payload, "res_brut");
       dispatch(loadingComplete());
-      dispatch({ type: "onCalculateCompareLoaded", data });
+      dispatch({ data, type: "onCalculateCompareLoaded" });
     })
     .catch(() => {
       dispatch(loadingComplete());

components/actions/api/fetch-metdata-cas-types.js → components/actions/api-metdata-cas-types.js

 import fetch from "isomorphic-fetch";
 
-import { loadingStart, loadingComplete } from "../loading";
+import { loadingComplete, loadingStart } from "./loading";
 
 const fetchMetadataCasTypes = body => (dispatch, getState, { apiEndpoint }) => {
   dispatch(loadingStart());
   const promise = fetch(`${apiEndpoint}/metadata/description_cas_types`, {
     body,
-    method: "POST",
     headers: { "Content-Type": "application/json" },
+    method: "POST",
   })
     .then(response => response.json())
     .then((payload) => {
       dispatch(loadingComplete());
-      dispatch({ type: "onCasTypesLoaded", payload });
+      dispatch({ payload, type: "onCasTypesLoaded" });
     })
     .catch(() => {
       // eslint-disable-next-line no-console

components/actions/index.js

 export * from "./loading";
-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";
+export { default as closeCurrentPopin } from "./popin-close-current";
+export { default as showEnSavoirPlusPopin } from "./popin-show-en-savoir-plus";
+export { default as showConnexionPopin } from "./popin-show-connexion";
 export { default as expandArticlePanel } from "./expand-article-panel";
 export { default as addTranche } from "./articles/add-tranche";
 export { default as removeTranche } from "./articles/remove-tranche";
-export { default as fetchMetadataCasTypes } from "./api/fetch-metdata-cas-types";
-export { default as fetchCalculateCompare } from "./api/fetch-calculate-compare";
+export { default as fetchMetadataCasTypes } from "./api-metdata-cas-types";
+export { default as fetchCalculateCompare } from "./api-calculate-compare";
 export {
   default as updateCasTypeOutreMer,
 } from "./cas-types/update-outremer-cas-types";
@@ -17,3 +17,5 @@ export {
   default as updateReformeByName,
 } from "./articles/update-reforme-by-name";
 export { default as updateConnexionToken } from "./update-connexion-token";
+export { default as showAddImpactCardPopin } from "./popin-add-impact-card";
+export { default as fetchSimPop } from "./api-simpop";

components/actions/popin-add-impact-card.js

+import Router from "next/router";
+
+const showAddImpactCardPopin = () => {
+  Router.push("/?popin=ajouter-carte-impact");
+  return { type: null };
+};
+
+export default showAddImpactCardPopin;

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

@@ -2,6 +2,7 @@ import Router from "next/router";
 
 const closeCurrentPopin = () => {
   Router.push("/");
+  return { type: null };
 };
 
 export default closeCurrentPopin;

components/actions/show-connexion-popin.js → components/actions/popin-show-connexion.js

@@ -2,6 +2,7 @@ import Router from "next/router";
 
 const showConnexionPopin = () => {
   Router.push("/?popin=connection");
+  return { type: null };
 };
 
 export default showConnexionPopin;

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

@@ -2,6 +2,7 @@ import Router from "next/router";
 
 const showEnSavoirPlusPopin = () => {
   Router.push("/?popin=en-savoir-plus");
+  return { type: null };
 };
 
 export default showEnSavoirPlusPopin;

components/actions/tests/popin-add-impact-card.js

+import Router from "next/router";
+
+import showAddImpactCardPopin from "../popin-add-impact-card";
+
+jest.mock("next/router", () => ({ push: jest.fn() }));
+
+describe("components | actions | showAddImpactCardPopin", () => {
+  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 'en savoir plus'", () => {
+      const expected = { type: null };
+      const result = showAddImpactCardPopin();
+      expect(result).toStrictEqual(expected);
+      expect(Router.push).toHaveBeenCalledTimes(1);
+      expect(Router.push).toHaveBeenCalledWith("/?popin=ajouter-carte-impact");
+    });
+  });
+});

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

 import Router from "next/router";
 
-import showConnexionPopin from "../show-connexion-popin";
+import showConnexionPopin from "../popin-show-connexion";
 
 jest.mock("next/router", () => ({ push: jest.fn() }));
 
@@ -11,7 +11,9 @@ describe("components | actions | showConnexionPopin", () => {
     });
 
     it("doit avoir appeler la methode push du Router a l'ouverture de la popin 'connection'", () => {
-      showConnexionPopin();
+      const expected = { type: null };
+      const result = showConnexionPopin();
+      expect(result).toStrictEqual(expected);
       expect(Router.push).toHaveBeenCalledTimes(1);
       expect(Router.push).toHaveBeenCalledWith("/?popin=connection");
     });

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

 import Router from "next/router";
 
-import showEnSavoirPlusPopin from "../show-en-savoir-plus-popin";
+import showEnSavoirPlusPopin from "../popin-show-en-savoir-plus";
 
 jest.mock("next/router", () => ({ push: jest.fn() }));
 
@@ -11,7 +11,9 @@ describe("components | actions | showEnSavoirPlusPopin", () => {
     });
 
     it("doit avoir appeler la methode push du Router a l'ouverture de la popin 'en savoir plus'", () => {
-      showEnSavoirPlusPopin();
+      const expected = { type: null };
+      const result = showEnSavoirPlusPopin();
+      expect(result).toStrictEqual(expected);
       expect(Router.push).toHaveBeenCalledTimes(1);
       expect(Router.push).toHaveBeenCalledWith("/?popin=en-savoir-plus");
     });

components/app-header/app-header-component.jsx

-import { PureComponent } from "react";
-import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core/styles";
 import { AppBar, Toolbar, Typography } from "@material-ui/core";
+import { withStyles } from "@material-ui/core/styles";
+import PropTypes from "prop-types";
+import { PureComponent } from "react";
 
-import HeaderMenuButton from "./menu-button";
 import LoginButton from "./login-button";
+import HeaderMenuButton from "./menu-button";
 
 const styles = () => ({
-  toolbarRoot: {
-    justifyContent: "space-between",
+  bolderTitle: {
+    fontWeight: "bold",
+  },
+  lighterTitle: {
+    fontWeight: "lighter",
   },
   titleRoot: {
     color: "#FFFFFF",
-    fontSize: "36px",
     fontFamily: "Lato",
+    fontSize: "36px",
     textTransform: "uppercase",
   },
-  lighterTitle: {
-    fontWeight: "lighter",
-  },
-  bolderTitle: {
-    fontWeight: "bold",
+  toolbarRoot: {
+    justifyContent: "space-between",
   },
 });
 

components/app-header/login-button.jsx

-import PropTypes from "prop-types";
 import Button from "@material-ui/core/Button";
-import VPNKeyIcon from "@material-ui/icons/VpnKey";
 import { withStyles } from "@material-ui/core/styles";
+import VPNKeyIcon from "@material-ui/icons/VpnKey";
+import PropTypes from "prop-types";
 
 import { showConnexionPopin } from "../actions";
 

components/app-header/tests/__snapshots__/app-header-component.test.jsx.snap

@@ -7,7 +7,7 @@ exports[`components | app-header | index snapshot doit correspondre quand l'user
   <WithStyles(Toolbar)
     classes={
       Object {
-        "root": "HeaderContainer-toolbarRoot-1",
+        "root": "HeaderContainer-toolbarRoot-4",
       }
     }
   >
@@ -15,19 +15,19 @@ exports[`components | app-header | index snapshot doit correspondre quand l'user
     <WithStyles(Typography)
       classes={
         Object {
-          "root": "HeaderContainer-titleRoot-2",
+          "root": "HeaderContainer-titleRoot-3",
         }
       }
       component="div"
     >
       <span>
         <span
-          className="HeaderContainer-lighterTitle-3"
+          className="HeaderContainer-lighterTitle-2"
         >
           LEXIMPACT 
         </span>
         <span
-          className="HeaderContainer-bolderTitle-4"
+          className="HeaderContainer-bolderTitle-1"
         >
           POP
         </span>
@@ -45,7 +45,7 @@ exports[`components | app-header | index snapshot doit correspondre quand l'user
   <WithStyles(Toolbar)
     classes={
       Object {
-        "root": "HeaderContainer-toolbarRoot-1",
+        "root": "HeaderContainer-toolbarRoot-4",
       }
     }
   >
@@ -53,19 +53,19 @@ exports[`components | app-header | index snapshot doit correspondre quand l'user
     <WithStyles(Typography)
       classes={
         Object {
-          "root": "HeaderContainer-titleRoot-2",
+          "root": "HeaderContainer-titleRoot-3",
         }
       }
       component="div"
     >
       <span>
         <span
-          className="HeaderContainer-bolderTitle-4"
+          className="HeaderContainer-bolderTitle-1"
         >
           OPEN 
         </span>
         <span
-          className="HeaderContainer-lighterTitle-3"
+          className="HeaderContainer-lighterTitle-2"
         >
           LEXIMPACT
         </span>

components/cartes-impact/impact-component.jsx

-import { PureComponent } from "react";
-import PropTypes from "prop-types";
 import { Grid } from "@material-ui/core";
+import PropTypes from "prop-types";
+import { PureComponent } from "react";
 
 import SimpleCard from "./simple-card";
 // import CarteEtat from "./carte-etat";
@@ -10,7 +10,7 @@ class ImpactComponent extends PureComponent {
     // const { onSimPopClick } = this.props;
     // onSimPopClick(e);
     // click sim popuplation
-  }
+  };
 
   render() {
     // include should be false to remove the graph of recettes
@@ -52,10 +52,6 @@ class ImpactComponent extends PureComponent {
 }
 
 ImpactComponent.propTypes = {
-  totalPop: PropTypes.shape({
-    deciles: PropTypes.arrayOf(PropTypes.shape()),
-    total: PropTypes.shape(),
-  }).isRequired,
   casTypes: PropTypes.arrayOf(
     PropTypes.shape({
       nombre_declarants: PropTypes.number,
@@ -65,14 +61,18 @@ ImpactComponent.propTypes = {
       revenu: PropTypes.number,
     }),
   ).isRequired,
+  changeRevenuHandler: PropTypes.func.isRequired,
+  // onSimPopClick: PropTypes.func.isRequired,
+  handleOutreMerChange: PropTypes.func.isRequired,
   resBrut: PropTypes.shape({
     apres: PropTypes.shape(),
     avant: PropTypes.shape(),
     wprm: PropTypes.shape(),
   }).isRequired,
-  // onSimPopClick: PropTypes.func.isRequired,
-  handleOutreMerChange: PropTypes.func.isRequired,
-  changeRevenuHandler: PropTypes.func.isRequired,
+  totalPop: PropTypes.shape({
+    deciles: PropTypes.arrayOf(PropTypes.shape()),
+    total: PropTypes.shape(),
+  }).isRequired,
 };
 
 export default ImpactComponent;