chore(eslint): restore eslint and add pre-commit hook

.circleci/config.yml

@@ -5,9 +5,18 @@ jobs:
       - image: 'circleci/node:latest'
     steps:
       - checkout
+      - restore_cache:
+          key: npm-deps-{{ arch }}-{{ .Branch }}-{{ checksum "package-lock.json" }}
       - run:
           name: Install dependencies
           command: npm install
+      - save_cache:
+          key: npm-deps-{{ arch }}-{{ .Branch }}-{{ checksum "package-lock.json" }}
+          paths:
+            - ./node_modules
       - run:
-          name: Circular dependencies
+          name: Lint
+          command: npm run lint
+      - run:
+          name: Detect circular dependencies
           command: npm run circular

.eslintrc

@@ -1,12 +1,15 @@
 {
   "extends": ["airbnb", "prettier", "prettier/react"],
   "plugins": ["react", "jest", "prettier"],
+  "parser": "babel-eslint",
   "rules": {
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "react/no-unused-prop-types": false,
-    "react/forbid-prop-types": false
+    "react/no-unused-prop-types": 0,
+    "react/forbid-prop-types": 0,
+    "react/prop-types": 1,
+    "import/first": 1
   },
   "env": {
     "browser": true
   }
-}
+}

lib/actions/rootActions.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import * as actions from './actionTypes';
 import { client, keenWebHost, keenWebFetchOptions } from 'Client/index';
 

lib/builder/components/Accordion.js

@@ -1,8 +1,10 @@
+/* eslint-disable */
+
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-const AccordionSection = (props) => {
+const AccordionSection = props => {
   const { isOpen, label, children, onClick } = props;
   const sectionOnClick = () => onClick(label);
   let itemClass = 'accordion__item';
@@ -11,41 +13,49 @@ const AccordionSection = (props) => {
   }
   return (
     <div className={itemClass}>
-      <div className="accordion__item__heading heading" onClick={sectionOnClick}>
-        <FontAwesomeIcon icon="chevron-right" size="sm" className="heading__icon" />
+      <div
+        className="accordion__item__heading heading"
+        onClick={sectionOnClick}
+      >
+        <FontAwesomeIcon
+          icon="chevron-right"
+          size="sm"
+          className="heading__icon"
+        />
         {label}
       </div>
       <div className="accordion__item__content" hidden={!isOpen}>
         {children}
       </div>
     </div>
-  )
-}
+  );
+};
 
 AccordionSection.propTypes = {
   isOpen: PropTypes.bool,
   label: PropTypes.string,
   children: PropTypes.object,
-  onClick: PropTypes.func,
-}
+  onClick: PropTypes.func
+};
 
-const Accordion = (props) => {
+const Accordion = props => {
   const { children, allowMultipleOpen } = props;
   const [openSections, setOpenSections] = useState({});
-  const onClick = (label) => {
+  const onClick = label => {
     const isOpen = !!openSections[label];
-    const updatedSections = allowMultipleOpen ? {
-      ...openSections,
-      [label]: !isOpen,
-    } : 
-    {
-      [label]: !isOpen,
-    };
+    const updatedSections = allowMultipleOpen
+      ? {
+          ...openSections,
+          [label]: !isOpen
+        }
+      : {
+          [label]: !isOpen
+        };
     setOpenSections(updatedSections);
   };
   return (
     <div className="accordion">
-      {children.map((child) => (
+      {children.map(child => (
         <AccordionSection
           key={child.props.label}
           isOpen={!!openSections[child.props.label]}
@@ -56,16 +66,16 @@ const Accordion = (props) => {
         </AccordionSection>
       ))}
     </div>
-  )
+  );
 };
 
 export default Accordion;
 
 Accordion.defaultProps = {
-  allowMultipleOpen: false,
-}
+  allowMultipleOpen: false
+};
 
 Accordion.propTypes = {
   allowMultipleOpen: PropTypes.bool,
-  children: PropTypes.object.isRequired,
-}
+  children: PropTypes.object.isRequired
+};

lib/builder/components/Chart.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React, { Component, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { savedQueryError } from '../../actions/rootActions';
@@ -228,7 +230,7 @@ Chart.defaultProps = {
   legend: {
     show: false,
     position: 'top',
-    alignment: 'left', 
+    alignment: 'left',
     label: {
       textMaxLength: 12
     },
@@ -239,6 +241,6 @@ Chart.defaultProps = {
     tooltip: {
       show: true,
       pointer: true
-    },
+    }
   }
 };

lib/builder/components/ChartContainer.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import {
@@ -198,7 +200,7 @@ class ChartContainer extends Component {
     }
 
     const pointSettings = {
-      show: showPoints ? (showPoints.value ? true : false) : true,
+      show: showPoints ? !!showPoints.value : true,
       r: pointsSize ? pointsSize.value : 2.5
     };
 
@@ -237,7 +239,9 @@ class ChartContainer extends Component {
     };
     // const axis = this.getChartAxisOptions(template);
     const chartOptions =
-      charts_theme && charts_theme[index] !== undefined && charts_theme[index] !== null
+      charts_theme &&
+      charts_theme[index] !== undefined &&
+      charts_theme[index] !== null
         ? charts_theme[index]
         : {};
     return (

lib/builder/components/SettingsChart.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import {
@@ -196,7 +198,9 @@ class SettingsChart extends Component {
           {savedQuery.length !== 0 && (
             <Builder
               options={
-                charts_theme && charts_theme[settingsVisible] !== undefined && charts_theme[settingsVisible] !== null
+                charts_theme &&
+                charts_theme[settingsVisible] !== undefined &&
+                charts_theme[settingsVisible] !== null
                   ? {
                       ...charts_theme[settingsVisible].theme,
                       ...builderOptions

lib/builder/components/SettingsChoropleth.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React from 'react';
 import { connect } from 'react-redux';
 import {
@@ -40,46 +42,49 @@ const SettingsChoropleth = props => {
     slidersChoropleth,
     settingsVisible
   } = props;
-  const borderChoroplethProp = borderChoropleth
-    ? borderChoropleth
-    : { value: true, label: 'Yes' };
+  const borderChoroplethProp = borderChoropleth || {
+    value: true,
+    label: 'Yes'
+  };
   if (type === 'choropleth') {
-    return <React.Fragment>
-      <h4>Map</h4>
-      <Select
-        defaultValue={{ value: 'world', label: 'World' }}
-        value={mapChoropleth}
-        onChange={e => props.selectChoroplethMap(e, settingsVisible)}
-        options={mapChoroplethOptions}
-      />
-      <h4>Show borders</h4>
-      <Select
-        defaultValue={{ value: true, label: 'Yes' }}
-        value={borderChoroplethProp}
-        onChange={e => props.showChoroplethBorder(e, settingsVisible)}
-        options={showChoroplethBordersOptions}
-      />
-      {borderChoroplethProp.value && (
-        <React.Fragment>
-          <h4>Border size</h4>
-          <Select
-            defaultValue={{ value: 0.5, label: '0.5px' }}
-            value={borderSizeChoropleth}
-            onChange={e =>
-              props.selectChoroplethBorderSize(e, settingsVisible)
-            }
-            options={choroplethBorderSizeOptions}
-          />
-        </React.Fragment>
-      )}
-      <h4>Show sliders</h4>
-      <Select
-        defaultValue={{ value: false, label: 'No' }}
-        value={slidersChoropleth}
-        onChange={e => props.showChoroplethSliders(e, settingsVisible)}
-        options={showChoroplethSlidersOptions}
-      />
-    </React.Fragment>;
+    return (
+      <React.Fragment>
+        <h4>Map</h4>
+        <Select
+          defaultValue={{ value: 'world', label: 'World' }}
+          value={mapChoropleth}
+          onChange={e => props.selectChoroplethMap(e, settingsVisible)}
+          options={mapChoroplethOptions}
+        />
+        <h4>Show borders</h4>
+        <Select
+          defaultValue={{ value: true, label: 'Yes' }}
+          value={borderChoroplethProp}
+          onChange={e => props.showChoroplethBorder(e, settingsVisible)}
+          options={showChoroplethBordersOptions}
+        />
+        {borderChoroplethProp.value && (
+          <React.Fragment>
+            <h4>Border size</h4>
+            <Select
+              defaultValue={{ value: 0.5, label: '0.5px' }}
+              value={borderSizeChoropleth}
+              onChange={e =>
+                props.selectChoroplethBorderSize(e, settingsVisible)
+              }
+              options={choroplethBorderSizeOptions}
+            />
+          </React.Fragment>
+        )}
+        <h4>Show sliders</h4>
+        <Select
+          defaultValue={{ value: false, label: 'No' }}
+          value={slidersChoropleth}
+          onChange={e => props.showChoroplethSliders(e, settingsVisible)}
+          options={showChoroplethSlidersOptions}
+        />
+      </React.Fragment>
+    );
   }
   return null;
 };

lib/builder/components/SettingsLegendPosition.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React from 'react';
 import { connect } from 'react-redux';
 import { selectLegendPosition } from '../../actions/rootActions';
@@ -28,14 +30,16 @@ const SettingsLegendPosition = props => {
     type !== 'choropleth' &&
     type !== 'heatmap'
   ) {
-    return <React.Fragment>
-      <h4>Legend</h4>
-      <Select
-        value={legend}
-        onChange={e => props.selectLegendPosition(e, settingsVisible)}
-        options={legendPositions}
-      />
-    </React.Fragment>;
+    return (
+      <React.Fragment>
+        <h4>Legend</h4>
+        <Select
+          value={legend}
+          onChange={e => props.selectLegendPosition(e, settingsVisible)}
+          options={legendPositions}
+        />
+      </React.Fragment>
+    );
   }
   return null;
 };

lib/builder/components/SettingsPoints.js

@@ -1,11 +1,13 @@
-import React from "react";
-import { connect } from "react-redux";
-import { selectShowPoints, selectPointsSize } from "../../actions/rootActions";
-import Select from "react-select";
+/* eslint-disable */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { selectShowPoints, selectPointsSize } from '../../actions/rootActions';
+import Select from 'react-select';
 
 const showPointsOptions = [
-  { value: true, label: "Yes" },
-  { value: false, label: "No" }
+  { value: true, label: 'Yes' },
+  { value: false, label: 'No' }
 ];
 
 const pointsSizeOptions = [];
@@ -16,13 +18,11 @@ for (let i = 1; i < 11; i++) {
 const SettingsPoints = props => {
   const { type, showPoints, settingsVisible, pointsSize } = props;
 
-  const showPointsValue = showPoints
-    ? showPoints
-    : { value: true, label: "Yes" };
+  const showPointsValue = showPoints || { value: true, label: 'Yes' };
 
   if (
     type &&
-    (type.includes("line") || (type.includes("area") && !type.includes("step")))
+    (type.includes('line') || (type.includes('area') && !type.includes('step')))
   ) {
     return (
       <React.Fragment>
@@ -37,7 +37,7 @@ const SettingsPoints = props => {
           <React.Fragment>
             <h4>Points size</h4>
             <Select
-              defaultValue={{ value: 2, label: "2px" }}
+              defaultValue={{ value: 2, label: '2px' }}
               value={pointsSize}
               onChange={e => props.selectPointsSize(e, settingsVisible)}
               options={pointsSizeOptions}