Renders flash messages and allows to delete them

client/actions/flashMessages.js

@@ -1,8 +1,15 @@
-import { ADD_FLASH_MESSAGE } from './types';
+import { ADD_FLASH_MESSAGE, DELETE_FLASH_MESSAGE } from './types';
 
 export function addFlashMessage(message) {
   return {
     type: ADD_FLASH_MESSAGE,
     message
   }
 }
+
+export function deleteFlashMessage(id) {
+  return {
+    type: DELETE_FLASH_MESSAGE,
+    id
+  }
+}

client/actions/types.js

@@ -1 +1,2 @@
 export const ADD_FLASH_MESSAGE = 'ADD_FLASH_MESSAGE';
+export const DELETE_FLASH_MESSAGE = 'DELETE_FLASH_MESSAGE';

client/components/App.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import NavigationBar from './NavigationBar';
+import FlashMessagesList from './flash/FlashMessagesList';
 
 class App extends React.Component {
   render() {
     return (
       <div className="container">
         <NavigationBar />
+        <FlashMessagesList />
         {this.props.children}
       </div>
     );

client/components/flash/FlashMessage.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import classnames from 'classnames';
+
+class FlashMessage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    this.props.deleteFlashMessage(this.props.message.id);
+  }
+
+  render() {
+    const { id, type, text } = this.props.message;
+    return (
+      <div className={classnames('alert', {
+        'alert-success': type === 'success',
+        'alert-danger': type === 'error'
+      })}>
+        <button onClick={this.onClick} className="close"><span>&times;</span></button>
+        {text}
+      </div>
+    );
+  }
+}
+
+FlashMessage.propTypes = {
+  message: React.PropTypes.object.isRequired,
+  deleteFlashMessage: React.PropTypes.func.isRequired
+}
+
+export default FlashMessage;

client/components/flash/FlashMessagesList.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import FlashMessage from './FlashMessage';
+import { connect } from 'react-redux';
+import { deleteFlashMessage } from '../../actions/flashMessages';
+
+class FlashMessagesList extends React.Component {
+  render() {
+    const messages = this.props.messages.map(message =>
+      <FlashMessage key={message.id} message={message} deleteFlashMessage={this.props.deleteFlashMessage} />
+    );
+    return (
+      <div>{messages}</div>
+    );
+  }
+}
+
+FlashMessagesList.propTypes = {
+  messages: React.PropTypes.array.isRequired,
+  deleteFlashMessage: React.PropTypes.func.isRequired
+}
+
+function mapStateToProps(state) {
+  return {
+    messages: state.flashMessages
+  }
+}
+
+export default connect(mapStateToProps, { deleteFlashMessage })(FlashMessagesList);

client/reducers/flashMessages.js

@@ -1,5 +1,6 @@
-import { ADD_FLASH_MESSAGE } from '../actions/types';
+import { ADD_FLASH_MESSAGE, DELETE_FLASH_MESSAGE } from '../actions/types';
 import shortid from 'shortid';
+import findIndex from 'lodash/findIndex';
 
 export default (state = [], action = {}) => {
   switch(action.type) {
@@ -12,6 +13,16 @@ export default (state = [], action = {}) => {
           text: action.message.text
         }
       ];
+    case DELETE_FLASH_MESSAGE:
+      const index = findIndex(state, { id: action.id });
+      if (index >= 0) {
+        return [
+          ...state.slice(0, index),
+          ...state.slice(index + 1)
+        ];
+      }
+      return state;
+
     default: return state;
   }
 }