Code Cleanup: Enforce Linting Rules & Update 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,50 @@ 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
+				'document', // for IIFE with window & document params
+				'c2pFrame', // for mutable iframe c2p element
+				'trackerEl', // for trackers.forEach()
+				'categoryEl', // for categories.forEach()
+				'dataEntry', // for data.forEach()
+				'appEntry', // for apps.forEach()
+				'sEntry', // for apps.forEach()
+				'confMutable', // for mutable conf settings
+				'eventMutable', // for mutable event details objects
+			]
+		}],
 		'no-plusplus': [0],
-		'no-prototype-builtins': [0], // TODO: enable this check
-		'no-restricted-syntax': [0], // TODO: enable this check
+		'no-prototype-builtins': [0],
+		'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/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': [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': [1, {
 			order: [
 				"static-variables",
 				"instance-variables",
@@ -104,5 +117,8 @@ module.exports = {
 		'jsx-a11y/mouse-events-have-key-events': [0],
 		'jsx-a11y/no-noninteractive-element-interactions': [0],
 		'jsx-a11y/no-static-element-interactions': [0],
+		'jsx-a11y/label-has-associated-control': [0], //ToDo: enable this check. Throws 2 errors, should work.
+		'jsx-a11y/media-has-caption': [0], //ToDo: enable this check. Need Captions to enable.
+		'jsx-a11y/anchor-has-content': [0], //ToDo: enable this check. Need anchor text to enable.
 	},
 };

_locales/en/messages.json

@@ -704,6 +704,9 @@
 	"panel_detail_menu_premium_title": {
 		"message": "Premium"
 	},
+	"panel_detail_learn_more": {
+	  "message": "Learn More"
+	},
 	"panel_detail_history_title": {
 		"message": "History"
 	},

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/click_to_play.js

@@ -160,11 +160,11 @@ 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)) {
-							applyC2P(app_id, message[app_id].data, message[app_id].html);
-							delete message[app_id];
-						}
+					const messageKeys = Object.keys(message);
+					for (let i = 0; i < messageKeys.length; i++) {
+						const app_id = messageKeys[i];
+						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/content-scripts/utils/msg.js

@@ -13,8 +13,6 @@
 /**
  * @namespace ContentScriptUtils
  */
-/* eslint no-use-before-define: 0 */
-
 import { log } from '../../../src/utils/common';
 import { sendMessageInPromise as panelSendPromiseMessage, sendMessage as panelSendMessage } from '../../panel/utils/msg';
 

app/hub/Views/AppView/AppView.jsx

@@ -31,7 +31,8 @@ class AppView extends Component {
 	 * Lifecycle Event
 	 */
 	componentDidUpdate(prevProps) {
-		if (prevProps.children !== this.props.children) {
+		const { children } = this.props;
+		if (prevProps.children !== children) {
 			this.mainContent.current.scrollTop = 0;
 		}
 	}

app/hub/Views/AppView/AppViewContainer.jsx

@@ -25,7 +25,8 @@ class AppViewContainer extends Component {
 	 * Handle clicking to exit the Toast Message.
 	 */
 	_exitToast = () => {
-		this.props.actions.setToast({
+		const { actions } = this.props;
+		actions.setToast({
 			toastMessage: '',
 			toastClass: '',
 		});
@@ -36,11 +37,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/CreateAccountView.jsx

@@ -105,7 +105,7 @@ const CreateAccountView = (props) => {
 						/>
 						{confirmEmailError && (
 							<div className="CreateAccountView__inputError">
-								{t('your_emails_do_not_match')}
+								{t('your_email_do_not_match')}
 							</div>
 						)}
 					</div>