Merge pull request #16143 from BerkeleyTrue/fix/settings-route

fix(Router): Add lang to payload if payload doesn't exist

common/app/Router/Link.jsx

@@ -1,18 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { selectLocationState } from 'redux-first-router';
+import { createSelector } from 'reselect';
 
 import toUrl from './to-url.js';
 import createHandler from './handle-press.js';
-import { langSelector } from './redux';
+import { routesMapSelector, langSelector } from './redux';
+
+const mapStateToProps = createSelector(
+  langSelector,
+  routesMapSelector,
+  (lang, routesMap) => ({ lang, routesMap })
+);
 
 const propTypes = {
   children: PropTypes.node,
   dispatch: PropTypes.func,
+  lang: PropTypes.string,
   onClick: PropTypes.func,
   redirect: PropTypes.bool,
   replace: PropTypes.bool,
+  routesMap: PropTypes.object,
   shouldDispatch: PropTypes.bool,
   target: PropTypes.string,
   to: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]).isRequired
@@ -22,19 +30,16 @@ export const Link = (
   {
     children,
     dispatch,
+    lang,
     onClick,
     redirect,
     replace,
+    routesMap,
     shouldDispatch = true,
     target,
     to
-  },
+  }
-  { store }
 ) => {
-  const state = store.getState();
-  const lang = langSelector(state);
-  const location = selectLocationState(state);
-  const { routesMap } = location;
   const url = toUrl(to, routesMap, lang);
   const handler = createHandler(
     url,
@@ -77,4 +82,4 @@ Link.contextTypes = {
 };
 Link.propTypes = propTypes;
 
-export default connect()(Link);
+export default connect(mapStateToProps)(Link);

common/app/Router/redux/add-lang-enhancer.js

@@ -1,7 +1,7 @@
 import { langSelector } from './';
 
 // This enhancers sole purpose is to add the lang prop to route actions so that
-// they do not need to be explicitally added when using a RFR route action.
+// they do not need to be explicitly added when using a RFR route action.
 export default function addLangToRouteEnhancer(routesMap) {
   return createStore => (...args) => {
     const store = createStore(...args);
@@ -11,7 +11,7 @@ export default function addLangToRouteEnhancer(routesMap) {
       dispatch(action) {
         if (
           routesMap[action.type] &&
-          (action && action.payload && !action.payload.lang)
+          (!action.payload || !action.payload.lang)
         ) {
           action = {
             ...action,

common/app/Router/redux/index.js

@@ -4,4 +4,5 @@ export const paramsSelector = state => selectLocationState(state).payload || {};
 export const locationTypeSelector =
   state => selectLocationState(state).type || '';
 export const langSelector = state => paramsSelector(state).lang || 'en';
-export const routesMapSelector = state => paramsSelector(state).routesMap || {};
+export const routesMapSelector = state =>
+  selectLocationState(state).routesMap || {};

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) {
+    if (showUpdateEmailView) {
-      return (
+      return <UpdateEmail />;
-        <ChildContainer>
-          { children }
-        </ChildContainer>
-      );
     }
     return (
       <ChildContainer>

common/app/routes/Settings/redux/index.js

@@ -1,7 +1,8 @@
+import { isLocationAction } from 'redux-first-router';
 import {
+  addNS,
   createAction,
-  createTypes,
+  createTypes
-  handleActions
 } 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(
+const getNS = state => state[ns];
-  () => ({
+export const showUpdateEmailViewSelector =
-    [types.onRouteSettings]: state => ({ ...state, showUpdateEmailView: true })
+  state => getNS(state).showUpdateEmailView;
-  }),
+
-  defaultState,
+export default addNS(
-  ns
+  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;
+  }
 );

common/app/routes/Settings/routes/update-email/index.js

@@ -1,8 +1 @@
-import UpdateEmail from './Update-Email.jsx';
+export { default } from './Update-Email.jsx';
-
-export default function updateEmailRoute() {
-  return [{
-    path: 'update-email',
-    component: UpdateEmail
-  }];
-}