Support for removing notifications by dispatching removeAll action (#33)

* Support for removing notifications by dispatching removeAll action

* Readme - document hide action

Author: gor181

README.md

@@ -154,6 +154,20 @@ There is a working example in example/src/**
 ### Properties
 It accepts all properties as react-notification-system does, actually it pipes them in the react-notification-system.
 
+### Actions
+``` javascript
+import Notifications from 'react-notification-system-redux';
+
+dispatch(Notifications.show(notification, level));
+dispatch(Notifications.success(notification));
+dispatch(Notifications.error(notification));
+dispatch(Notifications.warning(notification));
+dispatch(Notifications.info(notification));
+dispatch(Notifications.hide(uid)); // Hides notification based on uid
+dispatch(Notifications.removeAll()); // Removes all notifications
+```
+
+
 ## Development (`src`, `lib` and the build process)
 
 **NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.

example/src/components/container.js

@@ -22,6 +22,7 @@ class Container extends React.Component {
     super();
 
     this.handleClick = this.handleClick.bind(this);
+    this.handleRemoveAll = this.handleRemoveAll.bind(this);
   }
 
   dispatchNotification(fn, timeout) {
@@ -37,13 +38,17 @@ class Container extends React.Component {
     this.dispatchNotification(Notifications.info, 1000);
   }
 
+  handleRemoveAll() {
+    this.context.store.dispatch(Notifications.removeAll());
+  }
+
 	render() {
     const {notifications} = this.props;
 
 		return (
 	    <div>
         <button onClick={this.handleClick}>Spawn some notifications!!!</button>
-
+        <button onClick={this.handleRemoveAll}>Remove all notifications</button>
         <Notifications notifications={notifications} />
       </div>
 		);

package.json

@@ -44,7 +44,7 @@
     "sinon": "^1.17.6"
   },
   "dependencies": {
-    "react-notification-system": "^0.2.7"
+    "react-notification-system": "^0.2.x"
   },
   "peerDependencies": {
     "react": "^0.14 || ^15.0.0-rc || ^15.0",

src/actions.js

@@ -1,4 +1,4 @@
-import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION} from './const';
+import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS} from './const';
 
 //Example opts
 // {
@@ -45,3 +45,7 @@ export function hide(uid) {
     uid
   };
 }
+
+export function removeAll() {
+  return { type: RNS_REMOVE_ALL_NOTIFICATIONS };
+}

src/const.js

@@ -1,2 +1,3 @@
 export const RNS_SHOW_NOTIFICATION = 'RNS_SHOW_NOTIFICATION';
 export const RNS_HIDE_NOTIFICATION = 'RNS_HIDE_NOTIFICATION';
+export const RNS_REMOVE_ALL_NOTIFICATIONS = 'RNS_REMOVE_ALL_NOTIFICATIONS';

src/notifications.js

@@ -14,24 +14,32 @@ class Notifications extends React.Component {
   componentWillReceiveProps(nextProps) {
     const {notifications} = nextProps;
     const notificationIds = notifications.map(notification => notification.uid);
+    const systemNotifications = this.system().state.notifications || [];
 
-    // Get all active notifications from react-notification-system
-    /// and remove all where uid is not found in the reducer
-    (this.system().state.notifications || []).forEach(notification => {
-      if (notificationIds.indexOf(notification.uid) < 0) {
-        this.system().removeNotification(notification.uid);
-      }
-    });
-
-    notifications.forEach(notification => {
-      this.system().addNotification({
-        ...notification,
-        onRemove: () => {
-          this.context.store.dispatch(actions.hide(notification.uid));
-          notification.onRemove && notification.onRemove();
+    if (notifications.length > 0) {
+      // Get all active notifications from react-notification-system
+      /// and remove all where uid is not found in the reducer
+      (systemNotifications).forEach(notification => {
+        if (notificationIds.indexOf(notification.uid) < 0) {
+          console.log('removing', this.system().state.notifications);
+          this.system().removeNotification(notification.uid);
         }
       });
-    });
+
+      notifications.forEach(notification => {
+        this.system().addNotification({
+          ...notification,
+          onRemove: () => {
+            this.context.store.dispatch(actions.hide(notification.uid));
+            notification.onRemove && notification.onRemove();
+          }
+        });
+      });
+    }
+
+    if ((this.props.notifications !== notifications) && notifications.length === 0) {
+      this.system().clearNotifications();
+    }
   }
 
   shouldComponentUpdate(nextProps) {

src/reducer.js

@@ -1,4 +1,4 @@
-import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION} from './const';
+import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS} from './const';
 
 export default function Notifications(state = [], action = {}) {
   switch(action.type) {
@@ -12,6 +12,8 @@ export default function Notifications(state = [], action = {}) {
       return state.filter(notification => {
         return notification.uid !== action.uid;
       });
+    case RNS_REMOVE_ALL_NOTIFICATIONS:
+      return [];
   }
   return state;
 }

test/__tests__/actions.js

@@ -17,7 +17,7 @@ describe('actions', () => {
     expect(Actions.success().uid).to.be.defined;
   });
 
-  if('sets the custom uid when provided', () => {
+  it('sets the custom uid when provided', () => {
     expect(Actions.success({ uid: 1 }).uid).to.equal(1);
   });
 });

test/__tests__/const.js

@@ -5,5 +5,6 @@ describe('constants', () => {
   it('should be defined', () => {
     expect(Constants.RNS_SHOW_NOTIFICATION).to.be.defined;
     expect(Constants.RNS_HIDE_NOTIFICATION).to.be.defined;
+    expect(Constants.RNS_REMOVE_ALL_NOTIFICATIONS).to.be.defined;
   });
 });

test/__tests__/reducer.js

@@ -24,4 +24,13 @@ describe('reducer', () => {
     const newState = Reducer(state, Actions.hide(uid));
     expect(newState.length).to.equal(0);
   });
+
+  it('removes all notifications', () => {
+    const state = Reducer([], Actions.success({ uid: 1 }));
+    const newState = Reducer(state, Actions.success({ uid: 2 }));
+    const emptyState = Reducer(newState, Actions.removeAll());
+
+    expect(newState.length).to.equal(2);
+    expect(emptyState.length).to.equal(0);
+  });
 });