Update Linter & Remove Unsafe React Lifecycle Events

.eslintrc.js

@@ -40,7 +40,7 @@ module.exports = {
 	rules: {
 		'arrow-parens': [2, 'as-needed', { 'requireForBlockBody': true }],
 		'camelcase': [0],
-		'class-methods-use-this': [0],
+		'class-methods-use-this': [1],
 		'comma-dangle': [2, {
 			'arrays': 'only-multiline',
 			'objects': 'only-multiline',
@@ -54,37 +54,43 @@ module.exports = {
 		'lines-between-class-members': [1],
 		'max-len': [0],
 		'newline-per-chained-call': [0, { 'ignoreChainWithDepth': 2 }],
-		'no-mixed-operators': [0],
+		'no-mixed-operators': [1],
 		'no-nested-ternary': [0],
-		'no-param-reassign': [0], // TODO: enable this check
+		'no-param-reassign': ['error', {
+			props: true,
+			ignorePropertyModificationsFor: [
+				'acc', // for reduce accumulators
+				'trackerEl', // for trackers.forEach()
+				'categoryEl' // for categories.forEach()
+			]
+		}],
 		'no-plusplus': [0],
-		'no-prototype-builtins': [0], // TODO: enable this check
-		'no-restricted-syntax': [0], // TODO: enable this check
+		'no-prototype-builtins': [1],
+		'no-restricted-syntax': [1],
 		'no-tabs': [0],
 		'no-underscore-dangle': [0],
 		'no-unused-vars': [1],
 		'no-useless-escape': [1],
 		'operator-linebreak': [0],
-		'prefer-object-spread': [0], // TODO: enable this check
+		'prefer-object-spread': [1],
 		'space-before-function-paren': [2, 'never'],
-		'template-curly-spacing': [0],
 
 		// Plugin: Import
 		'import/no-cycle': [0],
-		'import/prefer-default-export': [0],
+		'import/prefer-default-export': [1],
 
 		// Plugin: React
 		'react/destructuring-assignment': [0],
 		'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': [0], // TODO: enable this check
-		'react/no-access-state-in-setstate': [0], // TODO: enable this check
+		'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'],
-		'react/sort-comp': [2, {
+		'react/sort-comp': [0, { //TODO: enable this check
 			order: [
 				"static-variables",
 				"instance-variables",

app/Account/AccountReducer.js

@@ -39,61 +39,62 @@ export default (state = initialState, action) => {
 		case UPDATE_PANEL_DATA: {
 			const { account } = action.data;
 			if (account === null) {
-				return Object.assign({}, initialState);
+				return { ...initialState };
 			}
 			const {
 				userID, user, userSettings, subscriptionData
 			} = account;
-			return Object.assign({}, state, {
+			return {
+				...state,
 				loggedIn: true,
 				userID,
 				user,
 				userSettings,
-				subscriptionData,
-			});
+				subscriptionData
+			};
 		}
 		case REGISTER_SUCCESS:
 		case LOGIN_SUCCESS: {
-			return Object.assign({}, state, {
-				loggedIn: true,
-			});
+			return { ...state, loggedIn: true };
 		}
 		case LOGOUT_SUCCESS: {
-			return Object.assign({}, initialState);
+			return { ...initialState };
 		}
 		case GET_USER_SUCCESS: {
 			const { user } = action.payload;
-			return Object.assign({}, state, {
+			return {
+				...state,
 				loggedIn: true,
 				user
-			});
+			};
 		}
 		case GET_USER_SETTINGS_SUCCESS: {
 			const { settings } = action.payload;
-			return Object.assign({}, state, {
+			return {
+				...state,
 				loggedIn: true,
 				userSettings: settings
-			});
+			};
 		}
 		case GET_USER_SUBSCRIPTION_DATA_FAIL: {
 			const { subscriptionData } = initialState;
-			return Object.assign({}, state, {
-				subscriptionData,
-			});
+			return { ...state, subscriptionData };
 		}
 		case GET_USER_SUBSCRIPTION_DATA_SUCCESS: {
 			const { subscriptionData } = action.payload;
-			return Object.assign({}, state, {
+			return {
+				...state,
 				loggedIn: true,
 				subscriptionData
-			});
+			};
 		}
 		case RESET_PASSWORD_SUCCESS: {
 			const toastMessage = t('banner_check_your_email_title');
-			return Object.assign({}, state, {
+			return {
+				...state,
 				toastMessage,
 				resetPasswordError: false
-			});
+			};
 		}
 		case RESET_PASSWORD_FAIL: {
 			const { errors } = action.payload;
@@ -108,10 +109,11 @@ export default (state = initialState, action) => {
 						errorText = t('server_error_message');
 				}
 			});
-			return Object.assign({}, state, {
+			return {
+				...state,
 				toastMessage: errorText,
 				resetPasswordError: true
-			});
+			};
 		}
 
 		default: return state;

app/content-scripts/blocked_redirect.js

@@ -40,7 +40,8 @@ const { sendMessage, sendMessageInPromise } = msg;
 	 * but another one, down the chain of redirects - is. It is loaded
 	 * by app/blocked_redirect.html when we navigate browser to it.
 	 */
-	(function BlockedRedirectContentScript(window, document) {
+	(function BlockedRedirectContentScript(window, doc) {
+		const document = doc;
 		/**
 		 * Calculate window height.
 		 * @memberof BlockedRedirectContentScript

app/content-scripts/click_to_play.js

@@ -57,11 +57,12 @@ const Click2PlayContentScript = (function(win, doc) {
 	 * @memberof Click2PlayContentScript
 	 * @package
 	 *
-	 * @param  	{Object} c2pFrame 		iframe DOM element
+	 * @param  	{Object} c2pFrameEl 		iframe DOM element
 	 * @param 	{Object} c2pAppDef 		replacement data
 	 * @param 	{string} html 			a fragment of html to be used in replacement.
 	 */
-	const buildC2P = function(c2pFrame, c2pAppDef, html) {
+	const buildC2P = function(c2pFrameEl, c2pAppDef, html) {
+		const c2pFrame = c2pFrameEl;
 		c2pFrame.addEventListener('load', () => {
 			const idoc = c2pFrame.contentDocument;
 			idoc.documentElement.innerHTML = html;
@@ -160,8 +161,10 @@ const Click2PlayContentScript = (function(win, doc) {
 			if (name === 'c2p') {
 				if (message) {
 					// Dequeue C2P data stored while the script injection was taking place
-					for (const app_id in message) {
-						if (message.hasOwnProperty(app_id)) {
+					const messageKeys = Object.keys(message);
+					for (let i = 0; i < messageKeys.length; i++) {
+						const app_id = messageKeys[i];
+						if (Object.prototype.hasOwnProperty.call(message, app_id)) {
 							applyC2P(app_id, message[app_id].data, message[app_id].html);
 							delete message[app_id];
 						}

app/content-scripts/page_performance.js

@@ -27,7 +27,8 @@ const { sendMessage } = msg;
  * Use to call init to initialize functionality
  * @var  {Object} initialized to an object with init method as its property
  */
-const PageInfo = (function(window, document) {
+const PageInfo = (function(window, doc) {
+	const document = doc;
 	let state = document.readyState;
 	/**
 	 * Calculate page domain and latency. Send pageInfo to background.js.

app/hub/Views/AppView/AppViewContainer.jsx

@@ -36,11 +36,13 @@ class AppViewContainer extends Component {
 	 * @return {JSX} JSX for rendering the Home View of the Hub app
 	 */
 	render() {
-		const childProps = {
-			...this.props,
-			exitToast: this._exitToast,
-		};
-		return <AppView {...childProps} />;
+		const { app, children } = this.props;
+
+		return (
+			<AppView app={app} exitToast={this._exitToast}>
+				{children}
+			</AppView>
+		);
 	}
 }
 

app/hub/Views/AppView/AppViewReducer.js

@@ -19,12 +19,13 @@ function AppViewReducer(state = initialState, action) {
 	switch (action.type) {
 		case SET_TOAST: {
 			const { toastMessage, toastClass } = action.data;
-			return Object.assign({}, state, {
-				app: Object.assign({}, {
+			return {
+				...state,
+				app: {
 					toastMessage,
 					toastClass
-				}),
-			});
+				}
+			};
 		}
 		default: return state;
 	}

app/hub/Views/AppView/index.js

@@ -23,7 +23,7 @@ import AppViewReducer from './AppViewReducer';
  * @return {function}        this function returns a plain object, which will be merged into the component's props
  * @memberof HubContainers
  */
-const mapStateToProps = state => Object.assign({}, state.app);
+const mapStateToProps = state => ({ ...state.app });
 
 /**
  * Bind the component's action creators using Redux's bindActionCreators.
@@ -32,7 +32,7 @@ const mapStateToProps = state => Object.assign({}, state.app);
  * @memberof SetupContainers
  */
 const mapDispatchToProps = dispatch => ({
-	actions: bindActionCreators(Object.assign({}, { setToast }), dispatch),
+	actions: bindActionCreators({ setToast }, dispatch),
 });
 
 export const reducer = AppViewReducer;

app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx

@@ -172,30 +172,26 @@ class CreateAccountViewContainer extends Component {
 			passwordInvalidError,
 			passwordLengthError,
 		} = this.state;
-		const createAccountChildProps = {
-			email,
-			emailError,
-			confirmEmail,
-			confirmEmailError,
-			firstName,
-			lastName,
-			legalConsentChecked,
-			legalConsentNotCheckedError,
-			password,
-			passwordInvalidError,
-			passwordLengthError,
-			handleInputChange: this._handleInputChange,
-			handleLegalConsentCheckboxChange: this._handleLegalConsentCheckboxChange,
-			handleSubmit: this._handleCreateAccountAttempt
-		};
-		const signedInChildProps = {
-			email: user && user.email || email,
-		};
 
 		return loggedIn ? (
-			<SignedInView {...signedInChildProps} />
+			<SignedInView email={(user && user.email) || email} />
 		) : (
-			<CreateAccountView {...createAccountChildProps} />
+			<CreateAccountView
+				email={email}
+				emailError={emailError}
+				confirmEmail={confirmEmail}
+				confirmEmailError={confirmEmailError}
+				firstName={firstName}
+				lastName={lastName}
+				legalConsentChecked={legalConsentChecked}
+				legalConsentNotCheckedError={legalConsentNotCheckedError}
+				password={password}
+				passwordInvalidError={passwordInvalidError}
+				passwordLengthError={passwordLengthError}
+				handleInputChange={this._handleInputChange}
+				handleLegalConsentCheckboxChange={this._handleLegalConsentCheckboxChange}
+				handleSubmit={this._handleCreateAccountAttempt}
+			/>
 		);
 	}
 }

app/hub/Views/CreateAccountView/index.js

@@ -24,7 +24,7 @@ import { setToast } from '../AppView/AppViewActions';
  * @return {function}        this function returns a plain object, which will be merged into the component's props
  * @memberof HubContainers
  */
-const mapStateToProps = state => Object.assign({}, state.account);
+const mapStateToProps = state => ({ ...state.account });
 
 /**
  * Bind the component's action creators using Redux's bindActionCreators.
@@ -33,11 +33,11 @@ const mapStateToProps = state => Object.assign({}, state.account);
  * @memberof SetupContainers
  */
 const mapDispatchToProps = dispatch => ({
-	actions: bindActionCreators(Object.assign({}, {
+	actions: bindActionCreators({
 		setToast,
 		register,
-		getUser,
-	}), dispatch),
+		getUser
+	}, dispatch),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(CreateAccountViewContainer);

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -117,22 +117,13 @@ class HomeViewContainer extends Component {
 	_render() {
 		const { justInstalled } = this.state;
 		const { home, user } = this.props;
-		const isPlus = user && user.subscriptionsPlus || false;
+		const isPlus = (user && user.subscriptionsPlus) || false;
 		const {
 			premium_promo_modal_shown,
 			setup_complete,
 			tutorial_complete,
 			enable_metrics,
 		} = home;
-		const childProps = {
-			justInstalled,
-			setup_complete,
-			tutorial_complete,
-			enable_metrics,
-			changeMetrics: this._handleToggleMetrics,
-			email: user ? user.email : '',
-			isPlus,
-		};
 
 		const showPromoModal = !premium_promo_modal_shown && !this._premiumSubscriber();
 
@@ -147,7 +138,15 @@ class HomeViewContainer extends Component {
 					handleGetPlusClick={this._handleGetPlusClick}
 					handleTryMidnightClick={this._handleTryMidnightClick}
 				/>
-				<HomeView {...childProps} />
+				<HomeView
+					justInstalled={justInstalled}
+					setup_complete={setup_complete}
+					tutorial_complete={tutorial_complete}
+					enable_metrics={enable_metrics}
+					changeMetrics={this._handleToggleMetrics}
+					email={user ? user.email : ''}
+					isPlus={isPlus}
+				/>
 			</div>
 		);
 	}