Bump mixin-deep from 1.3.1 to 1.3.2 in /mocks

exercice-sample/.eslintrc

@@ -0,0 +1,58 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:prettier/recommended",
+    "prettier",
+    "prettier/react",
+    "react-app"
+  ],
+  "plugins": ["react", "prettier", "react-hooks"],
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react/jsx-filename-extension": [
+      2,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ],
+    "linebreak-style": 0,
+    "import/no-extraneous-dependencies": "warn",
+    "import/no-unresolved": "off",
+    "import/named": "warn",
+    "import/prefer-default-export": "off",
+    "jsx-a11y/aria-role": 1,
+    "jsx-a11y/href-no-hash": "off",
+    "jsx-a11y/label-has-for": 1,
+    "jsx-a11y/no-autofocus": 1,
+    "jsx-a11y/no-noninteractive-element-interactions": 1,
+    "jsx-a11y/anchor-is-valid": 1,
+    "prettier/prettier": "warn",
+    "react/forbid-prop-types": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "react/no-multi-comp": 0,
+    "react/no-unused-prop-types": 1,
+    "react/prop-types": 0,
+    "react/no-unescaped-entities": 1,
+    "react/jsx-closing-tag-location": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "moduleDirectory": ["node_modules", "./src"]
+      }
+    }
+  }
+}

exercice-sample/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "printWidth": 150
+}

exercice-sample/package.json

@@ -3,37 +3,53 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@axa-fr/react-toolkit-alert": "^1.0.5",
-    "@axa-fr/react-toolkit-all": "^1.0.5",
-    "@axa-fr/react-toolkit-button": "^1.0.2",
-    "@axa-fr/react-toolkit-collapse": "^1.0.5",
-    "@axa-fr/react-toolkit-layout-footer": "^1.0.5",
-    "@axa-fr/react-toolkit-layout-header": "^1.0.5",
-    "@axa-fr/react-toolkit-table": "^1.0.2",
-    "node-sass": "^4.11.0",
+    "@axa-fr/react-toolkit-alert": "^1.3.11",
+    "@axa-fr/react-toolkit-all": "^1.3.11",
+    "@axa-fr/react-toolkit-button": "^1.3.11",
+    "@axa-fr/react-toolkit-collapse": "^1.3.11",
+    "@axa-fr/react-toolkit-core": "^1.3.11",
+    "@axa-fr/react-toolkit-layout-footer": "^1.3.11",
+    "@axa-fr/react-toolkit-layout-header": "^1.3.11",
+    "@axa-fr/react-toolkit-table": "^1.3.11",
     "npm-run-all": "^4.1.5",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.3",
-    "recompose": "^0.30.0"
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "sass": "^1.26.5"
   },
   "scripts": {
     "start-mocks": "cd ../mocks && npm start",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p start-mocks start-js",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "eject": "react-scripts eject",
+    "lint": "eslint --ignore-path .gitignore .",
+    "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|json)\"",
+    "format": "npm run prettier -- --write",
+    "check-format": "npm run prettier -- --list-different",
+    "validate": "npm run check-format && npm run lint && npm run build"
   },
   "proxy": "http://127.0.0.1:4000",
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "eslint": "^7.1.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^5.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.2",
+    "prettier": "^2.0.5"
+  }
 }

exercice-sample/src/Layout/App/App.jsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import Messages, { MessageProvider } from "Shared/Messages";
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Messages, { MessageProvider } from 'Shared/Messages';
 
-import "./App.scss";
+import './App.scss';
 
-import Header from "../Header";
-import Footer from "../Footer";
-import Routes from "../Routes";
-import NavBar from "../NavBar";
+import Header from '../Header';
+import Footer from '../Footer';
+import Routes from '../Routes';
+import NavBar from '../NavBar';
 
 const App = () => (
   <MessageProvider>

exercice-sample/src/Layout/App/index.js

@@ -1 +1 @@
-export { default } from "./App";
+export { default } from './App';

exercice-sample/src/Layout/Footer/Footer.component.jsx

@@ -1,7 +1,7 @@
-import React from "react";
-import logo from "@axa-fr/react-toolkit-core/dist/assets/logo-axa.svg";
-import { Footer } from "@axa-fr/react-toolkit-all";
-import "./Footer.scss";
+import React from 'react';
+import logo from '@axa-fr/react-toolkit-core/dist/assets/logo-axa.svg';
+import { Footer } from '@axa-fr/react-toolkit-all';
+import './Footer.scss';
 
 const FooterApp = () => {
   return <Footer icon={logo} />;

exercice-sample/src/Layout/Footer/index.js

@@ -1 +1 @@
-export { default } from "./Footer.component";
+export { default } from './Footer.component';

exercice-sample/src/Layout/Header/Header.component.jsx

@@ -1,33 +1,28 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import logo from "@axa-fr/react-toolkit-core/dist/assets/logo-axa.svg";
-import { Header, Name, User } from "@axa-fr/react-toolkit-all";
-import Button from "@axa-fr/react-toolkit-button";
+import logo from '@axa-fr/react-toolkit-core/dist/assets/logo-axa.svg';
+import { Header, Name, User } from '@axa-fr/react-toolkit-all';
+import Button from '@axa-fr/react-toolkit-button';
+
+import './Header.scss';
 
-import "./Header.scss";
 const propTypes = {
   user: PropTypes.shape({
     userName: PropTypes.string.isRequired,
-    profile: PropTypes.string.isRequired
-  })
+    profile: PropTypes.string.isRequired,
+  }),
 };
 
 const HeaderApp = ({ user }) => (
   <Header>
-    <Name
-      title="OIDC Dojo"
-      subtitle="Mise en place d'OIDC Client"
-      img={logo}
-      alt="Logo React"
-      onClick={() => {}}
-    />
+    <Name title="OIDC Dojo" subtitle="Mise en place d'OIDC Client" img={logo} alt="Logo React" onClick={() => {}} />
     {user ? (
       <div className="info-user__container">
         <User name={user.userName} profile={user.email} />
         <Button
           onClick={() => {
-            console.log("logout");
+            console.log('logout');
           }}
           classModifier="logout hasiconLeft link"
         >
@@ -38,7 +33,7 @@ const HeaderApp = ({ user }) => (
     ) : (
       <Button
         onClick={() => {
-          console.log("login");
+          console.log('login');
         }}
         classModifier="login hasiconLeft"
       >

exercice-sample/src/Layout/Header/Header.container.js

@@ -1,3 +1,3 @@
-import Component from "./Header.component";
+import Component from './Header.component';
 
 export default Component;

exercice-sample/src/Layout/Header/index.js

@@ -1 +1 @@
-export { default } from "./Header.container";
+export { default } from './Header.container';

exercice-sample/src/Layout/NavBar/NavBar.component.jsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { NavBar, NavBarItem, Title } from "@axa-fr/react-toolkit-all";
+import React from 'react';
+import { NavBar, NavBarItem, Title } from '@axa-fr/react-toolkit-all';
 
-import "./NavBar.scss";
+import './NavBar.scss';
 
 const foo = () => {};
 
@@ -10,11 +10,7 @@ const Navbar = ({ positionInit, navBarItems }) => {
     <>
       <NavBar isVisible positionInit={positionInit} onClick={foo}>
         {navBarItems.map(navItem => (
-          <NavBarItem
-            actionElt={navItem.actionElt}
-            key={navItem.path}
-            label={navItem.label}
-          />
+          <NavBarItem actionElt={navItem.actionElt} key={navItem.path} label={navItem.label} />
         ))}
       </NavBar>
       <Title title="OIDC Sample" />

exercice-sample/src/Layout/NavBar/NavBar.constants.jsx

@@ -1,33 +1,33 @@
-import * as React from "react";
-import { Link } from "react-router-dom";
+import * as React from 'react';
+import { Link } from 'react-router-dom';
 
 export const navBarItems = [
   {
-    label: "Accueil",
-    path: "/",
+    label: 'Accueil',
+    path: '/',
     default: true,
     actionElt: (
       <Link className="af-nav__link" to="/">
         Accueil
       </Link>
-    )
+    ),
   },
   {
-    label: "Projets",
-    path: "/projects",
+    label: 'Projets',
+    path: '/projects',
     actionElt: (
       <Link className="af-nav__link" to="/projects">
         Projets
       </Link>
-    )
+    ),
   },
   {
-    label: "Admin",
-    path: "/admin",
+    label: 'Admin',
+    path: '/admin',
     actionElt: (
       <Link className="af-nav__link" to="/admin">
         Administration
       </Link>
-    )
-  }
+    ),
+  },
 ];

exercice-sample/src/Layout/NavBar/NavBar.container.js

@@ -1,30 +1,22 @@
-import Navbar from "./NavBar.component";
-import { compose, withProps } from "recompose";
-import { withRouter, matchPath } from "react-router";
-import { navBarItems } from "./NavBar.constants";
+import React from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import Navbar from './NavBar.component';
+import { navBarItems } from './NavBar.constants';
 
-const findPath = props => element => {
-  const match = matchPath(props.location.pathname, {
+const findPath = location => element => {
+  const match = matchPath(location.pathname, {
     path: element.path,
-    exact: true
+    exact: true,
   });
-  return (
-    (match && match.isExact) ||
-    (props.location.pathname === "/" && element.default) ||
-    false
-  );
+  return (match && match.isExact) || (location.pathname === '/' && element.default) || false;
 };
 
-const setPosition = props => navBarItems.findIndex(findPath(props));
+const setPosition = location => navBarItems.findIndex(findPath(location));
 
-const withPropsHoc = withProps(props => ({
-  navBarItems,
-  positionInit: setPosition(props)
-}));
-
-const enhance = compose(
-  withRouter,
-  withPropsHoc
-);
+const NavbarContainer = () => {
+  const location = useLocation();
+  const positionInit = setPosition(location);
+  return <Navbar navBarItems={navBarItems} positionInit={positionInit} />;
+};
 
-export default enhance(Navbar);
+export default NavbarContainer;

exercice-sample/src/Layout/NavBar/index.js

@@ -1 +1 @@
-export { default } from "./NavBar.container";
+export { default } from './NavBar.container';

exercice-sample/src/Layout/Routes/index.js

@@ -1 +1 @@
-export { default } from "./routes";
+export { default } from './routes';

exercice-sample/src/Layout/Routes/routes.jsx

@@ -1,16 +1,22 @@
-import React from "react";
-import { Switch, Route } from "react-router-dom";
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
 
-import Home from "Pages/Home";
-import Projects from "Pages/Projects";
-import Admin from "Pages/Admin";
+import Home from 'Pages/Home';
+import Projects from 'Pages/Projects';
+import Admin from 'Pages/Admin';
 
 const Routes = () => {
   return (
     <Switch>
-      <Route exact path="/" component={Home} />
-      <Route exact path="/projects" component={Projects} />
-      <Route exact path="/admin" component={Admin} />
+      <Route path="/projects">
+        <Projects />
+      </Route>
+      <Route path="/admin">
+        <Admin />
+      </Route>
+      <Route path="/">
+        <Home />
+      </Route>
     </Switch>
   );
 };