feat(Flash): Add remove logic

This commit is contained in:
Berkeley Martinez
2018-01-04 16:39:43 -08:00
parent f452a8dbce
commit 9d5d5c3be4
2 changed files with 31 additions and 7 deletions

View File

@ -2,19 +2,23 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { CloseButton } from 'react-bootstrap'; import { CloseButton } from 'react-bootstrap';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import ns from './ns.json'; import ns from './ns.json';
import { alertTypes, latestMessageSelector } from './redux'; import {
alertTypes,
latestMessageSelector,
clickOnClose
} from './redux';
const propTypes = { const propTypes = {
alertType: PropTypes.oneOf(Object.keys(alertTypes)), alertType: PropTypes.oneOf(Object.keys(alertTypes)),
clickOnClose: PropTypes.func.isRequired,
message: PropTypes.string message: PropTypes.string
}; };
const mapStateToProps = latestMessageSelector; const mapStateToProps = latestMessageSelector;
const mapDispatchToProps = null; const mapDispatchToProps = { clickOnClose };
export function Flash({ alertType, message }) { export function Flash({ alertType, clickOnClose, message }) {
if (!message) { if (!message) {
return null; return null;
} }
@ -24,7 +28,7 @@ export function Flash({ alertType, message }) {
<div> <div>
{ message } { message }
</div> </div>
<CloseButton /> <CloseButton onClick={ clickOnClose }/>
</div> </div>
</div> </div>
); );

View File

@ -1,8 +1,19 @@
import { composeReducers } from 'berkeleys-redux-utils';
import _ from 'lodash/fp'; import _ from 'lodash/fp';
import {
createTypes,
createAction,
composeReducers,
handleActions
} from 'berkeleys-redux-utils';
import ns from '../ns.json'; import ns from '../ns.json';
export const types = createTypes([
'clickOnClose'
], ns);
export const clickOnClose = createAction(types.clickOnClose, _.noop);
export const alertTypes = _.keyBy(_.identity)([ export const alertTypes = _.keyBy(_.identity)([
'success', 'success',
'info', 'info',
@ -30,11 +41,20 @@ export const latestMessageSelector = _.flow(
getNS, getNS,
_.property('stack'), _.property('stack'),
_.head, _.head,
_.defaultTo(_.stubObject) _.defaultTo({})
); );
export default composeReducers( export default composeReducers(
ns, ns,
handleActions(
() => ({
[types.clickOnClose]: (state) => ({
...state,
stack: _.tail(state.stack)
})
}),
defaultState,
),
function metaReducer(state = defaultState, action) { function metaReducer(state = defaultState, action) {
if (isFlashAction(action)) { if (isFlashAction(action)) {
const { payload: { alertType, message } } = getFlashAction(action); const { payload: { alertType, message } } = getFlashAction(action);