gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(Flash): Should reflect express style

Browse Source
This commit is contained in:
Berkeley Martinez
2018-01-26 19:15:23 -08:00
parent 4d545a018c
commit 040d49d612
3 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
common/app/Flash/Flash.jsx
View File

@ -11,19 +11,19 @@ import {
} from './redux'; } from './redux';
const propTypes = { const propTypes = {
alertType: PropTypes.oneOf(Object.keys(alertTypes)),
clickOnClose: PropTypes.func.isRequired, clickOnClose: PropTypes.func.isRequired,
message: PropTypes.string message: PropTypes.string,
type: PropTypes.oneOf(Object.keys(alertTypes))
}; };
const mapStateToProps = latestMessageSelector; const mapStateToProps = latestMessageSelector;
const mapDispatchToProps = { clickOnClose }; const mapDispatchToProps = { clickOnClose };
export function Flash({ alertType, clickOnClose, message }) { export function Flash({ type, clickOnClose, message }) {
if (!message) { if (!message) {
return null; return null;
} }
return ( return (
<div className={`${ns}-container bg-${alertType}`}> <div className={`${ns}-container bg-${type}`}>
<div className={`${ns}-content`}> <div className={`${ns}-content`}>
<p className={ `${ns}-message` }> <p className={ `${ns}-message` }>
{ message } { message }

9
common/app/Flash/redux/index.js
View File

@ -11,6 +11,8 @@ import * as utils from './utils.js';
import getMessagesEpic from './get-messages-epic.js'; import getMessagesEpic from './get-messages-epic.js';
import ns from '../ns.json'; import ns from '../ns.json';
// export all the utils
export { utils };
export const epics = [getMessagesEpic]; export const epics = [getMessagesEpic];
export const types = createTypes([ export const types = createTypes([
'clickOnClose', 'clickOnClose',
@ -45,13 +47,10 @@ export default composeReducers(
), ),
function metaReducer(state = defaultState, action) { function metaReducer(state = defaultState, action) {
if (utils.isFlashAction(action)) { if (utils.isFlashAction(action)) {
const { payload: { alertType, message } } = utils.getFlashAction(action); const { payload } = utils.getFlashAction(action);
return [ return [
...state, ...state,
{ ...payload
alertType: utils.normalizeAlertType(alertType),
message: _.escape(message)
}
]; ];
} }
return state; return state;

43
common/app/Flash/redux/utils.js
View File

@ -9,21 +9,44 @@ export const alertTypes = _.keyBy(_.identity)([
export const normalizeAlertType = alertType => alertTypes[alertType] || 'info'; export const normalizeAlertType = alertType => alertTypes[alertType] || 'info';
export const getFlashAction = _.flow( // interface ExpressFlash {
_.property('meta'), // [alertType]: [String...]
_.property('flash') // }
); // interface StackFlash {
// type: AlertType,
export const isFlashAction = _.flow( // message: String
getFlashAction, // }
Boolean
);
export const expressToStack = _.flow( export const expressToStack = _.flow(
_.toPairs, _.toPairs,
_.flatMap(([ type, messages ]) => messages.map(msg => ({ _.flatMap(([ type, messages ]) => messages.map(msg => ({
message: msg, message: msg,
alertType: normalizeAlertType(type) type: normalizeAlertType(type)
}))) })))
); );
export const isExpressFlash = _.flow(
_.keys,
_.every(type => alertTypes[type])
);
export const getFlashAction = _.flow(
_.property('meta'),
_.property('flash')
);
// FlashMessage
// createFlashMetaAction(payload: ExpressFlash|StackFlash
export const createFlashMetaAction = payload => {
if (isExpressFlash(payload)) {
payload = expressToStack(payload);
} else {
payload = [payload];
}
return { flash: { payload } };
};
export const isFlashAction = _.flow(
getFlashAction,
Boolean
);