3 files changed, 23 insertions, 13 deletions
diff --git a/app/assets/javascripts/components/actions/notifications.jsx b/app/assets/javascripts/components/actions/notifications.jsx
index cf1e50a69..f19a356c2 100644
--- a/app/assets/javascripts/components/actions/notifications.jsx
+++ b/app/assets/javascripts/components/actions/notifications.jsx
@@ -1,4 +1,5 @@
 export const NOTIFICATION_DISMISS = 'NOTIFICATION_DISMISS';
+export const NOTIFICATION_CLEAR   = 'NOTIFICATION_CLEAR';
 
 export function dismissNotification(notification) {
   return {
@@ -6,3 +7,9 @@ export function dismissNotification(notification) {
     notification: notification
   };
 };
+
+export function clearNotifications() {
+  return {
+    type: NOTIFICATION_CLEAR
+  };
+};
diff --git a/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx b/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx
index 2db1603fc..bc339ef28 100644
--- a/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx
+++ b/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx
@@ -1,18 +1,18 @@
 import { connect }             from 'react-redux';
 import { NotificationStack }   from 'react-notification';
-import { dismissNotification } from '../../../actions/notifications';
+import {
+  dismissNotification,
+  clearNotifications
+}                              from '../../../actions/notifications';
 
-const mapStateToProps = (state, props) => {
-  return {
-    notifications: state.get('notifications').map((item, i) => ({
-      message: item.get('message'),
-      title: item.get('title'),
-      key: i,
-      action: 'Dismiss',
-      dismissAfter: 5000
-    })).toJS()
-  };
-};
+const mapStateToProps = (state, props) => ({
+  notifications: state.get('notifications').map((item, i) => ({
+    message: item.get('message'),
+    title: item.get('title'),
+    key: item.get('key'),
+    dismissAfter: 5000
+  })).toJS()
+});
 
 const mapDispatchToProps = (dispatch) => {
   return {
diff --git a/app/assets/javascripts/components/reducers/notifications.jsx b/app/assets/javascripts/components/reducers/notifications.jsx
index 694d9ff4b..a1d99f0e1 100644
--- a/app/assets/javascripts/components/reducers/notifications.jsx
+++ b/app/assets/javascripts/components/reducers/notifications.jsx
@@ -2,13 +2,14 @@ import { COMPOSE_SUBMIT_FAIL, COMPOSE_UPLOAD_FAIL } from '../actions/compose';
 import { FOLLOW_SUBMIT_FAIL }                       from '../actions/follow';
 import { REBLOG_FAIL, FAVOURITE_FAIL }              from '../actions/interactions';
 import { TIMELINE_REFRESH_FAIL }                    from '../actions/timelines';
-import { NOTIFICATION_DISMISS }                     from '../actions/notifications';
+import { NOTIFICATION_DISMISS, NOTIFICATION_CLEAR } from '../actions/notifications';
 import Immutable                                    from 'immutable';
 
 const initialState = Immutable.List();
 
 function notificationFromError(state, error) {
   let n = Immutable.Map({
+    key: state.size > 0 ? state.last().get('key') + 1 : 0,
     message: ''
   });
 
@@ -34,6 +35,8 @@ export default function notifications(state = initialState, action) {
     case TIMELINE_REFRESH_FAIL:
       return notificationFromError(state, action.error);
     case NOTIFICATION_DISMISS:
+      return state.filterNot(item => item.get('key') === action.notification.key);
+    case NOTIFICATION_CLEAR:
       return state.clear();
     default:
       return state;