Add toasts to react app

common/app/App.jsx

@@ -1,16 +1,33 @@
 import React, { PropTypes } from 'react';
-import { contain } from 'thundercats-react';
 import { Row } from 'react-bootstrap';
+import { ToastMessage, ToastContainer } from 'react-toastr';
+import { contain } from 'thundercats-react';
 
 import { Nav } from './components/Nav';
 
+const toastMessageFactory = React.createFactory(ToastMessage.animation);
+
 export default contain(
   {
+    actions: ['appActions'],
     store: 'appStore',
     fetchAction: 'appActions.getUser',
     isPrimed({ username }) {
       return !!username;
     },
+    map({
+      username,
+      points,
+      picture,
+      toast
+    }) {
+      return {
+        username,
+        points,
+        picture,
+        toast
+      };
+    },
     getPayload(props) {
       return {
         isPrimed: !!props.username
@@ -21,11 +38,31 @@ export default contain(
     displayName: 'FreeCodeCamp',
 
     propTypes: {
+      appActions: PropTypes.object,
       children: PropTypes.node,
+      username: PropTypes.string,
       points: PropTypes.number,
       picture: PropTypes.string,
-      title: PropTypes.string,
-      username: PropTypes.string
+      toast: PropTypes.object
+    },
+
+    componentWillReceiveProps({ toast: nextToast }) {
+      const { toast = {} } = this.props;
+      if (
+        toast &&
+        nextToast &&
+        toast.id !== nextToast.id
+      ) {
+
+        this.refs.toaster[nextToast.type || 'success'](
+          nextToast.message,
+          nextToast.title,
+          {
+            closeButton: true,
+            timeOut: 10000
+          }
+        );
+      }
     },
 
     render() {
@@ -38,6 +75,10 @@ export default contain(
           <Row>
             { this.props.children }
           </Row>
+          <ToastContainer
+            className='toast-bottom-right'
+            ref='toaster'
+            toastMessageFactory={ toastMessageFactory } />
         </div>
       );
     }

common/app/flux/Actions.js

@@ -33,8 +33,24 @@ export default Actions({
   },
 
   // routing
+  // goTo(path: String) => path
   goTo: null,
+
+  // goBack(arg?) => arg?
   goBack: null,
+
+  // toast(args: { type?: String, message: String, title: String }) => args
+  toast(args) {
+    return {
+      transform(state) {
+        const id = state.toast && state.toast.id ? state.toast.id : 0;
+        const toast = { ...args, id: id + 1 };
+        return { ...state, toast };
+      }
+    };
+  },
+
+  // updateLocation(location: { pathname: String }) => location
   updateLocation(location) {
     return {
       transform(state) {

common/app/flux/Store.js

@@ -28,7 +28,8 @@ export default Store({
     const {
       updateLocation,
       getUser,
-      setTitle
+      setTitle,
+      toast
     } = cat.getActions('appActions');
 
     register(
@@ -39,7 +40,8 @@ export default Store({
             setTitle
           )
         ),
-        updateLocation
+        updateLocation,
+        toast
       )
     );
 

common/app/routes/Hikes/flux/Actions.js

@@ -242,7 +242,13 @@ export default Actions({
           return {
             ...state,
             points: username ? state.points + 1 : state.points,
-            hikesApp
+            hikesApp,
+            toast: {
+              title: 'Congratulations!',
+              message: 'Hike completed',
+              id: state.toast && state.toast.id ? state.toast.id + 1 : 0,
+              type: 'success'
+            }
           };
         },
         optimistic: optimisticSave