Admin Page: Fix all eslint warnings except those related to React ES6 classes

.eslintrc

@@ -54,7 +54,7 @@
 		"quote-props": [ 1, "as-needed", { "keywords": true } ],
 		"quotes": [ 1, "single", "avoid-escape" ],
 		"react/jsx-curly-spacing": [ 1, "always" ],
-		"react/jsx-no-bind": 1,
+		"react/jsx-no-bind": 0,
 		"react/jsx-space-before-closing": 1,
 		"react/no-danger": 1,
 		"react/no-did-mount-set-state": 1,

_inc/client/admin.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { Route, Router, useRouterHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
-import { createHashHistory } from 'history'
+import { createHashHistory } from 'history';
 import assign from 'lodash/assign';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -70,18 +70,18 @@ function render() {
 		<div>
 			<Provider store={ store }>
 				<Router history={ history }>
-					<Route path='/' name={ i18n.translate( 'At A Glance', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/jumpstart' component={ Main } />
-					<Route path='/dashboard' name={ i18n.translate( 'At A Glance' ) } component={ Main } />
-					<Route path='/plans' name={ i18n.translate( 'Plans', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/settings' name={ i18n.translate( 'Settings', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/discussion' name={ i18n.translate( 'Discussion', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/security' name={ i18n.translate( 'Security', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/traffic' name={ i18n.translate( 'Traffic', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/writing' name={ i18n.translate( 'Writing', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/sharing' name={ i18n.translate( 'Sharing', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/wpbody-content' component={ Main } />
-					<Route path='/wp-toolbar' component={ Main } />
+					<Route path="/" name={ i18n.translate( 'At A Glance', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/jumpstart" component={ Main } />
+					<Route path="/dashboard" name={ i18n.translate( 'At A Glance' ) } component={ Main } />
+					<Route path="/plans" name={ i18n.translate( 'Plans', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/settings" name={ i18n.translate( 'Settings', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/discussion" name={ i18n.translate( 'Discussion', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/security" name={ i18n.translate( 'Security', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/traffic" name={ i18n.translate( 'Traffic', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/writing" name={ i18n.translate( 'Writing', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/sharing" name={ i18n.translate( 'Sharing', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/wpbody-content" component={ Main } />
+					<Route path="/wp-toolbar" component={ Main } />
 					<Route path="*" component={ Main } />
 				</Router>
 			</Provider>

_inc/client/at-a-glance/monitor.jsx

@@ -27,7 +27,7 @@ class DashMonitor extends Component {
 				}
 			);
 
-			this.props.updateOptions( { 'monitor': true } );
+			this.props.updateOptions( { monitor: true } );
 		};
 
 		if ( this.props.getOptionValue( 'monitor' ) ) {

_inc/client/at-a-glance/photon.jsx

@@ -17,7 +17,7 @@ import { isDevMode } from 'state/connection';
 class DashPhoton extends Component {
 	getContent() {
 		const labelName = __( 'Image Performance' ),
-			activatePhoton = () => this.props.updateOptions( { 'photon': true } );
+			activatePhoton = () => this.props.updateOptions( { photon: true } );
 
 		if ( this.props.getOptionValue( 'photon' ) ) {
 			return (

_inc/client/at-a-glance/protect.jsx

@@ -18,7 +18,7 @@ import { isDevMode } from 'state/connection';
 
 class DashProtect extends Component {
 	getContent() {
-		const activateProtect = () => this.props.updateOptions( { 'protect': true } );
+		const activateProtect = () => this.props.updateOptions( { protect: true } );
 
 		if ( this.props.getOptionValue( 'protect' ) ) {
 			const protectCount = this.props.protectCount;

_inc/client/components/admin-notices/index.jsx

@@ -16,8 +16,12 @@ class AdminNotices extends React.Component {
 				$notice.wrapInner( '<span class="dops-notice__content">' );
 				$notice.find( '.dops-notice__content' ).before( icon ).css( 'display', 'block' );
 				$notice.find( '.dops-notice__content' ).after( dismiss );
-				$notice.find( 'h2' ).replaceWith( function() { return jQuery( '<strong />', { html: this.innerHTML } ); } );
-				$notice.find( 'p' ).replaceWith( function() { return jQuery( '<div/>', { html: this.innerHTML } ); } );
+				$notice.find( 'h2' ).replaceWith( function() {
+					return jQuery( '<strong />', { html: this.innerHTML } );
+				} );
+				$notice.find( 'p' ).replaceWith( function() {
+					return jQuery( '<div/>', { html: this.innerHTML } );
+				} );
 				$notice.prependTo( $adminNotices ).css( 'display', 'flex' );
 			} );
 		}
@@ -34,8 +38,12 @@ class AdminNotices extends React.Component {
 				$notice.wrapInner( '<span class="dops-notice__content">' );
 				$notice.find( '.dops-notice__content' ).before( icon );
 				$notice.find( '.vp-message' ).removeClass( 'vp-message' ).addClass( 'dops-notice__text' );
-				$notice.find( 'h3' ).replaceWith( function() { return jQuery( '<strong />', { html: this.innerHTML } ); } );
-				$notice.find( 'p' ).replaceWith( function() { return jQuery( '<div/>', { html: this.innerHTML } ); } );
+				$notice.find( 'h3' ).replaceWith( function() {
+					return jQuery( '<strong />', { html: this.innerHTML } );
+				} );
+				$notice.find( 'p' ).replaceWith( function() {
+					return jQuery( '<div/>', { html: this.innerHTML } );
+				} );
 				$notice.find( 'a[href*="admin.php?page=vaultpress"]' ).remove();
 				$notice.prependTo( $adminNotices ).css( 'display', 'flex' );
 			} );
@@ -48,7 +56,9 @@ class AdminNotices extends React.Component {
 				$notice.find( '.button-primary' ).addClass( 'dops-notice__action' ).removeClass( 'button-primary' ).detach().appendTo( $notice );
 				$notice.find( 'p' ).not( '.submit' ).wrapAll( '<span class="dops-notice__text"/>' );
 				const $dopsNotice = $notice.find( '.dops-notice__text' );
-				$dopsNotice.find( 'p' ).replaceWith( function() { return jQuery( '<div/>', { html: this.innerHTML, 'class': 'dops-notice__moved_text' } ); } );
+				$dopsNotice.find( 'p' ).replaceWith( function() {
+					return jQuery( '<div/>', { html: this.innerHTML, 'class': 'dops-notice__moved_text' } );
+				} );
 				$dopsNotice.find( 'br' ).remove();
 				$notice.find( '.button-secondary' ).removeClass( 'button-secondary' ).detach().appendTo( $dopsNotice );
 				$notice.find( '.submit' ).remove();

_inc/client/components/button-group/docs/example.jsx

@@ -3,18 +3,18 @@
 /**
 * External dependencies
 */
-var React = require( 'react' ),
+const React = require( 'react' ),
 	PureRenderMixin = require( 'react-pure-render/mixin' );
 
 /**
  * Internal dependencies
  */
-var ButtonGroup = require( 'components/button-group' ),
+const ButtonGroup = require( 'components/button-group' ),
 	Button = require( 'components/button' ),
 	Card = require( 'components/card' ),
 	Gridicon = require( 'components/gridicon' );
 
-var Buttons = React.createClass( {
+const Buttons = React.createClass( {
 	displayName: 'ButtonGroup',
 
 	mixins: [ PureRenderMixin ],

_inc/client/components/button/index.jsx

@@ -35,7 +35,7 @@ export default React.createClass( {
 
 	render() {
 		const element = this.props.href ? 'a' : 'button';
-		let { primary, compact, scary, borderless, className, ...props } = this.props;
+		const { primary, compact, scary, borderless, className, ...props } = this.props;
 
 		const buttonClasses = classNames( {
 			'dops-button': true,

_inc/client/components/card/compact.jsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-var React = require( 'react' ),
+const React = require( 'react' ),
 	assign = require( 'lodash/assign' ),
 	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
  */
-var Card = require( 'components/card' );
+const Card = require( 'components/card' );
 
 module.exports = React.createClass( {
 	displayName: 'CompactCard',

_inc/client/components/card/index.jsx

@@ -1,21 +1,26 @@
+/**
+ * External dependencies
+ */
 const PropTypes = require( 'prop-types' );
-var React = require( 'react' ),
-	Gridicon = require( '../gridicon' ),
-	classnames = require( 'classnames' );
-
+const React = require( 'react' );
+const classnames = require( 'classnames' );
 import assign from 'lodash/assign';
 import omit from 'lodash/omit';
+/**
+ * Internal dependencies
+ */
+const Gridicon = require( '../gridicon' );
 
 require( './style.scss' );
 
-let CardSection = React.createClass( {
+const CardSection = React.createClass( {
 
 	propTypes: {
 		title: PropTypes.any,
 		vertical: PropTypes.any,
 		style: PropTypes.object,
 		className: PropTypes.string,
-		device: PropTypes.oneOf( ['desktop', 'tablet', 'phone'] )
+		device: PropTypes.oneOf( [ 'desktop', 'tablet', 'phone' ] )
 	},
 
 	getDefaultProps: function() {
@@ -24,21 +29,21 @@ let CardSection = React.createClass( {
 
 	render: function() {
 		return (
-			<div className={classnames( 'dops-card-section', this.props.className )} style={this.props.style}>
-				{this.props.title ?
-					this._renderWithTitle() :
-					this.props.children
+			<div className={ classnames( 'dops-card-section', this.props.className ) } style={ this.props.style }>
+				{this.props.title
+					? this._renderWithTitle()
+					: this.props.children
 				}
 			</div>
 		);
 	},
 
 	_renderWithTitle: function() {
-		var orientation = this.props.vertical ? 'vertical' : 'horizontal';
-		var wrapperClassName = 'dops-card-section-orient-' + orientation;
+		const orientation = this.props.vertical ? 'vertical' : 'horizontal';
+		const wrapperClassName = 'dops-card-section-orient-' + orientation;
 
 		return (
-			<div className={wrapperClassName}>
+			<div className={ wrapperClassName }>
 				<h4 ref="label" className="dops-card-section-label">
 					{this.props.title}
 				</h4>
@@ -50,7 +55,7 @@ let CardSection = React.createClass( {
 	}
 } );
 
-let CardFooter = React.createClass( {
+const CardFooter = React.createClass( {
 
 	render: function() {
 		return (
@@ -61,7 +66,7 @@ let CardFooter = React.createClass( {
 	}
 } );
 
-let Card = React.createClass( {
+const Card = React.createClass( {
 
 	propTypes: {
 		meta: PropTypes.any,
@@ -127,8 +132,8 @@ let Card = React.createClass( {
 
 	_renderIcon: function() {
 		return (
-			<span className="dops-card-icon" style={{ color: this.props.iconColor }}>
-				{ this.props.icon && <Gridicon icon={ this.props.icon } style={{ backgroundColor: this.props.iconColor }}/>}
+			<span className="dops-card-icon" style={ { color: this.props.iconColor } }>
+				{ this.props.icon && <Gridicon icon={ this.props.icon } style={ { backgroundColor: this.props.iconColor } } />}
 				{ this.props.iconLabel }
 			</span>
 		);

_inc/client/components/chart/bar-container.jsx

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-var PropTypes = require( 'prop-types' );
-var React = require( 'react' );
+const PropTypes = require( 'prop-types' );
+const React = require( 'react' );
 
 /**
  * Internal dependencies
  */
-var Bar = require( './bar' ),
+const Bar = require( './bar' ),
 	XAxis = require( './x-axis' );
 
 module.exports = React.createClass( {
@@ -22,14 +22,12 @@ module.exports = React.createClass( {
 	},
 
 	buildBars: function( max ) {
-		var bars,
-			numberBars = this.props.data.length,
-			tooltipPosition = 'bottom right',
+		const numberBars = this.props.data.length,
 			width = this.props.chartWidth,
 			barWidth = ( width / numberBars );
-
-		bars = this.props.data.map( function ( item, index ) {
-			var barOffset = barWidth * ( index + 1 );
+		let tooltipPosition = 'bottom right';
+		const bars = this.props.data.map( function( item, index ) {
+			const barOffset = barWidth * ( index + 1 );
 
 			if (
 					( ( barOffset + 230 ) > width ) &&