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

Feature(toast): Move from react-toastr to react-notifications

Browse Source
This commit is contained in:
Berkeley Martinez
2016-07-06 11:47:16 -07:00
parent 0418c71509
commit 8e3c092029
16 changed files with 142 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
client/less/toastr.less
View File

@ -1,269 +1,10 @@
// sourced from https://github.com/CodeSeven/toastr .notification-bar {
// MIT license z-index: 999999;
// Mix-ins overflow: hidden;
.borderRadius(@radius) { // margin: 0 0 6px;
-moz-border-radius: @radius; padding: 2rem;
-webkit-border-radius: @radius;
border-radius: @radius;
} }
.boxShadow(@boxShadow) { .notification-bar-message {
-moz-box-shadow: @boxShadow; padding-right: 2rem;
-webkit-box-shadow: @boxShadow;
box-shadow: @boxShadow;
}
.opacity(@opacity) {
@opacityPercent: @opacity * 100;
opacity: @opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
filter: ~"alpha(opacity=@{opacityPercent})";
}
.wordWrap(@wordWrap: break-word) {
-ms-word-wrap: @wordWrap;
word-wrap: @wordWrap;
}
// Variables
@black: #000000;
@grey: #999999;
@light-grey: #CCCCCC;
@white: #FFFFFF;
@near-black: #030303;
@green: #51A351;
@red: #BD362F;
@blue: #2F96B4;
@orange: #F89406;
@default-container-opacity: .8;
// Styles
.toast-title {
font-weight: bold;
}
.toast-message {
.wordWrap();
a,
label {
color: @white;
}
a:hover {
color: @light-grey;
text-decoration: none;
}
}
.toast-close-button {
position: relative;
right: -0.3em;
top: -0.3em;
float: right;
font-size: 20px;
font-weight: bold;
color: @white;
-webkit-text-shadow: 0 1px 0 rgba(255,255,255,1);
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(0.8);
&:hover,
&:focus {
color: @black;
text-decoration: none;
cursor: pointer;
.opacity(0.4);
}
}
/*Additional properties for button version
iOS requires the button element instead of an anchor tag.
If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
//#endregion
.toast-top-center {
top: 0;
right: 0;
width: 100%;
}
.toast-bottom-center {
bottom: 0;
right: 0;
width: 100%;
}
.toast-top-full-width {
top: 0;
right: 0;
width: 100%;
}
.toast-bottom-full-width {
bottom: 0;
right: 0;
width: 100%;
}
.toast-top-left {
top: 12px;
left: 12px;
}
.toast-top-right {
top: 12px;
right: 12px;
}
.toast-bottom-right {
right: 12px;
bottom: 12px;
}
.toast-bottom-left {
bottom: 12px;
left: 12px;
}
#toast-container {
position: fixed;
z-index: 999999;
// The container should not be clickable.
pointer-events: none;
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
> div {
position: relative;
// The toast itself should be clickable.
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 50px;
width: 300px;
.borderRadius(3px 3px 3px 3px);
background-position: 15px center;
background-repeat: no-repeat;
.boxShadow(0 0 12px @grey);
color: @white;
.opacity(@default-container-opacity);
}
> :hover {
.boxShadow(0 0 12px @black);
.opacity(1);
cursor: pointer;
}
> .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
> .toast-error {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
> .toast-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
> .toast-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
/*overrides*/
&.toast-top-center > div,
&.toast-bottom-center > div {
width: 300px;
margin-left: auto;
margin-right: auto;
}
&.toast-top-full-width > div,
&.toast-bottom-full-width > div {
width: 96%;
margin-left: auto;
margin-right: auto;
}
}
.toast {
background-color: @near-black;
}
.toast-success {
background-color: @green;
}
.toast-error {
background-color: @red;
}
.toast-info {
background-color: @blue;
}
.toast-warning {
background-color: @orange;
}
.toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background-color: @black;
.opacity(0.4);
}
/*Responsive Design*/
@media all and (max-width: 240px) {
#toast-container {
> div {
padding: 8px 8px 8px 50px;
width: 11em;
}
& .toast-close-button {
right: -0.2em;
top: -0.2em;
}
}
}
@media all and (min-width: 241px) and (max-width: 480px) {
#toast-container {
> div {
padding: 8px 8px 8px 50px;
width: 18em;
}
& .toast-close-button {
right: -0.2em;
top: -0.2em;
}
}
}
@media all and (min-width: 481px) and (max-width: 768px) {
#toast-container {
> div {
padding: 15px 15px 15px 50px;
width: 25em;
}
}
} }

46
common/app/App.jsx
View File

@ -1,6 +1,5 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { Button, Row } from 'react-bootstrap'; import { Button, Row } from 'react-bootstrap';
import { ToastMessage, ToastContainer } from 'react-toastr';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
@ -16,11 +15,9 @@ import {
import { submitChallenge } from './routes/challenges/redux/actions'; import { submitChallenge } from './routes/challenges/redux/actions';
import Nav from './components/Nav'; import Nav from './components/Nav';
import { randomCompliment } from './utils/get-words'; import Toasts from './toasts/Toasts.jsx';
import { userSelector } from './redux/selectors'; import { userSelector } from './redux/selectors';
const toastMessageFactory = React.createFactory(ToastMessage.animation);
const mapStateToProps = createSelector( const mapStateToProps = createSelector(
userSelector, userSelector,
state => state.app.shouldShowSignIn, state => state.app.shouldShowSignIn,
@ -34,7 +31,6 @@ const mapStateToProps = createSelector(
toast, toast,
isMapDrawerOpen, isMapDrawerOpen,
isMapAlreadyLoaded, isMapAlreadyLoaded,
showChallengeComplete
) => ({ ) => ({
username, username,
points, points,
@ -43,7 +39,6 @@ const mapStateToProps = createSelector(
shouldShowSignIn, shouldShowSignIn,
isMapDrawerOpen, isMapDrawerOpen,
isMapAlreadyLoaded, isMapAlreadyLoaded,
showChallengeComplete,
isSignedIn: !!username isSignedIn: !!username
}) })
); );
@ -72,7 +67,6 @@ export class FreeCodeCamp extends React.Component {
toast: PropTypes.object, toast: PropTypes.object,
updateNavHeight: PropTypes.func, updateNavHeight: PropTypes.func,
initWindowHeight: PropTypes.func, initWindowHeight: PropTypes.func,
showChallengeComplete: PropTypes.number,
submitChallenge: PropTypes.func, submitChallenge: PropTypes.func,
isMapDrawerOpen: PropTypes.bool, isMapDrawerOpen: PropTypes.bool,
isMapAlreadyLoaded: PropTypes.bool, isMapAlreadyLoaded: PropTypes.bool,
@ -83,38 +77,6 @@ export class FreeCodeCamp extends React.Component {
params: PropTypes.object params: PropTypes.object
}; };
componentWillReceiveProps({
toast: nextToast = {},
showChallengeComplete: nextCC = 0
}) {
const {
toast = {},
showChallengeComplete
} = this.props;
if (toast.id !== nextToast.id) {
this.refs.toaster[nextToast.type || 'success'](
nextToast.message,
nextToast.title,
{
closeButton: true,
timeOut: 10000
}
);
}
if (nextCC !== showChallengeComplete) {
this.refs.toaster.success(
this.renderChallengeComplete(),
randomCompliment(),
{
closeButton: true,
timeOut: 0,
extendedTimeOut: 0
}
);
}
}
componentDidMount() { componentDidMount() {
this.props.initWindowHeight(); this.props.initWindowHeight();
if (!this.props.isSignedIn) { if (!this.props.isSignedIn) {
@ -173,11 +135,7 @@ export class FreeCodeCamp extends React.Component {
isOpen={ isMapDrawerOpen } isOpen={ isMapDrawerOpen }
toggleMapDrawer={ toggleMapDrawer } toggleMapDrawer={ toggleMapDrawer }
/> />
<ToastContainer <Toasts />
className='toast-bottom-right'
ref='toaster'
toastMessageFactory={ toastMessageFactory }
/>
</div> </div>
); );
} }

2
common/app/create-reducer.js
View File

@ -2,6 +2,7 @@ import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form'; import { reducer as formReducer } from 'redux-form';
import { reducer as app } from './redux'; import { reducer as app } from './redux';
import { reducer as toasts } from './toasts/redux';
import entitiesReducer from './redux/entities-reducer'; import entitiesReducer from './redux/entities-reducer';
import { import {
reducer as challengesApp, reducer as challengesApp,
@ -13,6 +14,7 @@ export default function createReducer(sideReducers = {}) {
...sideReducers, ...sideReducers,
entities: entitiesReducer, entities: entitiesReducer,
app, app,
toasts,
challengesApp, challengesApp,
form: formReducer.normalize({ ...projectNormalizer }) form: formReducer.normalize({ ...projectNormalizer })
}); });

5
common/app/redux/reducer.js
View File

@ -19,11 +19,6 @@ export default handleActions(
title: payload + ' | Free Code Camp' title: payload + ' | Free Code Camp'
}), }),
[types.makeToast]: (state, { payload: toast }) => ({
...state,
toast
}),
[types.updateThisUser]: (state, { payload: user }) => ({ [types.updateThisUser]: (state, { payload: user }) => ({
...state, ...state,
user, user,

1
common/app/redux/types.js
View File

@ -10,7 +10,6 @@ export default createTypes([
'updateCompletedChallenges', 'updateCompletedChallenges',
'showSignIn', 'showSignIn',
'makeToast',
'handleError', 'handleError',
'toggleNightMode', 'toggleNightMode',
// used to hit the server // used to hit the server

2
common/app/routes/challenges/components/classic/Side-Panel.jsx
View File

@ -11,7 +11,7 @@ import Output from './Output.jsx';
import ToolPanel from './Tool-Panel.jsx'; import ToolPanel from './Tool-Panel.jsx';
import { challengeSelector } from '../../redux/selectors'; import { challengeSelector } from '../../redux/selectors';
import { updateHint, executeChallenge } from '../../redux/actions'; import { updateHint, executeChallenge } from '../../redux/actions';
import { makeToast } from '../../../../redux/actions'; import { makeToast } from '../../../../toasts/redux/actions';
const bindableActions = { makeToast, executeChallenge, updateHint }; const bindableActions = { makeToast, executeChallenge, updateHint };
const mapStateToProps = createSelector( const mapStateToProps = createSelector(

8
common/app/routes/challenges/redux/actions.js
View File

@ -93,14 +93,6 @@ export const updateOutput = createAction(types.updateOutput, loggerToStr);
export const checkChallenge = createAction(types.checkChallenge); export const checkChallenge = createAction(types.checkChallenge);
export const showProjectSubmit = createAction(types.showProjectSubmit); export const showProjectSubmit = createAction(types.showProjectSubmit);
let id = 0;
export const showChallengeComplete = createAction(
types.showChallengeComplete,
() => {
id += 1;
return id;
}
);
export const submitChallenge = createAction(types.submitChallenge); export const submitChallenge = createAction(types.submitChallenge);
export const moveToNextChallenge = createAction(types.moveToNextChallenge); export const moveToNextChallenge = createAction(types.moveToNextChallenge);

9
common/app/routes/challenges/redux/answer-saga.js
View File

@ -3,7 +3,8 @@ import types from './types';
import { getMouse } from '../utils'; import { getMouse } from '../utils';
import { submitChallenge, videoCompleted } from './actions'; import { submitChallenge, videoCompleted } from './actions';
import { createErrorObservable, makeToast } from '../../../redux/actions'; import { createErrorObservable } from '../../../redux/actions';
import { makeToast } from '../../../toasts/redux/actions';
import { challengeSelector } from './selectors'; import { challengeSelector } from './selectors';
export default function answerSaga(action$, getState) { export default function answerSaga(action$, getState) {
@ -54,11 +55,7 @@ export default function answerSaga(action$, getState) {
if (answer !== finalAnswer) { if (answer !== finalAnswer) {
let infoAction; let infoAction;
if (info) { if (info) {
infoAction = makeToast({ infoAction = makeToast({ message: info });
title: 'Have a hint',
message: info,
type: 'info'
});
} }
return Observable return Observable

22
common/app/routes/challenges/redux/completion-saga.js
View File

@ -1,11 +1,12 @@
import { Observable } from 'rx'; import { Observable } from 'rx';
import types from './types'; import types from './types';
import { showChallengeComplete, moveToNextChallenge } from './actions'; import { moveToNextChallenge } from './actions';
import { import {
createErrorObservable, createErrorObservable,
makeToast,
updateUserPoints updateUserPoints
} from '../../../redux/actions'; } from '../../../redux/actions';
import { makeToast } from '../../../toasts/redux/actions';
import { challengeSelector } from './selectors'; import { challengeSelector } from './selectors';
import { backEndProject } from '../../../utils/challengeTypes'; import { backEndProject } from '../../../utils/challengeTypes';
@ -18,9 +19,8 @@ function postChallenge(url, body, username) {
.flatMap(({ alreadyCompleted, points }) => { .flatMap(({ alreadyCompleted, points }) => {
return Observable.of( return Observable.of(
makeToast({ makeToast({
message: randomCompliment() + message: randomCompliment() +
(alreadyCompleted ? '!' : '! First time Completed!'), (alreadyCompleted ? '!' : '! First time Completed!')
type: 'info'
}), }),
updateUserPoints(username, points) updateUserPoints(username, points)
); );
@ -29,7 +29,7 @@ function postChallenge(url, body, username) {
const challengeCompleted$ = Observable.of( const challengeCompleted$ = Observable.of(
moveToNextChallenge(), moveToNextChallenge(),
username ? makeToast({ message: ' Saving...', type: 'info' }) : null username ? makeToast({ message: ' Saving...' }) : null
); );
return Observable.merge(saveChallenge$, challengeCompleted$); return Observable.merge(saveChallenge$, challengeCompleted$);
} }
@ -39,7 +39,11 @@ function submitModern(type, state) {
if (tests.length > 0 && tests.every(test => test.pass && !test.err)) { if (tests.length > 0 && tests.every(test => test.pass && !test.err)) {
if (type === types.checkChallenge) { if (type === types.checkChallenge) {
return Observable.of( return Observable.of(
showChallengeComplete() makeToast({
message: 'Go to my next challenge.',
action: 'Submit',
actionCreator: 'submitChallenge'
})
); );
} }
@ -58,9 +62,7 @@ function submitModern(type, state) {
} }
} }
return Observable.just(makeToast({ return Observable.just(makeToast({
message: 'Not all tests are passing, yet.', message: 'Not all tests are passing, yet.'
title: 'Almost There!',
type: 'info'
})); }));
} }

9
common/app/routes/challenges/redux/next-challenge-saga.js
View File

@ -2,13 +2,13 @@ import { Observable } from 'rx';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import types from './types'; import types from './types';
import { resetUi, updateCurrentChallenge } from './actions'; import { resetUi, updateCurrentChallenge } from './actions';
import { createErrorObservable, makeToast } from '../../../redux/actions'; import { createErrorObservable } from '../../../redux/actions';
import { makeToast } from '../../../toasts/redux/actions';
import { import {
getNextChallenge, getNextChallenge,
getFirstChallengeOfNextBlock, getFirstChallengeOfNextBlock,
getFirstChallengeOfNextSuperBlock getFirstChallengeOfNextSuperBlock
} from '../utils'; } from '../utils';
import { randomVerb } from '../../../utils/get-words';
import debug from 'debug'; import debug from 'debug';
const isDev = debug.enabled('fcc:*'); const isDev = debug.enabled('fcc:*');
@ -64,10 +64,7 @@ export default function nextChallengeSaga(actions$, getState) {
return Observable.of( return Observable.of(
updateCurrentChallenge(nextChallenge), updateCurrentChallenge(nextChallenge),
resetUi(), resetUi(),
makeToast({ makeToast({ message: 'Your next challenge arrived.' }),
title: randomVerb(),
message: 'Your next challenge has arrived.'
}),
push(`/challenges/${nextChallenge.block}/${nextChallenge.dashedName}`) push(`/challenges/${nextChallenge.block}/${nextChallenge.dashedName}`)
); );
} catch (err) { } catch (err) {

69
common/app/toasts/Toasts.jsx Normal file
View File

@ -0,0 +1,69 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { NotificationStack } from 'react-notification';
import { removeToast } from './redux/actions';
import { submitChallenge } from '../routes/challenges/redux/actions';
const registeredActions = { submitChallenge };
const mapStateToProps = state => ({ toasts: state.toasts });
const barStyle = {
fontSize: '2rem',
// null values let our css set the style prop
padding: null
};
const actionStyle = {
fontSize: '2rem'
};
const addDispatchableActionsToToast = createSelector(
state => state.toasts,
state => state.dispatch,
(toasts, dispatch) => toasts.map(({ position, actionCreator, ...toast }) => {
const activeBarStyle = {};
if (position !== 'left') {
activeBarStyle.left = null;
activeBarStyle.right = '1rem';
}
const onClick = registeredActions[actionCreator] ?
() => dispatch(registeredActions[actionCreator]()) :
null;
return {
...toast,
barStyle,
activeBarStyle,
actionStyle,
onClick
};
})
);
export class Toasts extends React.Component {
constructor(...props) {
super(...props);
this.handleDismiss = this.handleDismiss.bind(this);
}
static displayName = 'Toasts';
static propTypes = {
toasts: PropTypes.arrayOf(PropTypes.object),
dispatch: PropTypes.func
};
handleDismiss(notification) {
this.props.dispatch(removeToast(notification));
}
render() {
const { toasts = [], dispatch } = this.props;
return (
<NotificationStack
notifications={
addDispatchableActionsToToast({ toasts, dispatch })
}
onDismiss={ this.handleDismiss }
/>
);
}
}
export default connect(mapStateToProps)(Toasts);

20
common/app/toasts/redux/actions.js Normal file
View File

@ -0,0 +1,20 @@
import { createAction } from 'redux-actions';
import types from './types';
let key = 0;
export const makeToast = createAction(
types.makeToast,
({ timeout, ...rest }) => ({
...rest,
// assign current value of key to new toast
// and then increment key value
key: key++,
dismissAfter: timeout || 40000,
position: rest.position === 'left' ? 'left' : 'right'
})
);
export const removeToast = createAction(
types.removeToast,
({ key }) => key
);

3
common/app/toasts/redux/index.js Normal file
View File

@ -0,0 +1,3 @@
export { default as types } from './types';
export { default as reducer } from './reducer';
export * as actions from './actions';

13
common/app/toasts/redux/reducer.js Normal file
View File

@ -0,0 +1,13 @@
import { handleActions } from 'redux-actions';
import types from './types';
const initialState = [];
export default handleActions({
[types.makeToast]: (state, { payload: toast }) => [
...state,
toast
],
[types.removeToast]: (state, { payload: key }) => state.filter(
toast => toast.key !== key
)
}, initialState);

6
common/app/toasts/redux/types.js Normal file
View File

@ -0,0 +1,6 @@
import createTypes from '../../utils/create-types';
export default createTypes([
'makeToast',
'removeToast'
], 'toast');

1
package.json
View File

@ -94,6 +94,7 @@
"react-images": "^0.4.6", "react-images": "^0.4.6",
"react-motion": "~0.4.2", "react-motion": "~0.4.2",
"react-no-ssr": "^1.0.1", "react-no-ssr": "^1.0.1",
"react-notification": "^5.0.7",
"react-pure-render": "^1.0.2", "react-pure-render": "^1.0.2",
"react-redux": "^4.0.6", "react-redux": "^4.0.6",
"react-router": "^2.0.0", "react-router": "^2.0.0",