Minor fixes

app/hub/Views/SetupView/SetupView.jsx

@@ -24,26 +24,33 @@ import SetupHeader from '../SetupViews/SetupHeader';
  * @return {JSX} JSX for rendering the Setup View of the Hub app
  * @memberof HubComponents
  */
-const SetupView = props => (
-	<div className="full-height flex-container flex-dir-column">
-		<div className="flex-child-grow">
-			{props.steps.map(step => (
-				<Route
-					key={`route-${step.index}`}
-					path={step.path}
-					render={() => (
-						<div>
-							<SetupHeader {...step.headerProps} />
-							<step.bodyComponent index={step.index} sendMountActions={props.sendMountActions} />
-						</div>
-					)}
-				/>
-			))}
-		</div>
+const SetupView = (props) => {
+	const {
+		steps,
+		sendMountActions,
+	} = props;
+
+	return (
+		<div className="full-height flex-container flex-dir-column">
+			<div className="flex-child-grow">
+				{steps.map(step => (
+					<Route
+						key={`route-${step.index}`}
+						path={step.path}
+						render={() => (
+							<div>
+								<SetupHeader {...step.headerProps} />
+								<step.bodyComponent index={step.index} sendMountActions={sendMountActions} />
+							</div>
+						)}
+					/>
+				))}
+			</div>
 
-		<SetupNavigation totalSteps={props.steps.length} />
-	</div>
-);
+			<SetupNavigation totalSteps={props.steps.length} />
+		</div>
+	);
+};
 
 // PropTypes ensure we pass required props of the correct type
 SetupView.propTypes = {
@@ -56,6 +63,7 @@ SetupView.propTypes = {
 			titleImage: PropTypes.string.isRequired,
 		}).isRequired,
 	})).isRequired,
+	sendMountActions: PropTypes.bool.isRequired,
 };
 
 export default SetupView;

app/hub/Views/SetupView/SetupViewContainer.jsx

@@ -26,7 +26,7 @@ import SetupHumanWebView from '../SetupViews/SetupHumanWebView';
 import SetupDoneView from '../SetupViews/SetupDoneView';
 
 /**
- * @class Implement the Setup View Container for the Ghostery Hub
+ * @class Implement the Setup View for the Ghostery Hub
  * @extends Component
  * @memberof HubContainers
  */

app/hub/Views/TutorialView/TutorialView.jsx

@@ -23,25 +23,32 @@ import TutorialNavigation from '../TutorialViews/TutorialNavigation';
  * @return {JSX} JSX for rendering the Setup View of the Hub app
  * @memberof HubComponents
  */
-const TutorialView = props => (
-	<div className="full-height flex-container flex-dir-column">
-		<div className="flex-child-grow">
-			{props.steps.map(step => (
-				<Route
-					key={`route-${step.index}`}
-					path={step.path}
-					render={() => (
-						<div>
-							<step.bodyComponent index={step.index} />
-						</div>
-					)}
-				/>
-			))}
-		</div>
+const TutorialView = (props) => {
+	const {
+		steps,
+		sendMountActions,
+	} = this.props;
+
+	return (
+		<div className="full-height flex-container flex-dir-column">
+			<div className="flex-child-grow">
+				{steps.map(step => (
+					<Route
+						key={`route-${step.index}`}
+						path={step.path}
+						render={() => (
+							<div>
+								<step.bodyComponent index={step.index} sendMountActions={sendMountActions} />
+							</div>
+						)}
+					/>
+				))}
+			</div>
 
-		<TutorialNavigation totalSteps={props.steps.length} />
-	</div>
-);
+			<TutorialNavigation totalSteps={props.steps.length} />
+		</div>
+	);
+};
 
 // PropTypes ensure we pass required props of the correct type
 TutorialView.propTypes = {
@@ -50,6 +57,7 @@ TutorialView.propTypes = {
 		path: PropTypes.string.isRequired,
 		bodyComponent: PropTypes.func.isRequired,
 	})).isRequired,
+	sendMountActions: PropTypes.bool.isRequired,
 };
 
 export default TutorialView;

app/hub/Views/TutorialView/TutorialViewContainer.jsx

@@ -26,24 +26,33 @@ import TutorialTrustView from '../TutorialViews/TutorialTrustView';
 import TutorialAntiSuiteView from '../TutorialViews/TutorialAntiSuiteView';
 
 /**
- * @class Implement the Tutorial View Container for the Ghostery Hub
+ * @class Implement the Tutorial View for the Ghostery Hub
  * @extends Component
  * @memberof HubContainers
  */
 class TutorialViewContainer extends React.Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sendMountActions: false,
+		};
+
+		this.props.history.push('/tutorial/1');
+
 		const title = '';
 		window.document.title = title;
-		this.props.actions.initTutorialProps(this.props.tutorial);
-		this.props.history.push('/tutorial/1');
+
+		this.props.actions.initTutorialProps(this.props.tutorial).then(() => {
+			this.setState({ sendMountActions: true });
+		});
 	}
 
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Tutorial View of the Hub app
 	 */
 	render() {
+		const { sendMountActions } = this.state;
 		const steps = [
 			{
 				index: 1,
@@ -77,7 +86,7 @@ class TutorialViewContainer extends React.Component {
 			},
 		];
 
-		return <TutorialView steps={steps} />;
+		return <TutorialView steps={steps} sendMountActions={sendMountActions} />;
 	}
 }
 

app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx

@@ -26,7 +26,7 @@ class TutorialAntiSuiteViewContainer extends Component {
 		super(props);
 
 		// TODO call setTutorialNavigation action
-		const { index } = this.props;
+		const { index, sendMountActions } = this.props;
 		this.props.actions.setTutorialNavigation({
 			activeIndex: index,
 			hrefPrev: `/tutorial/${index - 1}`,
@@ -37,7 +37,9 @@ class TutorialAntiSuiteViewContainer extends Component {
 			textDone: t('hub_setup_exit_flow'),
 		});
 
-		this.props.actions.setTutorialComplete();
+		if (sendMountActions) {
+			this.props.actions.setTutorialComplete();
+		}
 	}
 
 	render() {