Commit bf21c048 authored by Florent Chehab's avatar Florent Chehab

Update(front deps) & switch to yarn

Regarding #147 Also added new eslint deps for what is coming. Breaking: polyfills are handled differently now.
parent 53172e0d
......@@ -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
......
......@@ -2,7 +2,7 @@
## Next
###### *TBD*
- [update] Frontend dependancies and frontend docker image
- [bug fix] Logout working on mobile ([#150](https://gitlab.utc.fr/rex-dri/rex-dri/issues/150))
......
......@@ -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"
......
......@@ -8,7 +8,6 @@
</script>
{% render_bundle 'rgpdCgu' %}
{% render_bundle 'vendor' %}
{% if user.has_validated_cgu_rgpd %}
{% else %}
......
......@@ -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 %}
......@@ -4,6 +4,5 @@
{% block content %}
{% render_bundle 'rgpdRaw' %}
{% render_bundle 'vendor' %}
{% endblock %}
......@@ -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/
......
......@@ -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
......
{
"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"
]
}
......@@ -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
This diff is collapsed.
......@@ -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"
}
}
......@@ -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.
*
*/
......
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);
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
......@@ -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)
}
}
});
......
......@@ -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),
},
});
......
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}}
>
<>
......
......@@ -12,9 +12,6 @@ const config = {
],
rgpdRaw: [
"./src/entry/rgpdRaw",
],
vendor: [
"@babel/polyfill",
]
},
output: {
......
This diff is collapsed.
......@@ -39,8 +39,8 @@ services:
volumes: ["postgres_data_prod:/var/lib/postgresql/data/"]
frontend: # Will be killed as soon as the front is generated
image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v0.5.0
command: /bin/sh -c "cd frontend && cp -R /usr/src/deps/node_modules . && npm run build"
image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v1.1.0
command: /bin/sh -c "cd frontend && cp -R /usr/src/deps/node_modules . && yarn build"
networks: []
volumes:
- ../:/usr/src/app/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment