style(*) manually fix code base according to new eslint rules

src/bootstrap.js

@@ -1,15 +1,15 @@
-global.Promise = global.Promise || require('es6-promise').Promise;
-
 import 'array-includes/shim';
 
 import React from 'react';
 import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader'; // will go away in 'production' mode
 import { hashHistory } from 'react-router';
 
-import routes from './routes.js';
+import routes from './routes';
 import Root from './components/Root/Root';
 
+global.Promise = global.Promise || require('es6-promise').Promise;
+
 const renderApp = (appRoutes, history) => {
   render(
     <AppContainer>

src/components/CountriesChartPanel/CountriesChartPanel.js

@@ -21,8 +21,7 @@ export default class CountriesChartPanel extends React.Component {
     ]),
     defaultSelectedCountries: React.PropTypes.array,
     // injected by injectWindowInfos
-    windowWidth: React.PropTypes.number,
-    windowHeight: React.PropTypes.number
+    windowWidth: React.PropTypes.number
   }
 
   constructor({ defaultSelectedCountries = ['Algeria', 'Ethiopia', 'France', 'Germany', 'India'] }) {

src/components/Footer/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import TwitterButton from './../TwitterButton/TwitterButton.js';
+import TwitterButton from './../TwitterButton/TwitterButton';
 
 const Footer = () => (
   <footer className="footer container">

src/components/Header/Header.js

@@ -31,7 +31,7 @@ export default class Header extends React.Component {
 
     return (
       <div>
-        <nav className="navbar navbar-default" role="navigation">
+        <nav className="navbar navbar-default">
           <div className="container-fluid">
             <div className="navbar-header">
               <button type="button" onClick={this.handleClick} className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

src/components/LifeExpectancy/LifeExpectancy.js

@@ -76,7 +76,7 @@ class LifeExpectancy extends React.Component {
       <div>
         <h2>{title}</h2>
         {!ready && !error && <p>Loading ...</p>}
-        {!ready && error && <div className="alert alert-danger" onClick={this.loadData} style={{ cursor: 'pointer' }}>
+        {!ready && error && <div className="alert alert-danger" onClick={this.loadData} style={{ cursor: 'pointer' }} role="button" tabIndex={0}>
           <span className="glyphicon glyphicon-exclamation-sign" />
           {' '}An error occured while loading data - Click here to retry
         </div>}

src/components/Navigator/injectNavigator.js

@@ -1,4 +1,10 @@
-/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/no-multi-comp, react/prop-types */
+
+import React from 'react';
+import { Link } from 'react-router';
+import { Link as ScrollLink, Element as ScrollElement, animateScroll } from 'react-scroll';
+
+import { getDisplayName } from '../../utils/helpers';
 
 export const defaultLinks = [
   '/d3/transition-multi-line-chart',
@@ -12,12 +18,6 @@ export const defaultLinks = [
   '/d3act/mixed-chart'
 ];
 
-import React from 'react';
-import { Link } from 'react-router';
-import { getDisplayName } from '../../utils/helpers';
-
-import { Link as ScrollLink, Element as ScrollElement, animateScroll } from 'react-scroll';
-
 const getPrevNextLinks = (location, links = defaultLinks) => {
   const currentPath = location.pathname;
   const prevNextLinks = {};
@@ -66,7 +66,7 @@ const navigator = (links) => WrappedComponent => {
           {prevNext({ prev, next, middle: <ScrollLink to="bottom-links" smooth style={{ cursor: 'pointer', fontSize: '80%' }}>Description <span className="glyphicon glyphicon-menu-down" aria-hidden="true" /></ScrollLink> })}
           <WrappedComponent {...props} />
           <ScrollElement name="bottom-links">
-            {prevNext({ prev, next, middle: <a onClick={() => animateScroll.scrollToTop()} style={{ cursor: 'pointer', fontSize: '80%' }}>Back to top <span className="glyphicon glyphicon-menu-up" aria-hidden="true" /></a> })}
+            {prevNext({ prev, next, middle: <a onClick={() => animateScroll.scrollToTop()} style={{ cursor: 'pointer', fontSize: '80%' }} role="button" tabIndex={0}>Back to top <span className="glyphicon glyphicon-menu-up" aria-hidden="true" /></a> })}
           </ScrollElement>
         </div>
       );

src/components/ReactFauxDom/StaticMultiLineChart/StaticMultiLineChart.js

@@ -34,10 +34,6 @@ export default class StaticMultiLineChart extends React.Component {
     height: 400
   }
 
-  constructor() {
-    super();
-  }
-
   drawLineChart() {
     const { margin, width: widthIncludingMargins, height: heightIncludingMargins, data, minX, maxX, minY, maxY } = this.props;
     console.log('margin', margin, minX, maxX, minY, maxY, 'data', data);

src/components/ReactFauxDom/__tests__/StaticMultiLineChart.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import StaticMultiLineChart from '../StaticMultiLineChart/StaticMultiLineChart';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
+
+import StaticMultiLineChart from '../StaticMultiLineChart/StaticMultiLineChart';
 import { mockDataLifeExpectancy } from '../../../test/jestHelpers';
 
 describe('components/ReactFauxDom/StaticMultiLineChart', () => {

src/components/Root/Root.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prefer-stateless-function */
+
 import React, { Component, PropTypes } from 'react';
 import { Router } from 'react-router';
 

src/components/Select/ColoredMultiSelect.js

@@ -1,11 +1,10 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react';
-
-import { Select as OriginalSelect } from './Select.js';
-
 import ColorHash from 'color-hash';
 
+import { Select as OriginalSelect } from './Select';
+
 const colorHash = new ColorHash();
 
 const valueRenderer = (option) => (<span style={{

src/components/Slider/Slider.js

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/label-has-for */
+
 import React from 'react';
 
 export default class Slider extends React.Component {
@@ -31,6 +33,12 @@ export default class Slider extends React.Component {
       value: props.defaultValue,
       playing: props.playing
     };
+    this.updateValue = this.updateValue.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.run = this.run.bind(this);
+    this.play = this.play.bind(this);
+    this.pause = this.pause.bind(this);
+    this.handleClickPlay = this.handleClickPlay.bind(this);
   }
 
   componentDidMount() {
@@ -77,7 +85,7 @@ export default class Slider extends React.Component {
       next = min;
     }
     this.updateValue(next);
-    this.timer = setTimeout(this.play.bind(this), playingInterval);
+    this.timer = setTimeout(this.play, playingInterval);
   }
 
   pause() {
@@ -103,15 +111,15 @@ export default class Slider extends React.Component {
           max={max}
           step={step}
           value={this.state.value}
-          onChange={this.handleChange.bind(this)}
+          onChange={this.handleChange}
           style={{
             width: '200px',
             display: 'inline',
             verticalAlign: 'middle',
             marginLeft: '10px'
           }}
         />
-        {showPlayButton ? <button className="btn btn-default" style={{ display: 'inline-block', marginLeft: '10px' }} onClick={this.handleClickPlay.bind(this)}>{this.state.playing ? 'Pause' : 'Play'}</button> : null}
+        {showPlayButton ? <button className="btn btn-default" style={{ display: 'inline-block', marginLeft: '10px' }} onClick={this.handleClickPlay}>{this.state.playing ? 'Pause' : 'Play'}</button> : null}
       </div>
     );
   }

src/components/TwitterButton/TwitterButton.js

@@ -7,18 +7,15 @@ import React from 'react';
  * @todo make a more generic version
  * @note : <a href="https://twitter.com/share" className="twitter-share-button" data-text="Simple #reactjs #es6 project using Github API" data-via="topheman" data-size="large" data-count="none" data-url="https://topheman.github.io/react-es6/">Tweet</a>
  */
-export default class TwitterButton extends React.Component {
-  render() {
-    return (
-      <iframe
-        width="78px"
-        height="28px"
-        title="Twitter Tweet Button"
-        style={{ border: 0, overflow: 'hidden' }}
-        scrolling="no"
-        ref="iframe"
-        src="https://platform.twitter.com/widgets/tweet_button.html?count=none&dnt=false&lang=en&original_referer=http%3A%2F%2Ftopheman.github.io%2Fd3-react-experiments&size=l&text=Mix%20%23d3%20with%20%23react%20-%20an%20experiment%20on%20%23datavisualization&type=share&url=https%3A%2F%2Ftopheman.github.io%2Fd3-react-experiments%2F&via=topheman"
-      />
-    );
-  }
+export default function TwitterButton() {
+  return (
+    <iframe
+      width="78px"
+      height="28px"
+      title="Twitter Tweet Button"
+      style={{ border: 0, overflow: 'hidden' }}
+      scrolling="no"
+      src="https://platform.twitter.com/widgets/tweet_button.html?count=none&dnt=false&lang=en&original_referer=http%3A%2F%2Ftopheman.github.io%2Fd3-react-experiments&size=l&text=Mix%20%23d3%20with%20%23react%20-%20an%20experiment%20on%20%23datavisualization&type=share&url=https%3A%2F%2Ftopheman.github.io%2Fd3-react-experiments%2F&via=topheman"
+    />
+  );
 }

src/components/d3/StaticMultiLineChart/StaticMultiLineChart.js

@@ -33,10 +33,6 @@ export default class StaticMultiLineChart extends React.Component {
     height: 400
   }
 
-  constructor() {
-    super();
-  }
-
   /**
    * This example is a reuse of some plain code from an example on https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f
    * Since the render method contains .append() invocations, I remove any child of the root node at each render

src/components/d3/TransitionMultiLineChart/TransitionMultiLineChart.js

@@ -19,7 +19,7 @@ export default class TransitionMultiLineChart extends React.Component {
     data: React.PropTypes.object.isRequired,
     minX: React.PropTypes.number,
     maxX: React.PropTypes.number,
-    minY: React.PropTypes.number,
+    minY: React.PropTypes.number, // eslint-disable-line react/no-unused-prop-types
     maxY: React.PropTypes.number
   }
 

src/components/d3/__tests__/StaticMultiLineChart.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import StaticMultiLineChart from '../StaticMultiLineChart/StaticMultiLineChart';
 import { mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
+
+import StaticMultiLineChart from '../StaticMultiLineChart/StaticMultiLineChart';
 import { mockDataLifeExpectancy } from '../../../test/jestHelpers';
 
 describe('components/d3/StaticMultiLineChart', () => {

src/components/d3/__tests__/TransitionMultiLineChart.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import TransitionMultiLineChart from '../TransitionMultiLineChart/TransitionMultiLineChart';
 import { mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
+
+import TransitionMultiLineChart from '../TransitionMultiLineChart/TransitionMultiLineChart';
 import { mockDataLifeExpectancy } from '../../../test/jestHelpers';
 
 describe('components/d3/StaticMultiLineChart', () => {

src/components/d3act/BarChartPanel/BarChartPanel.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import Chart from 'd3act';
 
 import ViewSourceOnGithub from '../../ViewSourceOnGithub/ViewSourceOnGithub';
-import Chart from 'd3act';
 
 export default class d3actBarChartPanel extends React.Component {
 

src/components/d3act/MixedChartPanel/MixedChartPanel.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import Chart from 'd3act';
 
 import ViewSourceOnGithub from '../../ViewSourceOnGithub/ViewSourceOnGithub';
-import Chart from 'd3act';
 
 export default class d3actPieChartPanel extends React.Component {
 

src/components/recharts/TransitionMultiLineChart/TransitionMultiLineChart.js

@@ -36,6 +36,10 @@ const renderTooltip = ({ payload: [{ payload: infos } = {}], label }) => {
     </div>
   );
 };
+renderTooltip.propTypes = {
+  payload: React.PropTypes.array,
+  label: React.PropTypes.string
+};
 
 const TransitionMultiLineChart = ({ data, width, height, minX, maxX, maxY }) => {
   const rechartsData = prepareDataForRecharts(data);
@@ -62,13 +66,13 @@ const TransitionMultiLineChart = ({ data, width, height, minX, maxX, maxY }) =>
 };
 
 TransitionMultiLineChart.propTypes = {
-  margin: React.PropTypes.object,
+  margin: React.PropTypes.object, // eslint-disable-line react/no-unused-prop-types
   width: React.PropTypes.number,
   height: React.PropTypes.number,
   data: React.PropTypes.object.isRequired,
   minX: React.PropTypes.number,
   maxX: React.PropTypes.number,
-  minY: React.PropTypes.number,
+  minY: React.PropTypes.number, // eslint-disable-line react/no-unused-prop-types
   maxY: React.PropTypes.number
 };
 

src/components/recharts/__tests__/TransitionMultiLineChart.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import TransitionMultiLineChart from '../TransitionMultiLineChart/TransitionMultiLineChart';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
+
+import TransitionMultiLineChart from '../TransitionMultiLineChart/TransitionMultiLineChart';
 import { mockDataLifeExpectancy } from '../../../test/jestHelpers';
 
 describe('components/recharts/TransitionMultiLineChart', () => {

src/components/victory/CountNpmDownloadsChart/CountNpmDownloadsChart.js

@@ -76,7 +76,7 @@ class CountNpmDownloadsChart extends React.Component {
 
   static propTypes = {
     style: React.PropTypes.object,
-    margin: React.PropTypes.object,
+    margin: React.PropTypes.object, // eslint-disable-line react/no-unused-prop-types
     width: React.PropTypes.number,
     main: React.PropTypes.object.isRequired,
     dependencies: React.PropTypes.array.isRequired,
@@ -217,9 +217,9 @@ class CountNpmDownloadsChart extends React.Component {
               </span>
             </p>
             <ul className="list-unstyled list-inline">
-              {processedData.dependencies.lines.map((line, index) => (
+              {processedData.dependencies.lines.map((line) => (
                 <li
-                  key={index}
+                  key={line.label.name}
                   title={line.label.name}
                   style={{
                     cursor: 'pointer',
@@ -364,9 +364,9 @@ class CountNpmDownloadsChart extends React.Component {
                           ...this.getUserEvents(processedData.main.line.label.name)
                         } }]}
                   />
-                  {processedData.dependencies.lines.map((line, index) => (
+                  {processedData.dependencies.lines.map((line) => (
                     <VictoryLine
-                      key={index}
+                      key={line.label.name}
                       data={line.data}
                       domain={{
                         x: [minX, maxX],

src/components/victory/TransitionMultiLineChart/TransitionMultiLineChart.js

@@ -79,7 +79,7 @@ TransitionMultiLineChart.propTypes = {
   data: React.PropTypes.object.isRequired,
   minX: React.PropTypes.number,
   maxX: React.PropTypes.number,
-  minY: React.PropTypes.number,
+  minY: React.PropTypes.number, // eslint-disable-line react/no-unused-prop-types
   maxY: React.PropTypes.number
 };
 

src/components/victory/WorldPopulationByAgeRange/WorldPopulationByAgeRange.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { VictoryBar, VictoryPie } from 'victory';
 
 import ViewSourceOnGithub from '../../ViewSourceOnGithub/ViewSourceOnGithub';
 import Slider from '../../Slider/Slider';
-import { VictoryBar, VictoryPie } from 'victory';
 
 export default class WorldPopulation extends React.Component {
 
@@ -27,6 +27,9 @@ export default class WorldPopulation extends React.Component {
     this.state = {
       ...this.defaultValues
     };
+    this.updateYear = this.updateYear.bind(this);
+    this.updateYearPlayingInterval = this.updateYearPlayingInterval.bind(this);
+    this.updateInnerRadius = this.updateInnerRadius.bind(this);
   }
 
   updateYear(year) {
@@ -62,13 +65,13 @@ export default class WorldPopulation extends React.Component {
         <div className="panel-body text-center">
           <div className="row">
             <div className="col-md-8">
-              <Slider min={2010} max={2034} step={1} defaultValue={this.defaultValues.year} label="Year: %value" update={this.updateYear.bind(this)} showPlayButton playing playingInterval={this.state.yearPlayingInterval} />
-              <Slider min={20} max={2000} step={10} defaultValue={1000} label="Refresh: 1/%valuems" update={this.updateYearPlayingInterval.bind(this)} />
-              <Slider min={0} max={80} step={1} defaultValue={this.defaultValues.innerRadius} label="InnerRadius: %valuepx" update={this.updateInnerRadius.bind(this)} />
+              <Slider min={2010} max={2034} step={1} defaultValue={this.defaultValues.year} label="Year: %value" update={this.updateYear} showPlayButton playing playingInterval={this.state.yearPlayingInterval} />
+              <Slider min={20} max={2000} step={10} defaultValue={1000} label="Refresh: 1/%valuems" update={this.updateYearPlayingInterval} />
+              <Slider min={0} max={80} step={1} defaultValue={this.defaultValues.innerRadius} label="InnerRadius: %valuepx" update={this.updateInnerRadius} />
             </div>
             <div className="col-md-4" style={{ paddingTop: '20px' }}>
-              {labelColorConfig.map((info, index) => (
-                <span key={index} style={{ padding: '0px 5px' }}>
+              {labelColorConfig.map((info) => (
+                <span key={info.label} style={{ padding: '0px 5px' }}>
                   <span className="glyphicon glyphicon-stop" style={{ color: info.fill }} /> {info.label}
                 </span>
               ))}

src/components/victory/__tests__/TransitionMultiLineChart.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import TransitionMultiLineChart from '../TransitionMultiLineChart/TransitionMultiLineChart';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
+
+import TransitionMultiLineChart from '../TransitionMultiLineChart/TransitionMultiLineChart';
 import { mockDataLifeExpectancy } from '../../../test/jestHelpers';
 
 describe('components/victory/TransitionMultiLineChart', () => {