diff --git a/common/app/Router/Link.jsx b/common/app/Router/Link.jsx
index 9f6b906ec0..4297d31802 100644
--- a/common/app/Router/Link.jsx
+++ b/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);
diff --git a/common/app/Router/redux/add-lang-enhancer.js b/common/app/Router/redux/add-lang-enhancer.js
index 476af0af82..ebd47f6819 100644
--- a/common/app/Router/redux/add-lang-enhancer.js
+++ b/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,
diff --git a/common/app/Router/redux/index.js b/common/app/Router/redux/index.js
index f66aa02859..8b2690c987 100644
--- a/common/app/Router/redux/index.js
+++ b/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 || {};
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 ;
}
- if (children) {
- return (
-
- { children }
-
- );
+ if (showUpdateEmailView) {
+ return ;
}
return (
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';