React conversion (electricitymaps#2111)

* React rewrite

* Linter

* Refactor

* More readme and fix sentry

* Fix build

* Move more to redux/react

* Clean up

* Simpler docker

.circleci/config.yml

@@ -52,7 +52,9 @@ stages:
         command: |
           set -euo pipefail
           docker-compose build
-          docker-compose run web npm run build-release
+          # Make sure files are available outside of container
+          CONTAINER_ID=$(docker create eu.gcr.io/tmrow-152415/electricitymap_web:latest)
+          docker cp $CONTAINER_ID:/home/web/public/dist web/public/dist
         no_output_timeout: 30m
       - type: shell
         name: Start environment

README.md

@@ -384,19 +384,17 @@ To get started, [clone](https://help.github.com/articles/cloning-a-repository/)
 
 The frontend will need compiling. In order to do this, open a terminal in the root directory and run
 ```
-docker-compose run --rm web npm run watch
-```
-This will watch over source file changes, running nonstop and watching changes you make in the code to recompile the frontend if needed. For the next steps you will need to open a new terminal while this command keeps running.
-
-If you encounter any errors in the build process try the following command first:
-```
 docker-compose build
 ```
-Now that the frontend is compiled, you can run the application by running the following command in a new terminal:
+One you are done, you can start the application by running
 ```
-docker-compose up --build
+docker-compose up
 ```
 
+This will watch over source file changes, running nonstop and watching changes you make in the code to recompile the frontend if needed.
+Note this only builds for the English language (which will be faster as not all languages need to be built).
+If you want to build all languages, change the `command` of the `web-watch-en` section of docker-compose.yml from `command: npm run watch-en` to `command: npm run watch`.
+
 Head over to [http://localhost:8000/](http://localhost:8000/) and you should see the map! Note that the backend is responsible for calculation carbon emissions, so the map will be empty.
 
 If you have issues building the map locally check out the [Troubleshooting](#troubleshooting) section for common problems and fixes.

docker-compose.yml

@@ -13,13 +13,42 @@ services:
       cache_from:
         - eu.gcr.io/tmrow-152415/electricitymap_web:production
         - eu.gcr.io/tmrow-152415/electricitymap_web:staging
+        - eu.gcr.io/tmrow-152415/electricitymap_web:latest
+    image: eu.gcr.io/tmrow-152415/electricitymap_web:latest
     command: npm run server-dev
     depends_on: ['mockserver']
     environment:
       - NODE_ENV=development
     ports: ['8000:8000']
     volumes:
       - './config:/home/config'
+      - './web/.eslintrc:/home/web/.eslintrc'
+      - './web/generate-geometries.js:/home/web/generate-geometries.js'
+      - './web/locales:/home/web/locales'
+      - './web/locales-config.json:/home/web/locales-config.json'
+      - './web/package.json:/home/web/package.json'
+      - './web/public:/home/web/public'
+      - './web/server.js:/home/web/server.js'
+      - './web/src:/home/web/src'
+      - './web/third_party_maps:/home/web/third_party_maps'
+      - './web/topogen.sh:/home/web/topogen.sh'
+      - './web/views:/home/web/views'
+      - './web/webpack.config.js:/home/web/webpack.config.js'
+  web-watch-en:
+    build:
+      context: .
+      dockerfile: web/Dockerfile
+      cache_from:
+        - eu.gcr.io/tmrow-152415/electricitymap_web:production
+        - eu.gcr.io/tmrow-152415/electricitymap_web:staging
+        - eu.gcr.io/tmrow-152415/electricitymap_web:latest
+    image: eu.gcr.io/tmrow-152415/electricitymap_web:latest
+    command: npm run watch-en
+    environment:
+      - NODE_ENV=development
+    volumes:
+      - './config:/home/config'
+      - './web/.eslintrc:/home/web/.eslintrc'
       - './web/generate-geometries.js:/home/web/generate-geometries.js'
       - './web/locales:/home/web/locales'
       - './web/locales-config.json:/home/web/locales-config.json'

web/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

web/.eslintrc

@@ -1,5 +1,15 @@
 {
+  "globals": {
+    "VERSION": "readonly",
+    "locale": "readonly",
+    "codePush": "readonly",
+    "device": "readonly",
+    "cordova": "readonly",
+    "universalLinks": "readonly",
+    "InstallMode": "readonly",
+  },
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "env": {
     "browser": true,
   },
@@ -16,6 +26,7 @@
     "dot-notation": "warn",
     "implicit-arrow-linebreak": "off",
     "import/prefer-default-export": "off",
+    "jsx-a11y/alt-text": "warn",
     "max-len": "warn",
     "no-await-in-loop": "warn",
     "no-continue": "warn",
@@ -26,6 +37,7 @@
     "no-unused-vars": "warn",
     "react/destructuring-assignment": "warn",
     "quote-props": "warn",
+    "react/jsx-curly-brace-presence": "warn",
     "react/jsx-one-expression-per-line": "warn",
     "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
     "react/prop-types": "warn",

web/Dockerfile

@@ -21,7 +21,7 @@ ARG ELECTRICITYMAP_PUBLIC_TOKEN
 # (note: this will override the world.json that was previously created)
 ADD config /home/config
 ADD web /home/web
-RUN yarn run build-release
+RUN yarn lint && yarn build-release
 
 EXPOSE 8000
 ENV PORT 8000

web/package.json

@@ -37,10 +37,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/polyfill": "^7.7.0",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
     "@babel/runtime": "^7.7.2",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "colors": "^1.3.2",
     "css-loader": "^0.28.10",
@@ -65,9 +67,10 @@
     "build-debug": "webpack --bail --progress --mode development",
     "build-release": "export NODE_ENV=production && cat locales-config.json| jq '.languageNames | keys[]' | xargs -L1 -I {} node_modules/.bin/webpack --mode production --bail --config-name {}",
     "clean": "mkdir -p public/dist && rm public/dist/bundle.*.js",
-    "eslint": "eslint src",
+    "lint": "eslint --quiet src",
     "server-dev": "nodemon server.js",
     "watch": "webpack --watch --progress --mode development",
+    "watch-en": "webpack --watch --progress --mode development --config-name en",
     "watch-poll": "webpack --watch --watch-poll --progress --mode development"
   }
 }

web/src/actioncreators.js

@@ -0,0 +1,7 @@
+export function updateApplication(key, value) {
+  return {
+    key,
+    value,
+    type: 'APPLICATION_STATE_UPDATE',
+  };
+}

web/src/components/areagraph.js

@@ -1,4 +1,5 @@
-'use strict'
+/* eslint-disable */
+// TODO: remove once refactored
 
 const d3 = Object.assign(
   {},

web/src/components/circulargauge.js

@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+// TODO: re-enable rule
+
 import React from 'react';
 
 import * as d3Selection from 'd3-selection';

web/src/components/countrytable.js

@@ -1,3 +1,6 @@
+/* eslint-disable */
+// TODO: remove once refactored
+
 import NoDataOverlay from '../components/nodataoverlay'
 
 const d3 = Object.assign(

web/src/components/faq.js

@@ -1,11 +1,11 @@
-const translation = require('../helpers/translation');
-const formatting = require('../helpers/formatting');
-
 const d3 = Object.assign(
   {},
   require('d3-selection'),
 );
 
+const translation = require('../helpers/translation');
+const formatting = require('../helpers/formatting');
+
 const faq = {};
 
 const orderings = [
@@ -34,7 +34,7 @@ const orderings = [
     entryLinks: {
       noData: 'contribute',
       divideExistingArea: 'contribute',
-    }
+    },
   },
   {
     groupKey: 'methodology',
@@ -50,7 +50,7 @@ const orderings = [
     ],
     entryLinks: {
       otherSources: 'whoAreYou',
-    }
+    },
   },
   {
     groupKey: 'data',
@@ -74,13 +74,16 @@ const orderings = [
   },
 ];
 
-orderings.forEach(e => {
-  faq[e.groupKey] = {groupName: translation.translate(e.groupKey + '.groupName'), entries: {}};
-  e.entryOrder.forEach(f => {
+orderings.forEach((e) => {
+  faq[e.groupKey] = {
+    groupName: translation.translate(`${e.groupKey}.groupName`),
+    entries: {},
+  };
+  e.entryOrder.forEach((f) => {
     faq[e.groupKey].entries[f] = {
-      question: translation.translate(e.groupKey + '.' + f + '-question'),
-      answer: translation.translate(e.groupKey + '.' + f + '-answer')
-    }
+      question: translation.translate(`${e.groupKey}.${f}-question`),
+      answer: translation.translate(`${e.groupKey}.${f}-answer`),
+    };
   });
 });
 

web/src/components/horizontalcolorbar.js

@@ -204,9 +204,9 @@ HorizontalColorbar.prototype._setDomainAndRange = function _setDomainAndRange(d,
 
   this._domain = d;
   this.colors = r || d3.range(10).map((i) => {
-    let e = d3.extent(that._domain);
-    let inter = d3.interpolate(e[0], e[1]);
-    let value = inter(i / (10 - 1));
+    const e = d3.extent(that._domain);
+    const inter = d3.interpolate(e[0], e[1]);
+    const value = inter(i / (10 - 1));
     return that.originalColorScale(value);
   });
   this.scale = d3.scaleLinear()

web/src/components/layers/exchange.js

@@ -1,3 +1,6 @@
+/* eslint-disable */
+// TODO: remove once refactored
+
 const d3 = Object.assign(
   {},
   require('d3-selection'),

web/src/components/layers/solar.js

@@ -1,3 +1,6 @@
+/* eslint-disable */
+// TODO: remove once refactored
+
 const d3 = Object.assign(
   {},
   require('d3-array'),

web/src/components/layers/wind.js

@@ -1,3 +1,6 @@
+/* eslint-disable */
+// TODO: remove once refactored
+
 const d3 = Object.assign(
   {},
   require('d3-interpolate'),

web/src/components/linegraph.js

@@ -1,4 +1,5 @@
-'use strict';
+/* eslint-disable */
+// TODO: remove once refactored
 
 const d3 = Object.assign(
   {},

web/src/components/map.js

@@ -124,6 +124,7 @@ export default class Map {
     this.zoom = config.zoom;
 
     if (!mapboxgl.supported()) {
+      // eslint-disable-next-line no-throw-literal
       throw 'WebGL not supported';
     }
 
@@ -151,7 +152,7 @@ export default class Map {
       // the wrong size, so we resize it here just in case.
       setTimeout(() => {
         this.map.resize();
-      }, 500)
+      }, 500);
     });
 
     // Set a timer to detect when the map has finished loading
@@ -353,37 +354,37 @@ export default class Map {
 
   onSeaClick(arg) {
     if (!arg) return this.seaClickHandler;
-    else this.seaClickHandler = arg;
+    this.seaClickHandler = arg;
     return this;
   }
 
   onCountryClick(arg) {
     if (!arg) return this.countryClickHandler;
-    else this.countryClickHandler = arg;
+    this.countryClickHandler = arg;
     return this;
   }
 
   onCountryMouseOver(arg) {
     if (!arg) return this.countryMouseOverHandler;
-    else this.countryMouseOverHandler = arg;
+    this.countryMouseOverHandler = arg;
     return this;
   }
 
   onZoneMouseOut(arg) {
     if (!arg) return this.zoneMouseOutHandler;
-    else this.zoneMouseOutHandler = arg;
+    this.zoneMouseOutHandler = arg;
     return this;
   }
 
   onZoneMouseMove(arg) {
     if (!arg) return this.zoneMouseMoveHandler;
-    else this.zoneMouseMoveHandler = arg;
+    this.zoneMouseMoveHandler = arg;
     return this;
   }
 
   onMouseMove(arg) {
     if (!arg) return this.mouseMoveHandler;
-    else this.mouseMoveHandler = arg;
+    this.mouseMoveHandler = arg;
     return this;
   }
 

web/src/components/nodataoverlay.js

@@ -1,10 +1,10 @@
-const translation = require('../helpers/translation');
-
 const d3 = Object.assign(
   {},
   require('d3-selection'),
 );
 
+const translation = require('../helpers/translation');
+
 export default class NoDataOverlay {
   constructor(selectorId, argConfig) {
     this.selectorId = selectorId;
@@ -24,5 +24,4 @@ export default class NoDataOverlay {
   showIfElseHide(condition) {
     this.rootContainer.classed('visible', condition);
   }
-
 }

web/src/components/onboardingmodal.js

@@ -1,10 +1,11 @@
-const translation = require('../helpers/translation');
-const formatting = require('../helpers/formatting');
 const d3 = Object.assign(
   {},
   require('d3-selection'),
 );
 
+const translation = require('../helpers/translation');
+const formatting = require('../helpers/formatting');
+
 const SPACE_KEY_CODE = 32;
 
 const defaultViews = [{
@@ -30,7 +31,6 @@ const defaultViews = [{
 },
 ];
 
-
 export default class OnboardingModal {
   constructor(selectorId, argConfig) {
     const config = argConfig || {};
@@ -155,6 +155,7 @@ export default class OnboardingModal {
     }
     this.modalFooterCircles[0].classed('highlight', true);
   }
+
   _updateBody() {
     this.modalBody.html(null);