Address PR comments

.eslintrc.js

@@ -40,7 +40,6 @@ module.exports = {
 	rules: {
 		'arrow-parens': [2, 'as-needed', { 'requireForBlockBody': true }],
 		'camelcase': [0],
-		'class-methods-use-this': [1],
 		'comma-dangle': [2, {
 			'arrays': 'only-multiline',
 			'objects': 'only-multiline',
@@ -54,7 +53,6 @@ module.exports = {
 		'lines-between-class-members': [1],
 		'max-len': [0],
 		'newline-per-chained-call': [0, { 'ignoreChainWithDepth': 2 }],
-		'no-mixed-operators': [1],
 		'no-nested-ternary': [0],
 		'no-param-reassign': ['error', {
 			props: true,
@@ -72,28 +70,22 @@ module.exports = {
 			]
 		}],
 		'no-plusplus': [0],
-		'no-prototype-builtins': [0],
-		'no-restricted-syntax': [1],
+		'no-prototype-builtins': [0], // Ignored because of hasOwnProperty calls.
 		'no-tabs': [0],
 		'no-underscore-dangle': [0],
 		'no-unused-vars': [1],
 		'no-useless-escape': [1],
 		'operator-linebreak': [0],
-		'prefer-object-spread': [1],
 		'space-before-function-paren': [2, 'never'],
 
 		// Plugin: Import
 		'import/no-cycle': [0],
-		'import/prefer-default-export': [1],
 
 		// Plugin: React
-		'react/destructuring-assignment': [1],
 		'react/static-property-placement': [0],
 		'react/jsx-curly-newline': [0],
 		'react/jsx-indent': [1, 'tab'],
 		'react/jsx-indent-props': [1, 'tab'],
-		'react/jsx-props-no-spreading': [1],
-		'react/no-access-state-in-setstate': [1],
 		'react/no-danger': [0],
 		'react/prop-types': [0],
 		'react/jsx-fragments': [1, 'element'],

app/panel-android/components/Panel.jsx

@@ -148,8 +148,7 @@ export default class Panel extends React.Component {
 	}
 
 	render() {
-		const { panel } = this.props;
-		const { cliqzModuleData } = this.state;
+		const { panel, cliqzModuleData } = this.state;
 		return (
 			<div>
 				<div className={`chart-wrapper ${this.siteProps.isPaused ? 'paused' : ''}`}>

app/panel-android/components/content/ChartSVG.jsx

@@ -24,14 +24,13 @@ export default class ChartSVG extends React.Component {
 	}
 
 	increaseN = () => {
-		const { paths } = this.props;
-		const { nItem } = this.state;
-		let currentN = nItem;
-		if (currentN < paths.length) {
-			this.setState({
-				nItem: currentN += 1,
-			});
-		}
+		this.setState(prevState => {
+			const { paths } = this.props;
+			if (prevState.nItem < paths.length) {
+				return { nItem: prevState.nItem + 1 };
+			}
+			return null;
+		});
 	}
 
 	render() {

app/panel-android/components/content/DotsMenu.jsx

@@ -43,12 +43,7 @@ export default class DotsMenu extends React.Component {
 
 	/* Toggle menu */
 	dotsButtonClicked = () => {
-		const { opening } = this.state;
-		const currentState = opening;
-
-		this.setState({
-			opening: !currentState,
-		});
+		this.setState(prevState => ({ opening: !prevState.opening }));
 	}
 
 	render() {

app/panel-android/components/content/FixedMenu.jsx

@@ -79,14 +79,10 @@ export default class FixedMenu extends React.Component {
 	}
 
 	toggleMenu = () => {
-		const { open } = this.state;
-		const currentState = open;
-		this.setState({
-			open: !currentState,
-		});
+		this.setState(prevState => ({ open: !prevState.open }));
 	}
 
-	updateHeadeText = (text) => {
+	updateHeaderText = (text) => {
 		const textToShow = text || FixedMenu.defaultHeaderText;
 
 		this.setState({
@@ -106,7 +102,7 @@ export default class FixedMenu extends React.Component {
 					<li className="menuItem">
 						<MenuItem
 							active={panel.enable_anti_tracking}
-							updateHeadeText={this.updateHeadeText}
+							updateHeaderText={this.updateHeaderText}
 							type="anti_tracking"
 							title="Enhanced Anti-Tracking"
 							numData={this.getCount('enable_anti_tracking')}
@@ -117,7 +113,7 @@ export default class FixedMenu extends React.Component {
 					<li className="menuItem">
 						<MenuItem
 							active={panel.enable_ad_block}
-							updateHeadeText={this.updateHeadeText}
+							updateHeaderText={this.updateHeaderText}
 							type="ad_block"
 							title="Enhanced Ad Blocking"
 							numData={this.getCount('enable_ad_block')}
@@ -128,7 +124,7 @@ export default class FixedMenu extends React.Component {
 					<li className="menuItem">
 						<MenuItem
 							active={panel.enable_smart_block}
-							updateHeadeText={this.updateHeadeText}
+							updateHeaderText={this.updateHeaderText}
 							type="smart_block"
 							title="Smart Blocking"
 							numData={this.getCount('enable_smart_block')}

app/panel-android/components/content/MenuItem.jsx

@@ -24,21 +24,21 @@ export default class MenuItem extends React.Component {
 	}
 
 	menuItemClicked = () => {
-		const { updateHeadeText, title } = this.props;
+		const { updateHeaderText, title } = this.props;
 		this.setState({
 			opening: true,
 		});
 
-		updateHeadeText(title);
+		updateHeaderText(title);
 	}
 
 	closeButtonClicked = () => {
-		const { updateHeadeText } = this.props;
+		const { updateHeaderText } = this.props;
 		this.setState({
 			opening: false,
 		});
 
-		updateHeadeText('');
+		updateHeaderText('');
 	}
 
 	switcherClicked = () => {

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -153,7 +153,7 @@ class DonutGraph extends React.Component {
 			return;
 		}
 
-		// componentWillReceiveProps gets called many times during page load as new trackers or unsafe data points are found
+		// componentDidUpdate gets called many times during page load as new trackers or unsafe data points are found
 		// so only compare tracker totals if we don't already have to redraw anyway as a result of the cheaper checks above
 		const prevTrackerTotal = prevCategories.reduce((total, category) => total + category.num_total, 0);
 		const trackerTotal = categories.reduce((total, category) => total + category.num_total, 0);

app/panel/components/Settings/TrustAndRestrict.jsx

@@ -184,8 +184,6 @@ class TrustAndRestrict extends React.Component {
 		const {
 			menu, trustedValue, currentWarning, restrictedValue
 		} = this.state;
-		const trusted_sites = site_whitelist;
-		const restricted_sites = site_blacklist;
 		return (
 			<div className="s-trust-restrict-panel s-tabs-panel">
 				<div className="row">
@@ -212,8 +210,8 @@ class TrustAndRestrict extends React.Component {
 							<div className={`${currentWarning ? '' : 's-invisible '}s-callout`}>{currentWarning}</div>
 						</div>
 					</div>
-					{ trusted_sites && trusted_sites.length > 0 &&
-						<Sites sites={trusted_sites} listType="whitelist" updateSitePolicy={actions.updateSitePolicy} />
+					{ site_whitelist && site_whitelist.length > 0 &&
+						<Sites sites={site_whitelist} listType="whitelist" updateSitePolicy={actions.updateSitePolicy} />
 					}
 				</div>
 				<div className={`${menu.showRestrictedSites ? '' : 's-hide '}s-sites-pane`}>
@@ -227,8 +225,8 @@ class TrustAndRestrict extends React.Component {
 							<div className={`${currentWarning ? '' : 's-invisible '}s-callout`}>{currentWarning}</div>
 						</div>
 					</div>
-					{ restricted_sites && restricted_sites.length > 0 &&
-						<Sites sites={restricted_sites} listType="blacklist" updateSitePolicy={actions.updateSitePolicy} />
+					{ site_blacklist && site_blacklist.length > 0 &&
+						<Sites sites={site_blacklist} listType="blacklist" updateSitePolicy={actions.updateSitePolicy} />
 					}
 				</div>
 			</div>

app/panel/components/Summary.jsx

@@ -82,7 +82,7 @@ class Summary extends React.Component {
 	}
 
 	/**
-	 * Calculates total tracker latency and sets it to state
+	 * Calculates total tracker latency
 	 * @param {Object} props Summary's props, either this.props or nextProps.
 	 */
 	static _computeTrackerLatency(props) {