From 5a32585ddd8754325fd4c0f95b803426aefc242f Mon Sep 17 00:00:00 2001 From: Berkeley Martinez Date: Mon, 8 Jan 2018 11:12:00 -0800 Subject: [PATCH] feat(Flash): Get flashes from ssr --- client/index.js | 11 +++++++---- common/app/Flash/redux/index.js | 31 +++++++++++++++++++++++-------- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/client/index.js b/client/index.js index 9908c284f78..0970b768319 100644 --- a/client/index.js +++ b/client/index.js @@ -5,10 +5,10 @@ import { render } from 'redux-epic'; import createHistory from 'history/createBrowserHistory'; import useLangRoutes from './utils/use-lang-routes'; import sendPageAnalytics from './utils/send-page-analytics'; -import flashToToast from './utils/flash-to-toast'; import { App, createApp, provideStore } from '../common/app'; import { getLangFromPath } from '../common/app/utils/lang'; +import flashReducer, { messagesFoundOnBoot } from '../common/app/Flash/redux'; // client specific epics import epics from './epics'; @@ -29,7 +29,7 @@ const { document, ga, __fcc__: { - flash = [], + flash = {}, data: ssrState = {}, csrf: { token: csrfToken @@ -51,7 +51,10 @@ const defaultState = isColdStored() ? const primaryLang = getLangFromPath(location.pathname); defaultState.app.csrfToken = csrfToken; -defaultState.toasts = flashToToast(flash); +defaultState.flash = flashReducer( + defaultState.flash, + messagesFoundOnBoot(flash) +); const serviceOptions = { xhrPath: '/services', context: { _csrf: csrfToken } }; @@ -78,7 +81,7 @@ createApp({ }); } }) - .doOnNext(() => log('rendering')) + .do(() => log('rendering')) .flatMap(({ store }) => render(provideStore(App, store), DOMContainer)) .subscribe( () => debug('react rendered'), diff --git a/common/app/Flash/redux/index.js b/common/app/Flash/redux/index.js index 7237aa2d92a..2a354f2874a 100644 --- a/common/app/Flash/redux/index.js +++ b/common/app/Flash/redux/index.js @@ -8,18 +8,13 @@ import { import ns from '../ns.json'; -export const types = createTypes([ - 'clickOnClose' -], ns); - -export const clickOnClose = createAction(types.clickOnClose, _.noop); - export const alertTypes = _.keyBy(_.identity)([ 'success', 'info', 'warning', 'danger' ]); +export const normalizeAlertType = _.get(alertTypes, 'info'); export const getFlashAction = _.flow( _.property('meta'), @@ -31,8 +26,24 @@ export const isFlashAction = _.flow( Boolean ); +export const types = createTypes([ + 'clickOnClose', + 'messagesFoundOnBoot' +], ns); + +export const clickOnClose = createAction(types.clickOnClose, _.noop); +export const messagesFoundOnBoot = createAction(types.messagesFoundOnBoot); + +export const expressToStack = _.flow( + _.toPairs, + _.flatMap(([ type, messages ]) => messages.map(({ msg }) => ({ + message: msg, + alertType: normalizeAlertType(type) + }))) +); + const defaultState = { - stack: [{ alertType: 'danger', message: 'foo bar' }] + stack: [{ alertType: 'danger', message: 'foo nar' }] }; const getNS = _.property(ns); @@ -51,6 +62,10 @@ export default composeReducers( [types.clickOnClose]: (state) => ({ ...state, stack: _.tail(state.stack) + }), + [types.messagesFoundOnBoot]: (state, { payload }) => ({ + ...state, + stack: [...state.stack, ...expressToStack(payload)] }) }), defaultState, @@ -63,7 +78,7 @@ export default composeReducers( stack: [ ...state.stack, { - alertType: alertTypes[alertType] || 'info', + alertType: normalizeAlertType(alertType), message: _.escape(message) } ]