Update dependency eslint-plugin-react to v7

.eslintrc-calypso.js

@@ -0,0 +1,57 @@
+/** @format */
+
+const reactVersion = require( './package.json' ).dependencies.react;
+
+module.exports = {
+	root: true,
+	extends: [
+		'wpcalypso/react',
+		'plugin:jsx-a11y/recommended',
+		// 'prettier',
+		// 'prettier/react',
+	],
+	parser: 'babel-eslint',
+	env: {
+		browser: true,
+		mocha: true,
+		node: true,
+		jquery: true
+	},
+	plugins: [ 'jsx-a11y', 'lodash' ],
+	settings: {
+		react: {
+			version: reactVersion,
+		},
+	},
+	rules: {
+		// REST API objects include underscores
+		camelcase: 0,
+
+		// TODO: shorten all long lines
+		'max-len': 0,
+
+		// i18n-calypso translate triggers false failures
+		'jsx-a11y/anchor-has-content': 0,
+
+		'wpcalypso/jsx-classname-namespace': 0,
+		// enforce our classname namespacing rules
+		// 'wpcalypso/jsx-classname-namespace': [
+		// 	2,
+		// 	{
+		// 		rootFiles: [ 'index.js', 'index.jsx', 'main.js', 'main.jsx' ],
+		// 	},
+		// ],
+
+		// Force folks to use our custom combineReducers function instead of the plain redux one
+		// This allows us to control serialization for every reducer.
+		'wpcalypso/import-no-redux-combine-reducers': 2,
+
+		// No applicable in Jetpack
+		'wpcalypso/import-no-redux-combine-reducers': 0,
+
+		// TODO: migrate to ES6 Classes
+		'react/prefer-es6-class': 0,
+
+		'jsx-a11y/no-static-element-interactions': 0,
+	},
+};

.eslintrc.js

@@ -61,7 +61,7 @@ module.exports = {
 		"react/no-did-mount-set-state": 2,
 		"react/no-did-update-set-state": 2,
 		"react/no-is-mounted": 2,
-		"react/prefer-es6-class": 1,
+		"react/prefer-es6-class": 0,
 		"semi": 2,
 		"semi-spacing": 2,
 		"space-before-blocks": [ 2, "always" ],

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

@@ -47,6 +47,10 @@ const renderPairs = layout => layout.map( item => (
 ) );
 
 class AtAGlance extends Component {
+	trackSecurityClick() {
+		analytics.tracks.recordJetpackClick( 'aag_manage_security_wpcom' );
+	}
+
 	render() {
 		const settingsProps = {
 			updateOptions: this.props.updateOptions,
@@ -57,7 +61,6 @@ class AtAGlance extends Component {
 			siteAdminUrl: this.props.siteAdminUrl,
 			siteRawUrl: this.props.siteRawUrl
 		};
-		const trackSecurityClick = () => analytics.tracks.recordJetpackClick( 'aag_manage_security_wpcom' );
 		const securityHeader = <DashSectionHeader
 					label={ __( 'Security' ) }
 					settingsPath={ this.props.userCanManageModules ? '#security' : undefined }
@@ -69,7 +72,7 @@ class AtAGlance extends Component {
 						? ''
 						: '#security'
 					}
-					externalLinkClick={ trackSecurityClick }
+					externalLinkClick={ this.trackSecurityClick }
 				/>;
 		const connections = (
 				<div>

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

@@ -20,6 +20,18 @@ class DashMonitor extends Component {
 		isModuleAvailable: PropTypes.bool.isRequired,
 	};
 
+	activateAndTrack() {
+		analytics.tracks.recordEvent(
+			'jetpack_wpa_module_toggle',
+			{
+				module: 'monitor',
+				toggled: 'on'
+			}
+		);
+
+		this.props.updateOptions( { monitor: true } );
+	}
+
 	getContent() {
 		const labelName = __( 'Downtime monitoring' );
 
@@ -28,18 +40,6 @@ class DashMonitor extends Component {
 			link: 'https://jetpack.com/support/monitor/',
 		};
 
-		const activateAndTrack = () => {
-			analytics.tracks.recordEvent(
-				'jetpack_wpa_module_toggle',
-				{
-					module: 'monitor',
-					toggled: 'on'
-				}
-			);
-
-			this.props.updateOptions( { monitor: true } );
-		};
-
 		if ( this.props.getOptionValue( 'monitor' ) ) {
 			return (
 				<DashItem
@@ -65,7 +65,7 @@ class DashMonitor extends Component {
 						this.props.isDevMode ? __( 'Unavailable in Dev Mode.' )
 							: __( '{{a}}Activate Monitor{{/a}} to receive email notifications if your site goes down.', {
 								components: {
-									a: <a href="javascript:void(0)" onClick={ activateAndTrack } />
+									a: <a href="javascript:void(0)" onClick={ this.activateAndTrack } />
 								}
 							}
 						)

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

@@ -19,10 +19,12 @@ class DashPhoton extends Component {
 		isModuleAvailable: PropTypes.bool.isRequired,
 	};
 
-	getContent() {
-		const labelName = __( 'Image Performance' ),
-			activatePhoton = () => this.props.updateOptions( { photon: true } );
+	activatePhoton() {
+		this.props.updateOptions( { photon: true } );
+	}
 
+	getContent() {
+		const labelName = __( 'Image Performance' );
 		const support = {
 			text: __( 'Jetpack will optimize your images and serve them from the server location nearest to your visitors. Using our global content delivery network will boost the loading speed of your site.' ),
 			link: 'https://jetpack.com/support/photon/',
@@ -51,7 +53,7 @@ class DashPhoton extends Component {
 						this.props.isDevMode ? __( 'Unavailable in Dev Mode' )
 							: __( '{{a}}Activate{{/a}} to enhance the performance and speed of your images.', {
 								components: {
-									a: <a href="javascript:void(0)" onClick={ activatePhoton } />
+									a: <a href="javascript:void(0)" onClick={ this.activatePhoton } />
 								}
 							}
 						)

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

@@ -22,12 +22,15 @@ class DashProtect extends Component {
 		isModuleAvailable: PropTypes.bool.isRequired,
 	};
 
+	activateProtect() {
+		this.props.updateOptions( { protect: true } );
+	}
+
 	getContent() {
 		const support = {
 			text: __( 'Protects your site from traditional and distributed brute force login attacks.' ),
 			link: 'https://jetpack.com/support/protect/',
 		};
-		const activateProtect = () => this.props.updateOptions( { protect: true } );
 
 		if ( this.props.getOptionValue( 'protect' ) ) {
 			const protectCount = this.props.protectCount;
@@ -72,7 +75,7 @@ class DashProtect extends Component {
 					this.props.isDevMode ? __( 'Unavailable in Dev Mode' )
 						: __( '{{a}}Activate Protect{{/a}} to keep your site protected from malicious sign in attempts.', {
 							components: {
-								a: <a href="javascript:void(0)" onClick={ activateProtect } />
+								a: <a href="javascript:void(0)" onClick={ this.activateProtect } />
 							}
 						}
 					)

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

@@ -55,9 +55,12 @@ class DashSearch extends Component {
 		isDevMode: false,
 	};
 
+	activateSearch() {
+		this.props.updateOptions( { search: true } );
+	}
+
 	render() {
-		const hasPro = ( 'is-business-plan' === this.props.planClass ),
-			activateSearch = () => this.props.updateOptions( { search: true } );
+		const hasPro = ( 'is-business-plan' === this.props.planClass );
 
 		if ( this.props.isDevMode ) {
 			return renderCard( {
@@ -111,7 +114,7 @@ class DashSearch extends Component {
 			pro_inactive: false,
 			content: __( '{{a}}Activate{{/a}} to replace the WordPress built-in search with Jetpack Search, an advanced search experience.', {
 				components: {
-					a: <a href="javascript:void(0)" onClick={ activateSearch } />
+					a: <a href="javascript:void(0)" onClick={ this.activateSearch } />
 				}
 			} )
 		} );

_inc/client/at-a-glance/stats/dash-stats-bottom.jsx

@@ -41,10 +41,16 @@ class DashStatsBottom extends Component {
 		];
 	}
 
+	trackViewDetailedStats() {
+		analytics.tracks.recordJetpackClick( 'view_detailed_stats' );
+	}
+
+	trackViewWpcomStats() {
+		analytics.tracks.recordJetpackClick( 'view_wpcom_stats' );
+	}
+
 	render() {
 		const s = this.statsBottom()[ 0 ];
-		const trackViewDetailedStats = () => analytics.tracks.recordJetpackClick( 'view_detailed_stats' ),
-			trackViewWpcomStats = () => analytics.tracks.recordJetpackClick( 'view_wpcom_stats' );
 
 		return (
 		<div>
@@ -102,7 +108,7 @@ class DashStatsBottom extends Component {
 						components: {
 							button:
 								<Button
-									onClick={ trackViewDetailedStats }
+									onClick={ this.trackViewDetailedStats }
 									href={ this.props.siteAdminUrl + 'admin.php?page=stats' }
 								/>
 						}
@@ -113,7 +119,7 @@ class DashStatsBottom extends Component {
 								components: {
 									button:
 										<Button
-											onClick={ trackViewWpcomStats }
+											onClick={ this.trackViewWpcomStats }
 											className="is-primary"
 											href={ 'https://wordpress.com/stats/insights/' + this.props.siteRawUrl }
 										/>

_inc/client/at-a-glance/stats/index.jsx

@@ -142,11 +142,12 @@ export class DashStats extends Component {
 		);
 	}
 
+	dismissCard() {
+		this.setState( { emptyStatsDismissed: true } );
+		this.props.updateOptions( { dismiss_empty_stats_card: true } );
+	}
+
 	renderEmptyStatsCard() {
-		const dismissCard = () => {
-			this.setState( { emptyStatsDismissed: true } );
-			this.props.updateOptions( { dismiss_empty_stats_card: true } );
-		};
 		return (
 			<Card className="jp-at-a-glance__stats-empty">
 				<img src={ imagePath + 'stats-people.svg' } width="272" height="144" alt={ __( 'Jetpack Stats People' ) } className="jp-at-a-glance__stats-icon" />
@@ -156,7 +157,7 @@ export class DashStats extends Component {
 					{ __( 'Just give us a little time to collect data so we can display it for you here.' ) }
 				</p>
 				<Button
-					onClick={ dismissCard }
+					onClick={ this.dismissCard }
 					primary
 				>
 					{ __( 'Okay, got it!' ) }
@@ -165,9 +166,11 @@ export class DashStats extends Component {
 		);
 	}
 
-	renderStatsArea() {
-		const activateStats = () => this.props.updateOptions( { stats: true } );
+	activateStats() {
+		this.props.updateOptions( { stats: true } );
+	}
 
+	renderStatsArea() {
 		if ( this.props.getOptionValue( 'stats' ) ) {
 			if ( this.statsErrors() ) {
 				return (
@@ -207,7 +210,7 @@ export class DashStats extends Component {
 						this.props.isDevMode ? __( 'Unavailable in Dev Mode' )
 							: __( '{{a}}Activate Site Stats{{/a}} to see detailed stats, likes, followers, subscribers, and more! {{a1}}Learn More{{/a1}}', {
 								components: {
-									a: <a href="javascript:void(0)" onClick={ activateStats } />,
+									a: <a href="javascript:void(0)" onClick={ this.activateStats } />,
 									a1: <a href="https://jetpack.com/support/wordpress-com-stats/" target="_blank" rel="noopener noreferrer" />
 								}
 							} )
@@ -217,7 +220,7 @@ export class DashStats extends Component {
 					! this.props.isDevMode && (
 						<div className="jp-at-a-glance__stats-inactive-button">
 							<Button
-								onClick={ activateStats }
+								onClick={ this.activateStats }
 								primary
 							>
 								{ __( 'Activate Site Stats' ) }
@@ -229,44 +232,40 @@ export class DashStats extends Component {
 		);
 	}
 
+	switchViewTo( dateRange ) {
+		analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: dateRange } );
+		this.props.switchView( dateRange );
+		this.props.fetchStatsData( dateRange );
+	}
+
 	maybeShowStatsTabs() {
 		const statsChart = this.statsChart( this.props.activeTab );
 
 		if ( false === statsChart.totalViews && ! this.props.isEmptyStatsCardDismissed && ! this.state.emptyStatsDismissed ) {
 			return false;
 		}
 
-		const switchToDay = () => {
-				analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: 'day' } );
-				this.props.switchView( 'day' );
-				this.props.fetchStatsData( 'day' );
-			},
-			switchToWeek = () => {
-				analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: 'week' } );
-				this.props.switchView( 'week' );
-				this.props.fetchStatsData( 'week' );
-			},
-			switchToMonth = () => {
-				analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: 'month' } );
-				this.props.switchView( 'month' );
-				this.props.fetchStatsData( 'month' );
-			};
-
 		if ( this.props.getOptionValue( 'stats' ) && ! this.statsErrors() ) {
 			return (
 				<ul className="jp-at-a-glance__stats-views">
 					<li tabIndex="0" className="jp-at-a-glance__stats-view">
-						<a href="javascript:void(0)" onClick={ switchToDay }
+						<a
+							href="javascript:void(0)"
+							onClick={ () => this.switchViewTo( 'day' ) } // eslint-disable-line react/jsx-no-bind
 							className={ this.getClass( 'day' ) }
 						>{ __( 'Days' ) }</a>
 					</li>
 					<li tabIndex="0" className="jp-at-a-glance__stats-view">
-						<a href="javascript:void(0)" onClick={ switchToWeek }
+						<a
+							href="javascript:void(0)"
+							onClick={ () => this.switchViewTo( 'week' ) } // eslint-disable-line react/jsx-no-bind
 							className={ this.getClass( 'week' ) }
 						>{ __( 'Weeks' ) }</a>
 					</li>
 					<li tabIndex="0" className="jp-at-a-glance__stats-view">
-						<a href="javascript:void(0)" onClick={ switchToMonth }
+						<a
+							href="javascript:void(0)"
+							onClick={ () => this.switchViewTo( 'month' ) } // eslint-disable-line react/jsx-no-bind
 							className={ this.getClass( 'month' ) }
 						>{ __( 'Months' ) }</a>
 					</li>

_inc/client/components/chart/index.jsx

@@ -48,7 +48,7 @@ export default class ModuleChart extends React.Component {
 		window.removeEventListener( 'resize', this.resize );
 	}
 
-	componentWillReceiveProps( nextProps ) {
+	UNSAFE_componentWillReceiveProps( nextProps ) {
 		if ( this.props.loading && ! nextProps.loading ) {
 			this.resize();
 		}

_inc/client/components/chart/legend.jsx

@@ -33,7 +33,7 @@ const LegendItem = createReactClass( {
 		return (
 			<li className="dops-chart__legend-option">
 				<label htmlFor="checkbox" className="dops-chart__legend-label is-selectable" onClick={ this.clickHandler } >
-					<input type="checkbox" className="dops-chart__legend-checkbox" checked={ this.props.checked } onChange={ function() {} } />
+					<input type="checkbox" className="dops-chart__legend-checkbox" checked={ this.props.checked } />
 					<span className={ this.props.className }></span>{ this.props.label }
 				</label>
 			</li>

_inc/client/components/chart/x-axis.jsx

@@ -38,7 +38,7 @@ export default class ModuleChartXAxis extends React.Component {
 		window.removeEventListener( 'resize', this.resizeThrottled );
 	}
 
-	componentWillReceiveProps( nextProps ) {
+	UNSAFE_componentWillReceiveProps( nextProps ) {
 		this.resize( nextProps );
 	}