GH-339 Ghostery hub navigation stub

_locales/en/messages.json

@@ -1593,6 +1593,9 @@
 	"setup_upgrade_button_go": {
 		"message": "Set Me Up"
 	},
+	"hub_home_page_title": {
+		"message": "Ghostery Hub - Home"
+	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Setup"
 	},

app/hub/components/App.jsx → app/hub/App.jsx

@@ -14,7 +14,7 @@
  */
 
 import React, { Component } from 'react';
-import SideNavigation from './SideNavigation';
+import SideNavigation from './Views/SideNavigationView/SideNavigationView';
 
 /**
  * @class Implements the container App for the Ghostery Hub
@@ -33,10 +33,10 @@ class App extends Component {
 						location: 'list', type: 'link', href: '/', icon: 'home', text: 'Home'
 					},
 					{
-						location: 'list', type: 'link', href: '/setup/1', icon: 'home', text: 'Customize Setup'
+						location: 'list', type: 'link', href: '/setup', icon: 'home', text: 'Customize Setup'
 					},
 					{
-						location: 'list', type: 'link', href: '/tutorial/1', icon: 'home', text: 'Visit Tutorial'
+						location: 'list', type: 'link', href: '/tutorial', icon: 'home', text: 'Visit Tutorial'
 					},
 					{
 						location: 'list', type: 'link', href: '/supporter', icon: 'home', text: 'Become a Ghostery Supporter'

app/hub/Views/HomeView/HomeView.jsx

@@ -13,38 +13,55 @@
  * ToDo: Update this file.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 
 /**
  * @class Implement the Home View for the Ghostery Hub
- * @extends Component
  * @memberof HubComponents
  */
-class HomeView extends Component {
-	constructor(props) {
-		super(props);
+const HomeView = () => (
+	<div>
+		<div className="row ready-header">
+			<div className="columns small-6">
+				<div className="ghosty-dialogue" />
+			</div>
+			<div className="columns small-6">
+				<h1>Ghostery is Ready!</h1>
+				<p>you are now protected with the Ghostery recommended default settings.</p>
+				<span className="bold">Start browsing!</span>
+				<label>
+					<input type="checkbox" />
+					Support Ghostery by sharing Human Web & Analytics data.
+					<a>Learn more.</a>
+				</label>
+			</div>
+		</div>
+		<div className="row optimize-create">
+			<div className="columns small-6">
+				<span>Optimze your ghostery experience</span>
+			</div>
+			<div className="columns small-6">
+				<a>Create Account</a>
+			</div>
+		</div>
+		<div className="row tutorial-custom">
+			<div className="columns small-6">
+				tutorial
+			</div>
+			<div className="columns small-6">
+				customize setup
+			</div>
+		</div>
+		<div className="row supporter">
+			<div className="columns small-6">
+				become a ghostery support text
+			</div>
+			<div className="columns small-6">
+				support button
+			</div>
+		</div>
+	</div>
+);
 
-		this.state = {
-			title: ''
-		};
-	}
-
-	/**
-	 * Lifecycle Event
-	 */
-	componentWillMount() {
-		const { title } = this.state;
-		window.document.title = title;
-	}
-
-	/**
-	 * React's required render function. Returns JSX
-	 * @return {JSX} JSX for rendering the Home View of the Hub app
-	 */
-	render() {
-		const { title } = this.state;
-		return <div>{title}</div>;
-	}
-}
 
 export default HomeView;

app/hub/Views/HomeView/HomeView.scss

@@ -0,0 +1,6 @@
+.ghosty-dialogue {
+	height: 156px;
+	background-image: url('../images/hub/ghosty-dialogue.svg');
+	background-repeat: no-repeat;
+	background-size: contain;
+}

app/hub/Views/TutorialViews/TutorialTrustRestrictView/index.js → app/hub/Views/HomeView/HomeViewActions.js

@@ -1,5 +1,5 @@
 /**
- * Point of entry index.js file for Tutorial Trust/Restrict View
+ * Home View Action creators
  *
  * Ghostery Browser Extension
  * https://www.ghostery.com/
@@ -10,7 +10,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
+import { TOGGLE_ANALYTICS } from './HomeViewConstants';
 
-import TutorialTrustRestrictView from './TutorialTrustRestrictView';
-
-export default TutorialTrustRestrictView;
+export function toggleAnalytics(data) {
+	return {
+		type: TOGGLE_ANALYTICS,
+		data,
+	};
+}

app/hub/Views/TutorialViews/TutorialSimpleDetailedView/index.js → app/hub/Views/HomeView/HomeViewConstants.js

@@ -1,5 +1,5 @@
 /**
- * Point of entry index.js file for Tutorial Simple or Detailed View
+ * Custom Home Constants
  *
  * Ghostery Browser Extension
  * https://www.ghostery.com/
@@ -11,6 +11,4 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import TutorialSimpleDetailedView from './TutorialSimpleDetailedView';
-
-export default TutorialSimpleDetailedView;
+export const TOGGLE_ANALYTICS = 'TOGGLE_ANALYTICS';

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -0,0 +1,52 @@
+/**
+ * Tutorial View Container
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import HomeView from './HomeView';
+
+/**
+ * @class Implement the Tutorial View Container for the Ghostery Hub
+ * @extends Component
+ * @memberof HubContainers
+ */
+class HomeViewContainer extends React.Component {
+	constructor(props) {
+		super(props);
+		const title = t('hub_home_page_title');
+		window.document.title = title;
+	}
+
+	/**
+	 * React's required render function. Returns JSX
+	 * @return {JSX} JSX for rendering the Tutorial View of the Hub app
+	 */
+	render() {
+		return <HomeView humanWebEnabled={this.props.home.enable_human_web} />;
+	}
+}
+
+HomeViewContainer.propTypes = {
+	home: PropTypes.shape({
+		enable_human_web: PropTypes.bool,
+	}),
+};
+
+HomeViewContainer.defaultProps = {
+	home: {
+		enable_human_web: false,
+	},
+};
+
+export default HomeViewContainer;

app/hub/Views/HomeView/HomeViewReducer.js

@@ -0,0 +1,31 @@
+/**
+ * Reducer used in the Home View
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+import { TOGGLE_ANALYTICS } from './HomeViewConstants';
+
+const initialState = {};
+
+function HomeViewReducer(state = initialState, action) {
+	switch (action.type) {
+		case TOGGLE_ANALYTICS: {
+			return Object.assign({}, state, {
+				home: {
+					enable_human_web: action.data.enable_human_web
+				},
+			});
+		}
+
+		default: return state;
+	}
+}
+
+export default HomeViewReducer;

app/hub/Views/HomeView/index.js

@@ -10,7 +10,31 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
-import HomeView from './HomeView';
+import * as actions from './HomeViewActions';
+import HomeViewReducer from './HomeViewReducer';
+import HomeViewContainer from './HomeViewContainer';
 
-export default HomeView;
+/**
+ * Map redux store state properties to the component's own properties.
+ * @param  {Object} state    entire Redux store's state
+ * @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.home);
+
+/**
+ * Bind the component's action creators using Redux's bindActionCreators.
+ * @param  {function} dispatch redux store method which dispatches actions
+ * @return {function}          to be used as an argument in redux connect call
+ * @memberof SetupContainers
+ */
+const mapDispatchToProps = dispatch => ({
+	actions: bindActionCreators(Object.assign(actions), dispatch),
+});
+
+export const reducer = HomeViewReducer;
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomeViewContainer);

app/hub/Views/SetupView/SetupViewContainer.jsx

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
 import QueryString from 'query-string';
 import PropTypes from 'prop-types';
 import SetupView from './SetupView';
@@ -34,16 +34,6 @@ import SetupDoneView from '../SetupViews/SetupDoneView';
 class SetupViewContainer extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {
-			sendMountActions: false,
-			showModal: false,
-		};
-	}
-
-	/**
-	 * Lifecycle Event
-	 */
-	componentWillMount() {
 		const title = t('hub_setup_page_title');
 
 		window.document.title = title;
@@ -66,6 +56,13 @@ class SetupViewContainer extends React.Component {
 				this._setDefaultSettings();
 			}
 		});
+
+		this.state = {
+			sendMountActions: false,
+			showModal: false,
+		};
+
+		this.props.history.push('/setup/1');
 	}
 
 	/**
@@ -280,4 +277,4 @@ SetupViewContainer.defaultProps = {
 	},
 };
 
-export default SetupViewContainer;
+export default withRouter(SetupViewContainer);

app/hub/components/SideNavigation.jsx → app/hub/Views/SideNavigationView/SideNavigationView.jsx

@@ -21,7 +21,7 @@ import { NavLink } from 'react-router-dom';
  * @extends Component
  * @memberof HubComponents
  */
-class SideNavigation extends Component {
+class SideNavigationView extends Component {
 	constructor(props) {
 		super(props);
 
@@ -54,14 +54,24 @@ class SideNavigation extends Component {
 	 * A helper function for rendering a Side Navigation List Item
 	 * @return {JSX} JSX for the Navigation Item
 	 */
+
+	hasNestedRoutes(route) {
+		const parentRoutes = ['setup', 'tutorial'];
+		return parentRoutes.some(parentRoute => route.href.includes(parentRoute));
+	}
+
 	_renderItem(item = {}, index) {
 		switch (item.type) {
 			case 'separator':
 				return <hr key={index} />;
 			case 'link':
 				return (
-					<NavLink to={item.href} key={index}>
-						<div>{item.text}</div>
+					<NavLink exact={!this.hasNestedRoutes(item)} to={item.href} key={index} className="flex-container align-middle">
+						<div className="flex-child-auto">{item.text}</div>
+						<div className="arrow-left">
+							<div className="arrow-left-top" />
+							<div className="arrow-left-bottom" />
+						</div>
 					</NavLink>
 				);
 			default:
@@ -77,12 +87,18 @@ class SideNavigation extends Component {
 		const { topItems, listItems, bottomItems } = this.state;
 
 		return (
-			<div className="full-height flex-container flex-dir-column">
+			<div className="SideNavigation__container flex-container flex-dir-column">
 				<div className="SideNavigation__top">
 					{topItems.map((item, i) => this._renderItem(item, i))}
 				</div>
 				<div className="SideNavigation__list flex-child-grow">
-					{listItems.map((item, i) => this._renderItem(item, i))}
+					<ul>
+						{listItems.map((item, i) => (
+							<li>
+								{this._renderItem(item, i)}
+							</li>
+						))}
+					</ul>
 				</div>
 				<div className="SideNavigation__bottom">
 					{bottomItems.map((item, i) => this._renderItem(item, i))}
@@ -92,4 +108,4 @@ class SideNavigation extends Component {
 	}
 }
 
-export default SideNavigation;
+export default SideNavigationView;