From 7b6f774e9b1fb2152ff685b2ee2f1dc19e8d0dc8 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <berkeleytrue@users.noreply.github.com>
Date: Mon, 4 Dec 2017 13:50:49 -0800
Subject: [PATCH] fix(Settings): Actually change state when nav to update email

---
 common/app/routes/Settings/Settings.jsx       | 68 +++++++++----------
 common/app/routes/Settings/redux/index.js     | 36 +++++++---
 .../Settings/routes/update-email/index.js     |  9 +--
 3 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/common/app/routes/Settings/Settings.jsx b/common/app/routes/Settings/Settings.jsx
index 8efa28d7e8..bdb1ceb54c 100644
--- a/common/app/routes/Settings/Settings.jsx
+++ b/common/app/routes/Settings/Settings.jsx
@@ -12,8 +12,9 @@ import SocialSettings from './Social-Settings.jsx';
 import EmailSettings from './Email-Setting.jsx';
 import LanguageSettings from './Language-Settings.jsx';
 import SettingsSkeleton from './Settings-Skeleton.jsx';
+import UpdateEmail from './routes/update-email';
 
-import { toggleUserFlag } from './redux';
+import { toggleUserFlag, showUpdateEmailViewSelector } from './redux';
 import {
   toggleNightMode,
   updateTitle,
@@ -23,20 +24,10 @@ import {
 } from '../../redux';
 import ChildContainer from '../../Child-Container.jsx';
 
-
-const mapDispatchToProps = {
-  updateTitle,
-  toggleNightMode,
-  toggleIsAvailableForHire: () => toggleUserFlag('isAvailableForHire'),
-  toggleIsLocked: () => toggleUserFlag('isLocked'),
-  toggleQuincyEmail: () => toggleUserFlag('sendQuincyEmail'),
-  toggleNotificationEmail: () => toggleUserFlag('sendNotificationEmail'),
-  toggleMonthlyEmail: () => toggleUserFlag('sendMonthlyEmail')
-};
-
 const mapStateToProps = createSelector(
   userSelector,
   signInLoadingSelector,
+  showUpdateEmailViewSelector,
   (
     {
       username,
@@ -51,21 +42,33 @@ const mapStateToProps = createSelector(
       sendQuincyEmail
     },
     showLoading,
+    showUpdateEmailView
   ) => ({
-    showLoading,
-    username,
     email,
     isAvailableForHire,
-    isLocked,
     isGithubCool,
-    isTwitter,
     isLinkedIn,
+    isLocked,
+    isTwitter,
     sendMonthlyEmail,
     sendNotificationEmail,
-    sendQuincyEmail
+    sendQuincyEmail,
+    showLoading,
+    showUpdateEmailView,
+    username
   })
 );
 
+const mapDispatchToProps = {
+  toggleIsAvailableForHire: () => toggleUserFlag('isAvailableForHire'),
+  toggleIsLocked: () => toggleUserFlag('isLocked'),
+  toggleMonthlyEmail: () => toggleUserFlag('sendMonthlyEmail'),
+  toggleNightMode,
+  toggleNotificationEmail: () => toggleUserFlag('sendNotificationEmail'),
+  toggleQuincyEmail: () => toggleUserFlag('sendQuincyEmail'),
+  updateTitle
+};
+
 const propTypes = {
   children: PropTypes.element,
   email: PropTypes.string,
@@ -80,6 +83,7 @@ const propTypes = {
   sendNotificationEmail: PropTypes.bool,
   sendQuincyEmail: PropTypes.bool,
   showLoading: PropTypes.bool,
+  showUpdateEmailView: PropTypes.bool,
   toggleIsAvailableForHire: PropTypes.func.isRequired,
   toggleIsLocked: PropTypes.func.isRequired,
   toggleMonthlyEmail: PropTypes.func.isRequired,
@@ -109,34 +113,30 @@ export class Settings extends React.Component {
 
   render() {
     const {
-      children,
-      username,
-      isAvailableForHire,
-      isLocked,
-      isGithubCool,
-      isTwitter,
-      isLinkedIn,
-      showLoading,
       email,
+      isAvailableForHire,
+      isGithubCool,
+      isLinkedIn,
+      isLocked,
+      isTwitter,
       sendMonthlyEmail,
       sendNotificationEmail,
       sendQuincyEmail,
+      showLoading,
+      showUpdateEmailView,
       toggleIsAvailableForHire,
-      toggleNightMode,
       toggleIsLocked,
-      toggleQuincyEmail,
       toggleMonthlyEmail,
-      toggleNotificationEmail
+      toggleNightMode,
+      toggleNotificationEmail,
+      toggleQuincyEmail,
+      username
     } = this.props;
     if (!username && !showLoading) {
       return <SettingsSkeleton />;
     }
-    if (children) {
-      return (
-        <ChildContainer>
-          { children }
-        </ChildContainer>
-      );
+    if (showUpdateEmailView) {
+      return <UpdateEmail />;
     }
     return (
       <ChildContainer>
diff --git a/common/app/routes/Settings/redux/index.js b/common/app/routes/Settings/redux/index.js
index b2e1bb3d44..fec849ee60 100644
--- a/common/app/routes/Settings/redux/index.js
+++ b/common/app/routes/Settings/redux/index.js
@@ -1,7 +1,8 @@
+import { isLocationAction } from 'redux-first-router';
 import {
+  addNS,
   createAction,
-  createTypes,
-  handleActions
+  createTypes
 } from 'berkeleys-redux-utils';
 
 import userUpdateEpic from './update-user-epic.js';
@@ -19,6 +20,7 @@ export const types = createTypes([
   'onRouteUpdateEmail'
 ], 'settings');
 
+
 export const onRouteSettings = createAction(types.onRouteSettings);
 export const onRouteUpdateEmail = createAction(types.onRouteUpdateEmail);
 export const toggleUserFlag = createAction(types.toggleUserFlag);
@@ -33,10 +35,28 @@ const defaultState = {
   showUpdateEmailView: false
 };
 
-export default handleActions(
-  () => ({
-    [types.onRouteSettings]: state => ({ ...state, showUpdateEmailView: true })
-  }),
-  defaultState,
-  ns
+const getNS = state => state[ns];
+export const showUpdateEmailViewSelector =
+  state => getNS(state).showUpdateEmailView;
+
+export default addNS(
+  ns,
+  function settingsRouteReducer(state = defaultState, action) {
+    if (isLocationAction(action)) {
+      const { type } = action;
+      if (type === types.onRouteUpdateEmail) {
+        return {
+          ...state,
+          showUpdateEmailView: true
+        };
+      }
+      if (state.showUpdateEmailView) {
+        return {
+          ...state,
+          showUpdateEmailView: false
+        };
+      }
+    }
+    return state;
+  }
 );
diff --git a/common/app/routes/Settings/routes/update-email/index.js b/common/app/routes/Settings/routes/update-email/index.js
index b56a6288c1..7d32d33ebe 100644
--- a/common/app/routes/Settings/routes/update-email/index.js
+++ b/common/app/routes/Settings/routes/update-email/index.js
@@ -1,8 +1 @@
-import UpdateEmail from './Update-Email.jsx';
-
-export default function updateEmailRoute() {
-  return [{
-    path: 'update-email',
-    component: UpdateEmail
-  }];
-}
+export { default } from './Update-Email.jsx';