Linting improvements

.eslintrc

@@ -1,10 +1,12 @@
 {
   "parser": "babel-eslint",
+  "parserOptions": {
     "ecmaFeatures": {
       "jsx": true,
       "classes": true,
       "modules": true
     },
+  },
   "env": {
     "browser": true,
     "node": true
@@ -12,6 +14,12 @@
   "plugins": [
     "react"
   ],
+  "extends": "plugin:react/recommended",
+  "settings": {
+    "react": {
+      "pragma": "React"
+    }
+  },
   "rules": {
     "strict": 0,
     "no-underscore-dangle": 0,

package.json

@@ -57,12 +57,12 @@
     "babel-eslint": "*",
     "babel-jest": "*",
     "babel-loader": "*",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
+    "babel-preset-es2015": "*",
+    "babel-preset-react": "*",
+    "babel-preset-stage-0": "*",
     "css-loader": "^0.23.0",
-    "eslint": "2.0.0-beta.1",
-    "eslint-plugin-react": "^3.15.0",
+    "eslint": "2.2.0",
+    "eslint-plugin-react": "^4.0.0",
     "expose-loader": "^0.7.1",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.9.1",
@@ -82,7 +82,7 @@
     "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
-    "babel-polyfill": "^6.3.14",
+    "babel-polyfill": "*",
     "classnames": "^2.2.0",
     "coriolis-data": "cmmcleod/coriolis-data",
     "d3": "^3.5.9",

src/app/Coriolis.jsx

@@ -279,9 +279,10 @@ export default class Coriolis extends React.Component {
    * @return {React.Component} The main app
    */
   render() {
+    let currentMenu = this.state.currentMenu;
     return <div onClick={this._closeMenu}>
-      <Header appCacheUpdate={this.state.appCacheUpdate} currentMenu={this.state.currentMenu} />
-      { this.state.error ? this.state.error : this.state.page ? <this.state.page currentMenu={this.state.currentMenu} /> : <NotFoundPage/> }
+      <Header appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu} />
+      { this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) : <NotFoundPage/> }
       { this.state.modal }
       { this.state.tooltip }
     </div>;

src/app/components/Link.jsx

@@ -7,6 +7,12 @@ import { shallowEqual } from '../utils/UtilityFunctions';
  */
 export default class Link extends React.Component {
 
+  static propTypes = {
+    children: React.PropTypes.any,
+    href: React.PropTypes.string.isRequired,
+    onClick: React.PropTypes.func
+  };
+
   /**
    * Constructor
    * @param  {Object} props   React Component properties

src/app/components/ModalImport.jsx

@@ -522,7 +522,7 @@ export default class ModalImport extends TranslatedComponent {
       );
     }
 
-    return <div className='modal' onClick={ (e) => e.stopPropagation() } onClick={ (e) => e.stopPropagation() }>
+    return <div className='modal' onClick={ (e) => e.stopPropagation() }>
       <h2 >{translate('import')}</h2>
       {importStage}
       <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>

src/app/components/Slider.jsx

@@ -15,13 +15,15 @@ export default class Slider extends React.Component {
     scale: 1  // SVG render scale
   };
 
-  static PropTypes = {
+  static propTypes = {
     axis: React.PropTypes.bool,
     axisUnit: React.PropTypes.string,
-    min: React.PropTypes.number,
     max: React.PropTypes.number,
-    scale: React.PropTypes.number,
+    min: React.PropTypes.number,
     onChange: React.PropTypes.func.isRequired,
+    onResize: React.PropTypes.func,
+    percent: React.PropTypes.number.isRequired,
+    scale: React.PropTypes.number
   };
 
   /**

src/app/components/SvgIcons.jsx

@@ -7,6 +7,11 @@ import { shallowEqual } from '../utils/UtilityFunctions';
  */
 class SvgIcon extends React.Component {
 
+  static propTypes = {
+    className: React.PropTypes.any,
+    style: React.PropTypes.object
+  };
+
   /**
    * Only rerender an SVG Icon if properties have changed
    * @param  {Object} nextProps   Next/Incoming properties

src/app/pages/OutfittingPage.jsx

@@ -374,7 +374,9 @@ export default class OutfittingPage extends Page {
                     onResize={onWindowResize}
                   />
                 </td>
-                <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>{formats.f2(fuelLevel * fuelCapacity)}{units.T} {formats.pct1(fuelLevel)}</td>
+                <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
+                  {formats.f2(fuelLevel * fuelCapacity)}{units.T} {formats.pct1(fuelLevel)}
+                </td>
               </tr>
             </tbody>
           </table>

src/app/pages/ShipyardPage.jsx

@@ -27,13 +27,13 @@ function countInt(slot) {
   this.maxCargo += crEligible ? ModuleUtils.findInternal('cr', slot.maxClass, 'E').cargo : 0;
 }
 
-let cachedShipSummaries = null;
-
 /**
  * The Shipyard summary page
  */
 export default class ShipyardPage extends Page {
 
+  static cachedShipSummaries = null;
+
   /**
    * Constructor
    * @param  {Object} props   React Component properties
@@ -46,16 +46,15 @@ export default class ShipyardPage extends Page {
       shipPredicate: 'name',
       shipDesc: true
     };
-    this.context = context;
 
-    if (!cachedShipSummaries) {
-      cachedShipSummaries = [];
+    if (!ShipyardPage.cachedShipSummaries) {
+      ShipyardPage.cachedShipSummaries = [];
       for (let s in Ships) {
-        cachedShipSummaries.push(this._shipSummary(s, Ships[s]));
+        ShipyardPage.cachedShipSummaries.push(this._shipSummary(s, Ships[s]));
       }
     }
 
-    this.shipSummaries = cachedShipSummaries;
+    this.shipSummaries = ShipyardPage.cachedShipSummaries;
   }
 
   /**
@@ -218,23 +217,22 @@ export default class ShipyardPage extends Page {
                 <th rowSpan={2} className='sortable' onClick={sortShips('retailCost')}>{translate('cost')}</th>
               </tr>
               <tr>
-                {/*  Base */}
                 <th className='sortable lft' onClick={sortShips('speed')}>{translate('speed')}</th>
                 <th className='sortable' onClick={sortShips('boost')}>{translate('boost')}</th>
                 <th className='sortable' onClick={sortShips('baseArmour')}>{translate('armour')}</th>
                 <th className='sortable' onClick={sortShips('baseShieldStrength')}>{translate('shields')}</th>
-                {/*  Max */}
+
                 <th className='sortable lft' onClick={sortShips('topSpeed')}>{translate('speed')}</th>
                 <th className='sortable' onClick={sortShips('topBoost')}>{translate('boost')}</th>
                 <th className='sortable' onClick={sortShips('maxJumpRange')}>{translate('jump')}</th>
                 <th className='sortable' onClick={sortShips('maxCargo')}>{translate('cargo')}</th>
-                {/*  Hardpoints */}
+
                 <th className='sortable lft' onClick={sortShips('hp',1)}>{translate('S')}</th>
                 <th className='sortable' onClick={sortShips('hp', 2)}>{translate('M')}</th>
                 <th className='sortable' onClick={sortShips('hp', 3)}>{translate('L')}</th>
                 <th className='sortable' onClick={sortShips('hp', 4)}>{translate('H')}</th>
                 <th className='sortable' onClick={sortShips('hp', 0)}>{translate('U')}</th>
-                {/*  Internal */}
+
                 <th className='sortable lft' onClick={sortShips('int', 0)} >1</th>
                 <th className='sortable' onClick={sortShips('int', 1)} >2</th>
                 <th className='sortable' onClick={sortShips('int', 2)} >3</th>