Merge pull request #272 from bochaco/allow-switch-accounts

feat/Allow switch accounts

email_app/app/actions/actionTypes.js

@@ -11,6 +11,7 @@ const ACTION_TYPES = {
 
   // Create Account
   AUTHORISE_SHARE_MD: 'AUTHORISE_SHARE_MD',
+  CREATE_ACCOUNT_RESET: 'CREATE_ACCOUNT_RESET',
   CREATE_ACCOUNT: 'CREATE_ACCOUNT',
   CREATE_ACCOUNT_ERROR: 'SET_CREATE_ACCOUNT_ERROR',
 

email_app/app/actions/create_account_actions.js

@@ -11,6 +11,11 @@ export const createAccount = (emailId) => {
   };
 };
 
+export const resetCurrentAccount = () => ({
+    type: ACTION_TYPES.CREATE_ACCOUNT_RESET,
+    payload: Promise.resolve()
+});
+
 export const createAccountError = (error) => ({
   type: ACTION_TYPES.CREATE_ACCOUNT,
   payload: Promise.reject(error)

email_app/app/components/home.js

@@ -12,6 +12,7 @@ export default class Home extends Component {
     super();
 
     this.reconnect = this.reconnect.bind(this);
+    this.handleBack = this.handleBack.bind(this);
   }
 
   reconnect() {
@@ -21,6 +22,14 @@ export default class Home extends Component {
             (err) => 'failed reconnecting');
   }
 
+  handleBack(e) {
+    e.preventDefault();
+    const { resetCurrentAccount, getEmailIds } = this.props;
+    return resetCurrentAccount()
+      .then(() => getEmailIds())
+      .then(() => this.context.router.push(`/create_account`));
+  }
+
   render() {
     const { router } = this.context;
     const { coreData, inboxSize, savedSize, networkStatus, processing } = this.props;
@@ -67,9 +76,13 @@ export default class Home extends Component {
           </div>
           <header className="home-head">
             <div className="lt-sec">
+              <button className="mdl-button mdl-js-button mdl-button--icon" title="Switch email ID" onClick={this.handleBack}>
+                <i className="material-icons">keyboard_arrow_left</i>
+              </button>
+            </div>
+            <div className="rt-sec text-left">
               <h3 className="title heading-md"><span className="bold">Email ID: </span>{coreData.id}</h3>
             </div>
-            <div className="rt-sec text-right"></div>
           </header>
           <div className="home-cnt mdl-layout mdl-js-layout">
             <div className="home-nav mdl-list">

email_app/app/containers/home_container.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import Home from '../components/home';
-import { reconnectApplication, refreshEmail } from '../actions/initializer_actions';
+import { reconnectApplication, refreshEmail, getEmailIds } from '../actions/initializer_actions';
+import { resetCurrentAccount } from '../actions/create_account_actions';
 
 const mapStateToProps = state => {
   return {
@@ -17,6 +18,8 @@ const mapDispatchToProps = dispatch => {
   return {
     reconnectApplication: () => (dispatch(reconnectApplication())),
     refreshEmail: (account) => (dispatch(refreshEmail(account))),
+    getEmailIds: () => (dispatch(getEmailIds())),
+    resetCurrentAccount: () => (dispatch(resetCurrentAccount()))
   };
 };
 

email_app/app/less/home.less

@@ -12,17 +12,19 @@
 			color: #FFFFFF;
 			height: 64px;
 			.lt-sec, .rt-sec {
-				width: 50%;
 				padding: 0 16px;
 				.title {
 					line-height: 64px;
 					font-weight: normal;
 				}
 			}
 			.lt-sec {
+				width: 5%;
 				float: left;
+				line-height: 64px;
 			}
 			.rt-sec {
+				width: 95%;
 				float: right;
 			}
 			.clearfix();

email_app/app/reducers/create_account.js

@@ -10,6 +10,9 @@ const initialState = {
 
 const createAccount = (state = initialState, action) => {
   switch (action.type) {
+    case `${ACTION_TYPES.CREATE_ACCOUNT_RESET}_LOADING`:
+      return initialState;
+      break;
     case `${ACTION_TYPES.CREATE_ACCOUNT}_ERROR`:
       return { ...state, error: action.payload };
       break;