add linting for react/destructuring-assignment and fix errors. ToDo: …

…test code and check for errors

.eslintrc.js

@@ -80,7 +80,7 @@ module.exports = {
 		'import/prefer-default-export': [1],
 
 		// Plugin: React
-		'react/destructuring-assignment': [0], // ToDo
+		'react/destructuring-assignment': [1],
 		'react/static-property-placement': [0],
 		'react/jsx-curly-newline': [0],
 		'react/jsx-indent': [1, 'tab'],

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: '',
 		});

app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx

@@ -45,7 +45,8 @@ class CreateAccountViewContainer extends Component {
 			validateInput: false,
 		};
 
-		this.props.actions.setToast({
+		const { actions } = this.props;
+		actions.setToast({
 			toastMessage: '',
 			toastClass: '',
 		});
@@ -59,7 +60,8 @@ class CreateAccountViewContainer extends Component {
 		const { name, value } = event.target;
 		this.setState({ [name]: value });
 
-		if (!this.state.validateInput) {
+		const { validateInput } = this.state;
+		if (!validateInput) {
 			return;
 		}
 
@@ -132,20 +134,21 @@ class CreateAccountViewContainer extends Component {
 		if (!emailIsValid || !confirmIsValid || !legalConsentChecked || !passwordIsValid) {
 			return;
 		}
-		this.props.actions.setToast({
+		const { actions, history } = this.props;
+		actions.setToast({
 			toastMessage: '',
 			toastClass: ''
 		});
-		this.props.actions.register(email, confirmEmail, firstName, lastName, password).then((success) => {
+		actions.register(email, confirmEmail, firstName, lastName, password).then((success) => {
 			if (success) {
-				this.props.actions.getUser();
-				this.props.actions.setToast({
+				actions.getUser();
+				actions.setToast({
 					toastMessage: t('hub_create_account_toast_success'),
 					toastClass: 'success'
 				});
-				this.props.history.push('/');
+				history.push('/');
 			} else {
-				this.props.actions.setToast({
+				actions.setToast({
 					toastMessage: t('hub_create_account_toast_error'),
 					toastClass: 'alert'
 				});

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -56,8 +56,9 @@ class HomeViewContainer extends Component {
 	 * Function to handle toggling Metrics Opt-In
 	 */
 	_handleToggleMetrics = () => {
-		const enable_metrics = !this.props.home.enable_metrics;
-		this.props.actions.setMetrics({ enable_metrics });
+		const { actions, home } = this.props;
+		const enable_metrics = !home.enable_metrics;
+		actions.setMetrics({ enable_metrics });
 	}
 
 	/**
@@ -68,7 +69,8 @@ class HomeViewContainer extends Component {
 	_handlePremiumPromoModalClick = (type = 'basic') => {
 		// GH-1777
 		// we want to show the promo modal exactly once per Hub visit
-		this.props.actions.markPremiumPromoModalShown();
+		const { actions } = this.props;
+		actions.markPremiumPromoModalShown();
 
 		sendMessage('SET_PREMIUM_PROMO_MODAL_SEEN', {});
 

app/hub/Views/LogInView/LogInViewContainer.jsx

@@ -32,7 +32,8 @@ class LogInViewContainer extends Component {
 			validateInput: false,
 		};
 
-		this.props.actions.setToast({
+		const { actions } = this.props;
+		actions.setToast({
 			toastMessage: '',
 			toastClass: '',
 		});
@@ -46,7 +47,8 @@ class LogInViewContainer extends Component {
 		const { name, value } = event.target;
 		this.setState({ [name]: value });
 
-		if (!this.state.validateInput) {
+		const { validateInput } = this.state;
+		if (!validateInput) {
 			return;
 		}
 
@@ -87,28 +89,29 @@ class LogInViewContainer extends Component {
 			return;
 		}
 
-		this.props.actions.setToast({
+		const { actions, history } = this.props;
+		actions.setToast({
 			toastMessage: '',
 			toastClass: ''
 		});
-		this.props.actions.login(email, password).then((success) => {
+		actions.login(email, password).then((success) => {
 			if (success) {
 				const { origin, pathname, hash } = window.location;
 				window.history.pushState({}, '', `${origin}${pathname}${hash}`);
 
-				this.props.actions.getUser();
-				this.props.actions.getUserSettings()
+				actions.getUser();
+				actions.getUserSettings()
 					.then((settings) => {
 						const { current_theme } = settings;
-						return this.props.actions.getTheme(current_theme);
+						return actions.getTheme(current_theme);
 					});
-				this.props.actions.setToast({
+				actions.setToast({
 					toastMessage: t('hub_login_toast_success'),
 					toastClass: 'success'
 				});
-				this.props.history.push('/');
+				history.push('/');
 			} else {
-				this.props.actions.setToast({
+				actions.setToast({
 					toastMessage: t('no_such_email_password_combo'),
 					toastClass: 'alert'
 				});

app/hub/Views/PlusView/PlusViewContainer.jsx

@@ -35,17 +35,19 @@ class PlusViewContainer extends Component {
 	 * Sends the necessary ping to background
 	 */
 	_sendPlusPing = () => {
-		this.props.actions.sendPing({ type: 'plus_cta_hub' });
+		const { actions } = this.props;
+		actions.sendPing({ type: 'plus_cta_hub' });
 	}
 
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Plus View of the Hub app
 	 */
 	render() {
+		const { user } = this.props;
 		return (
 			<PlusView
-				isPlus={(this.props.user && this.props.user.subscriptionsPlus) || false}
+				isPlus={(user && user.subscriptionsPlus) || false}
 				onPlusClick={this._sendPlusPing}
 			/>
 		);

app/hub/Views/ProductsView/ProductsView.jsx

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
  * @return {JSX} JSX for rendering the Products View
  * @memberof HubComponents
  */
-const ProductsView = props => (
+const ProductsView = ({ onAndroidClick, onIosClick, onLiteClick }) => (
 	<div className="ProductsView">
 		<div className="ProductsView--rowPaddingTop row small-up-1 large-up-2 align-center-middle">
 			<div className="columns text-center">
@@ -44,13 +44,13 @@ const ProductsView = props => (
 					{t('hub_products_main_promo_description')}
 				</div>
 				<div className="ProductsView__storeImageContainer">
-					<a href="https://itunes.apple.com/us/app/ghostery-privacy-browser/id472789016?mt=8" onClick={props.onIosClick} target="_blank" rel="noopener noreferrer">
+					<a href="https://itunes.apple.com/us/app/ghostery-privacy-browser/id472789016?mt=8" onClick={onIosClick} target="_blank" rel="noopener noreferrer">
 						<img
 							className="ProductsView__imageAppStoreIos"
 							src="/app/images/hub/products/app_store_badge_us.svg"
 						/>
 					</a>
-					<a href="https://play.google.com/store/apps/details?id=com.ghostery.android.ghostery" onClick={props.onAndroidClick} target="_blank" rel="noopener noreferrer">
+					<a href="https://play.google.com/store/apps/details?id=com.ghostery.android.ghostery" onClick={onAndroidClick} target="_blank" rel="noopener noreferrer">
 						<img
 							className="ProductsView__imagePlayStore"
 							src="/app/images/hub/products/google-play-badge.png"
@@ -86,7 +86,7 @@ const ProductsView = props => (
 					{t('hub_products_third_promo_description')}
 				</div>
 				<div className="ProductsView__storeImageContainer">
-					<a href="https://itunes.apple.com/us/app/ghostery-lite/id1436953057" onClick={props.onLiteClick} target="_blank" rel="noopener noreferrer">
+					<a href="https://itunes.apple.com/us/app/ghostery-lite/id1436953057" onClick={onLiteClick} target="_blank" rel="noopener noreferrer">
 						<img
 							className="ProductsView__imageAppStoreMac"
 							src="/app/images/hub/products/app_store_mac_badge_us.svg"

app/hub/Views/ProductsView/ProductsViewContainer.jsx

@@ -34,11 +34,12 @@ class ProductsViewContainer extends Component {
 	 * @return {JSX} JSX for rendering the Products View of the Hub app
 	 */
 	render() {
+		const { actions } = this.props;
 		return (
 			<ProductsView
-				onAndroidClick={() => { this.props.actions.sendPing({ type: 'products_cta_android' }); }}
-				onIosClick={() => { this.props.actions.sendPing({ type: 'products_cta_ios' }); }}
-				onLiteClick={() => { this.props.actions.sendPing({ type: 'products_cta_lite' }); }}
+				onAndroidClick={() => { actions.sendPing({ type: 'products_cta_android' }); }}
+				onIosClick={() => { actions.sendPing({ type: 'products_cta_ios' }); }}
+				onLiteClick={() => { actions.sendPing({ type: 'products_cta_lite' }); }}
 			/>
 		);
 	}

app/hub/Views/SetupView/SetupViewContainer.jsx

@@ -42,16 +42,19 @@ class SetupViewContainer extends Component {
 			sendMountActions: false,
 			showModal: false,
 		};
+
+		const { history } = this.props;
 		if (!props.preventRedirect) {
-			this.props.history.push('/setup/1');
+			history.push('/setup/1');
 		}
 
 		const title = t('hub_setup_page_title');
 		window.document.title = title;
 
-		this.props.actions.setSetupStep({ setup_step: 7 });
-		this.props.actions.initSetupProps(this.props.setup);
-		this.props.actions.getSetupShowWarningOverride().then((data) => {
+		const { actions, setup } = this.props;
+		actions.setSetupStep({ setup_step: 7 });
+		actions.initSetupProps(setup);
+		actions.getSetupShowWarningOverride().then((data) => {
 			const { setup_show_warning_override } = data;
 			const { justInstalled } = QueryString.parse(window.location.search);
 			const { user } = props;
@@ -88,8 +91,9 @@ class SetupViewContainer extends Component {
 	* Function to toggle the Ask Again Checkbox
 	*/
 	_toggleCheckbox = () => {
-		const { setup_show_warning_override } = this.props.setup;
-		this.props.actions.setSetupShowWarningOverride({
+		const { actions, setup } = this.props;
+		const { setup_show_warning_override } = setup;
+		actions.setSetupShowWarningOverride({
 			setup_show_warning_override: !setup_show_warning_override,
 		});
 	}
@@ -99,21 +103,23 @@ class SetupViewContainer extends Component {
 	 */
 	_setDefaultSettings() {
 		this.setState({ sendMountActions: true });
-		this.props.actions.setSetupStep({ setup_step: 8 });
-		this.props.actions.setBlockingPolicy({ blockingPolicy: BLOCKING_POLICY_RECOMMENDED });
-		this.props.actions.setAntiTracking({ enable_anti_tracking: true });
-		this.props.actions.setAdBlock({ enable_ad_block: true });
-		this.props.actions.setSmartBlocking({ enable_smart_block: true });
-		this.props.actions.setGhosteryRewards({ enable_ghostery_rewards: !IS_FIREFOX });
-		this.props.actions.setHumanWeb({ enable_human_web: !IS_FIREFOX });
+		const { actions } = this.props;
+		actions.setSetupStep({ setup_step: 8 });
+		actions.setBlockingPolicy({ blockingPolicy: BLOCKING_POLICY_RECOMMENDED });
+		actions.setAntiTracking({ enable_anti_tracking: true });
+		actions.setAdBlock({ enable_ad_block: true });
+		actions.setSmartBlocking({ enable_smart_block: true });
+		actions.setGhosteryRewards({ enable_ghostery_rewards: !IS_FIREFOX });
+		actions.setHumanWeb({ enable_human_web: !IS_FIREFOX });
 	}
 
 	/**
 	 * Helper render function for rendering the Modal's Children
 	 * @return {JSX} JSX of the Setup Modal's Children
 	 */
 	_renderModalChildren() {
-		const { setup_show_warning_override } = this.props.setup;
+		const { setup } = this.props;
+		const { setup_show_warning_override } = setup;
 
 		return (
 			<div className="SetupModal__content flex-container flex-dir-column align-middle">

app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.jsx

@@ -21,10 +21,10 @@ import { ToggleSwitch } from '../../../../shared-components';
  * @return {JSX} JSX for rendering the Setup Anti-Suite View of the Hub app
  * @memberof HubComponents
  */
-const SetupAntiSuiteView = props => (
+const SetupAntiSuiteView = ({ features }) => (
 	<div className="row align-center">
 		<div className="columns small-12 medium-10 large-8">
-			{props.features.map((feature) => {
+			{features.map((feature) => {
 				const iconClassNames = ClassNames(feature.id, {
 					SetupAntiSuite__icon: true,
 					active: feature.enabled,

app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx

@@ -62,25 +62,26 @@ class SetupAntiSuiteViewContainer extends Component {
 	* @param  {Object} featureName the name of the feature being toggled
 	*/
 	_handleToggle = (featureName) => {
+		const { actions, setup } = this.props;
 		switch (featureName) {
 			case 'anti-tracking': {
-				const enable_anti_tracking = !this.props.setup.enable_anti_tracking;
-				this.props.actions.setAntiTracking({ enable_anti_tracking });
+				const enable_anti_tracking = !setup.enable_anti_tracking;
+				actions.setAntiTracking({ enable_anti_tracking });
 				break;
 			}
 			case 'ad-block': {
-				const enable_ad_block = !this.props.setup.enable_ad_block;
-				this.props.actions.setAdBlock({ enable_ad_block });
+				const enable_ad_block = !setup.enable_ad_block;
+				actions.setAdBlock({ enable_ad_block });
 				break;
 			}
 			case 'smart-blocking': {
-				const enable_smart_block = !this.props.setup.enable_smart_block;
-				this.props.actions.setSmartBlocking({ enable_smart_block });
+				const enable_smart_block = !setup.enable_smart_block;
+				actions.setSmartBlocking({ enable_smart_block });
 				break;
 			}
 			case 'ghostery-rewards': {
-				const enable_ghostery_rewards = !this.props.setup.enable_ghostery_rewards;
-				this.props.actions.setGhosteryRewards({ enable_ghostery_rewards });
+				const enable_ghostery_rewards = !setup.enable_ghostery_rewards;
+				actions.setGhosteryRewards({ enable_ghostery_rewards });
 				break;
 			}
 			default: break;
@@ -92,12 +93,13 @@ class SetupAntiSuiteViewContainer extends Component {
 	 * @return {JSX} JSX for rendering the Setup Anti-Suite View of the Hub app
 	 */
 	render() {
+		const { setup } = this.props;
 		const {
 			enable_anti_tracking,
 			enable_ad_block,
 			enable_smart_block,
 			enable_ghostery_rewards,
-		} = this.props.setup;
+		} = setup;
 
 		const anti_tracking_enabled = IS_CLIQZ ? false : enable_anti_tracking;
 		const ad_block_enabled = IS_CLIQZ ? false : enable_ad_block;

app/hub/Views/SetupViews/SetupBlockingDropdown/SetupBlockingDropdownContainer.jsx

@@ -35,17 +35,19 @@ class SetupBlockingDropdownContainer extends Component {
 	 * Function to handle navigating back to the Blocking route
 	 */
 	_closeModal = () => {
-		this.props.history.push('/setup/1');
+		const { history } = this.props;
+		history.push('/setup/1');
 	}
 
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Blocking Dropdown
 	 */
 	render() {
+		const { actions } = this.props;
 		return (
 			<Modal show toggle={this._closeModal}>
-				<SetupBlockingDropdown settingsData={this.props} actions={this.props.actions} handleDoneClick={this._closeModal} />
+				<SetupBlockingDropdown settingsData={this.props} actions={actions} handleDoneClick={this._closeModal} />
 			</Modal>
 		);
 	}