Update(front deps) & switch to yarn

Regarding #147 Also added new eslint deps for what is coming. Breaking: polyfills are handled differently now.

.gitlab-ci.yml

@@ -37,11 +37,11 @@ check_back:
 check_front:
   <<: *only-default
   stage: check
-  image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v0.5.0
+  image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v1.1.0
   before_script:
     - cd frontend && cp -R /usr/src/deps/node_modules .
   script:
-    - npm run build
+    - yarn build
   artifacts:
     paths:
       - frontend/webpack-stats.json
@@ -79,11 +79,11 @@ test_back:
 test_frontend:
   <<: *only-default
   stage: test
-  image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v0.5.0
+  image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v1.1.0
   before_script:
     - cd frontend && cp -R /usr/src/deps/node_modules .
   script:
-    - npm run test
+    - yarn test
   tags:
     - docker
 
@@ -99,11 +99,11 @@ flake8:
 eslint:
   <<: *only-default
   stage: lint
-  image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v0.5.0
+  image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v1.1.0
   before_script:
     - cd frontend && cp -R /usr/src/deps/node_modules .
   script:
-    - npm run lint
+    - yarn lint
   tags:
     - docker
 

CHANGELOG.md

 ### [Versions](https://material-ui.com/versions/)
 
+
+## Next
+###### *TBD*
+- [update] Frontend dependancies and frontend docker image
+
+
 ## v1.0.2
 ###### *11 Jan 2020*
 

Makefile

@@ -31,7 +31,7 @@ test_backend:
 	docker-compose exec backend sh -c "cd backend && pytest --cov --cov-config .coveragerc --cov-report term   base_app/ backend_app/"
 
 test_frontend:
-	docker-compose exec frontend sh -c "cd frontend && npm run test"
+	docker-compose exec frontend sh -c "cd frontend && yarn test"
 
 check_backend:
 	docker-compose exec backend sh -c "cd backend && ./manage.py check"
@@ -40,10 +40,10 @@ lint_backend:
 	docker-compose exec backend sh -c "cd backend && flake8"
 
 lint_frontend:
-	docker-compose exec frontend sh -c "cd frontend && npm run lint"
+	docker-compose exec frontend sh -c "cd frontend && yarn lint"
 
 build_frontend:
-	docker-compose exec frontend sh -c "cd frontend && npm run build"
+	docker-compose exec frontend sh -c "cd frontend && yarn build"
 
 shell_backend:
 	docker-compose exec backend sh -c "cd backend && bash"

backend/base_app/templates/cgu_rgpd.html

@@ -8,7 +8,6 @@
     </script>
 
     {% render_bundle 'rgpdCgu' %}
-    {% render_bundle 'vendor' %}
 
     {% if user.has_validated_cgu_rgpd %}
     {% else %}

backend/base_app/templates/index.html

@@ -8,7 +8,6 @@
     var __AllBackendEndPointsRoutes = {{ endpoints|safe }};
   </script>
   {% render_bundle 'main' %}
-  {% render_bundle 'vendor' %}
   <link rel="stylesheet" href="{{ front_bundle_loc }}mapbox-gl-dist/mapbox-gl.css"/>
 
 {% endblock %}

backend/base_app/templates/rgpd_raw.html

@@ -4,6 +4,5 @@
 {% block content %}
 
     {% render_bundle 'rgpdRaw' %}
-    {% render_bundle 'vendor' %}
 
 {% endblock %}

docker-compose.yml

@@ -64,11 +64,11 @@ services:
   # Service to handle frontend live developpments and building
   frontend:
     # Get the image from the registry
-    image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v0.5.0
+    image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v1.1.0
     # To use a locally built one, comment above, uncomment bellow.
     # build: ./frontend
     # On startup, we retrieve the dependencies from the image and start the developpement server
-    command: /bin/sh -c "cd frontend && cp -R /usr/src/deps/node_modules . && npm run dev"
+    command: /bin/sh -c "cd frontend && cp -R /usr/src/deps/node_modules . && yarn dev"
     volumes:
       # "Copy" the repo to the workdir.
       - .:/usr/src/app/

documentation/GettingStarted/IDE_setup.md

@@ -34,8 +34,8 @@ For the frontend the use of [`WebStorm`](https://www.jetbrains.com/webstorm/?fro
 
 No special configuration is required, except you might:
 
-* Need to install `Node.js` on your system
-* You should install the Node.js dependencies locally (they are in the frontend docker image, but they can't be used through the IDE this time). So run `npm ci`.
+* Need to install `Node.js` on your system and `yarn` (`npm install -g yarn`)
+* You should install the Node.js dependencies locally (they are in the frontend docker image, but they can't be used through the IDE this time). So run `yarn install`.
 
 
 ## For general purposes

frontend/.babelrc

 {
     "presets": [
         "@babel/preset-env",
-        "@babel/preset-react",
+        "@babel/preset-react"
     ],
     "plugins": [
         "react-hot-loader/babel",
-        "@babel/plugin-proposal-class-properties",
-    ],
+        "@babel/plugin-proposal-class-properties"
+    ]
 }

frontend/Dockerfile

@@ -6,8 +6,8 @@ ENV NODE_ENV = "DEV"
 WORKDIR /usr/src/deps
 
 COPY ./package.json ./package.json
-COPY ./package-lock.json ./package-lock.json
-RUN npm ci
+COPY ./yarn.lock ./yarn.lock
+RUN yarn install --network-timeout 1000000
 
 # And prepare a clean workdir for the project
 WORKDIR /usr/src/app

frontend/package.json

@@ -4,8 +4,8 @@
   "description": "[![build](/../badges/master/build.svg)](https://gitlab.utc.fr/chehabfl/outgoing_rex/pipelines) [![coverage](/../badges/master/coverage.svg)](https://chehabfl.gitlab.utc.fr/outgoing_rex/) [![License](https://img.shields.io/badge/License-BSD%202--Clause-green.svg)](https://opensource.org/licenses/BSD-2-Clause)",
   "main": "manage.py",
   "scripts": {
-    "lint": "eslint \"./src/**/*.js\"",
-    "lint-fix": "eslint \"./src/**/*.js\" --fix",
+    "lint": "eslint src --ext js --ext jsx",
+    "lint-fix": "eslint src --ext js --ext jsx --fix",
     "dev": "node server.js",
     "build": "webpack --config webpack.config.build.js",
     "test": "jest",
@@ -19,70 +19,76 @@
   "author": "",
   "license": "BSD-2-Clause",
   "private": true,
+  "browserslist": [
+    "defaults"
+  ],
   "dependencies": {
-    "@date-io/date-fns": "^1.3.6",
-    "@material-ui/core": "^4.0.0",
-    "@material-ui/styles": "^4.0.0",
-    "@material-ui/icons": "^4.0.0",
+    "@date-io/date-fns": "^1.3.9",
+    "@material-ui/core": "^4.4.0",
+    "@material-ui/icons": "^4.2.1",
     "@material-ui/lab": "^4.0.0-alpha.13",
-    "@material-ui/pickers": "^3.0.0",
-    "axios": "^0.18.0",
-    "date-fns": "^2.0.0-alpha.27",
-    "downshift": "^3.2.3",
+    "@material-ui/pickers": "^3.2.4",
+    "@material-ui/styles": "^4.3.3",
+    "axios": "^0.19.0",
+    "core-js": "^3.2.1",
+    "date-fns": "^2.0.1",
+    "downshift": "^3.2.12",
     "fuzzysort": "^1.1.4",
     "keycode": "^2.2.0",
-    "lodash": "^4.17.11",
-    "mapbox-gl": "^0.54.0",
-    "notistack": "^0.4.3",
-    "react": "^16.8.6",
-    "react-awesome-slider": "^0.5.2",
-    "react-dom": "^16.8.6",
-    "react-mapbox-gl": "^4.3.2",
-    "react-markdown": "^4.0.6",
-    "react-redux": "^6.0.1",
-    "react-router-dom": "^5.0.0",
-    "react-swipeable-views": "^0.13.1",
+    "lodash": "^4.17.15",
+    "mapbox-gl": "^1.3.0",
+    "notistack": "^0.8.9",
+    "react": "^16.9.0",
+    "react-awesome-slider": "^1.0.1",
+    "react-dom": "^16.9.0",
+    "react-mapbox-gl": "^4.6.0",
+    "react-markdown": "^4.1.0",
+    "react-redux": "^7.1.1",
+    "react-router-dom": "^5.0.1",
     "recompose": "^0.30.0",
-    "redux": "^4.0.1",
+    "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "typeface-roboto": "0.0.54",
-    "uuid": "^3.3.2"
+    "regenerator-runtime": "^0.13.3",
+    "typeface-roboto": "0.0.75",
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.3",
-    "@babel/plugin-proposal-class-properties": "^7.4.0",
-    "@babel/polyfill": "^7.4.3",
-    "@babel/preset-env": "^7.4.3",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^9.5.1",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
-    "babel-loader": "^8.0.5",
-    "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "^2.1.0",
-    "eslint": "^5.14.1",
+    "autoprefixer": "^9.6.1",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.3.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-import-resolver-node": "^0.3.2",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.3.0",
-    "eslint-plugin-react": "^7.12.4",
-    "file-loader": "^3.0.1",
-    "jest": "^24.1.0",
-    "js-yaml-loader": "^1.0.1",
-    "mini-css-extract-plugin": "^0.5.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "file-loader": "^4.2.0",
+    "jest": "^24.9.0",
+    "js-yaml-loader": "^1.2.2",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.7.2",
-    "raw-loader": "^3.0.0",
-    "react-hot-loader": "^4.8.3",
+    "raw-loader": "^3.1.0",
+    "react-hot-loader": "^4.12.12",
     "react-lorem-component": "^0.13.0",
     "react-script": "^2.0.5",
-    "sass-loader": "^7.1.0",
-    "webpack": "^4.29.6",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "sass-loader": "^8.0.0",
+    "webpack": "^4.39.3",
+    "webpack-bundle-analyzer": "^3.4.1",
     "webpack-bundle-tracker": "^0.4.2-beta",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1",
-    "webpack-merge": "^4.2.1"
+    "webpack-cli": "^3.3.7",
+    "webpack-dev-server": "^3.8.0",
+    "webpack-merge": "^4.2.2"
   }
 }

frontend/server.js

@@ -8,7 +8,7 @@
  * On Django side, the "dynamic" link is made using django-webpack-loader package.
  *
  * [OUT OF THE SCOPE OF THIS FILE]
- * Note that if you run `npm run build`, then the file are generated and stored in the `dist` folder.
+ * Note that if you run `yarn build`, then the file are generated and stored in the `dist` folder.
  *  `webpack-stat.json` will be updated accordingly; so there is nothing to worry with Django.
  *
  */

frontend/src/components/app/FullScreenDialog.js

-import React, { Component } from "react";
+import React from "react";
 import Dialog from "@material-ui/core/Dialog";
 import Slide from "@material-ui/core/Slide";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
 
 
 /**
  * Component to enable the FullScreenDialog to have nice transitions
  * @returns
  */
+// eslint-disable-next-line react/display-name
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
 
 /**
- * Class to display a full screen dialog.
+ * Component to display a full screen dialog.
  * It is connected to the redux state to have only one of such dialog across the app.
- *
- * @class FullScreenDialog
- * @extends {Component}
  */
-class FullScreenDialog extends Component {
-  render() {
-    return (
-      <Dialog
-        fullScreen
-        open={this.props.open}
-        TransitionComponent={Transition}
-      >
-        {this.props.innerNodes}
-      </Dialog>
-    );
-  }
+function FullScreenDialog({open, innerNodes}) {
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      TransitionComponent={Transition}
+    >
+      {innerNodes}
+    </Dialog>
+  );
 }
 
 
@@ -42,6 +38,6 @@ FullScreenDialog.propTypes = {
 };
 
 // Get the props from the redux store.
-const mapStateToProps = (state) => ({ ...state.app.fullScreenDialog });
+const mapStateToProps = (state) => ({...state.app.fullScreenDialog});
 
 export default connect(mapStateToProps)(FullScreenDialog);

frontend/src/components/app/SnackbarCloseButton.js

+import {IconButton} from "@material-ui/core";
+import {Close as IconClose} from "@material-ui/icons";
+import {useSnackbar} from "notistack";
+import React from "react";
+import PropTypes from "prop-types";
+
+function SnackbarCloseButton({notiKey}) {
+  const {closeSnackbar} = useSnackbar();
+
+  return (
+    <IconButton onClick={() => closeSnackbar(notiKey)}>
+      <IconClose/>
+    </IconButton>
+  );
+}
+
+SnackbarCloseButton.propTypes = {
+  notiKey: PropTypes.number.isRequired,
+};
+
+export default SnackbarCloseButton;
\ No newline at end of file

frontend/src/components/common/CoverGallery/CoverGallery.js

@@ -83,8 +83,8 @@ const componentStyles = theme => ({
   editButton: {
     position: "absolute",
     zIndex: 1000,
-    right: theme.spacing.unit * 2,
-    bottom: theme.spacing.unit * 2
+    right: theme.spacing(2),
+    bottom: theme.spacing(2)
   },
   editButtonLabel: {
     [theme.breakpoints.down("sm")]: {
@@ -93,7 +93,7 @@ const componentStyles = theme => ({
   },
   rightIcon: {
     [theme.breakpoints.up("md")]: {
-      marginLeft: theme.spacing.unit
+      marginLeft: theme.spacing(1)
     }
   }
 });

frontend/src/components/user/Pictures.js

@@ -11,8 +11,8 @@ import sortBy from "lodash/sortBy";
 
 const styles = theme => ({
   spacer: {
-    marginTop: 2 * theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(1),
   },
   picture: {
     maxHeight: "30vh",
@@ -26,7 +26,7 @@ const styles = theme => ({
     // marginRight: "auto",
   },
   rightIcon: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
   },
 });
 

frontend/src/entry/mainApp.js

+import "core-js/stable";
+import "regenerator-runtime/runtime";
+
+
 import React from "react";
 import ReactDOM from "react-dom";
 import {Provider} from "react-redux";
 import {BrowserRouter as Router} from "react-router-dom";
 import {SnackbarProvider} from "notistack"; // provider to easily handle notifications across the app
-import Button from "@material-ui/core/Button";
 import green from "@material-ui/core/colors/green";
 import amber from "@material-ui/core/colors/amber";
 import store from "../redux/store";
@@ -11,6 +14,7 @@ import App from "../components/app/App";
 import ThemeProvider from "../components/common/theme/ThemeProvider";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import {makeStyles} from "@material-ui/styles";
+import SnackbarCloseButton from "../components/app/SnackbarCloseButton";
 
 /**
  * Get the correct style for a color of notistack (not enough contrast some times with default settings)
@@ -54,11 +58,7 @@ function SubEntry() {
         vertical: "top",
         horizontal: "right",
       }}
-      action={[
-        <Button key={0} color="inherit" size="small">
-          {"Fermer"}
-        </Button>
-      ]}
+      action={key => <SnackbarCloseButton notiKey={key}/>}
       classes={{...classesNotistack}}
     >
       <>

frontend/webpack.config.base.js

@@ -12,9 +12,6 @@ const config = {
     ],
     rgpdRaw: [
       "./src/entry/rgpdRaw",
-    ],
-    vendor: [
-      "@babel/polyfill",
     ]
   },
   output: {