edit notification feature added

README.md

@@ -165,10 +165,12 @@ dispatch(Notifications.warning(notification));
 dispatch(Notifications.info(notification));
 dispatch(Notifications.hide(uid)); // Hides notification based on uid
 dispatch(Notifications.removeAll()); // Removes all notifications
+dispatch(Notifications.removeAll()); // Removes all notifications
+dispatch(Notifications.editNotification(newNotification)); // Edit notification, newNotification must have same uid
 
 // OR //
 
-import { show, success, error, warning, info, hide, removeAll } from 'react-notification-system-redux';
+import { show, success, error, warning, info, hide, removeAll, editNotification } from 'react-notification-system-redux';
 
 dispatch(show(notification, level));
 dispatch(success(notification));
@@ -177,6 +179,7 @@ dispatch(warning(notification));
 dispatch(info(notification));
 dispatch(hide(uid)); // Hides notification based on uid
 dispatch(removeAll()); // Removes all notifications
+dispatch(editNotification(newNotification)); // Edit notification, newNotification must have same uid
 ```
 
 

example/src/components/container.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import ReactDOM from 'react-dom';
 
-import Notifications, { success, error, warning, info, removeAll } from 'react-notification-system-redux';
+import Notifications, { success, error, warning, info, removeAll, editNotification } from 'react-notification-system-redux';
 
 const notificationOpts = {
-  // uid: 'once-please', // you can specify your own uid if required
+  // uid: '123', // you can specify your own uid if required
   title: 'Hey, it\'s good to see you!',
   message: 'Now you can see how easy it is to use notifications in React!',
   position: 'tr',
@@ -21,9 +21,9 @@ class Container extends React.Component {
 
   constructor() {
     super();
-
     this.handleClick = this.handleClick.bind(this);
     this.handleRemoveAll = this.handleRemoveAll.bind(this);
+    this.editNotification = this.editNotification.bind(this);
   }
 
   dispatchNotification(fn, timeout) {
@@ -43,13 +43,39 @@ class Container extends React.Component {
     this.context.store.dispatch(removeAll());
   }
 
+  editNotification(){
+    let notificationPayload = {
+      uid : 'timer',
+      title: 'Updates every second',
+      message: `${new Date().getMinutes()}:${new Date().getSeconds()}`,
+      position: 'tr',
+      autoDismiss: 0,
+      action: {
+        label: 'Click me!!',
+        callback: () => alert('clicked!')
+      }
+    };
+
+    // show notificatiom first time
+    this.context.store.dispatch(success(notificationPayload));
+
+    // updates same uid notification after every sec.
+    setInterval(() => {
+      this.context.store.dispatch(editNotification(Object.assign({}, notificationPayload , {
+        message: `${new Date().getMinutes()}:${new Date().getSeconds()}`
+     })));
+    }, 1000);
+  }
+
 	render() {
     const {notifications} = this.props;
 
 		return (
 	    <div>
         <button onClick={this.handleClick}>Spawn some notifications!!!</button>
         <button onClick={this.handleRemoveAll}>Remove all notifications</button>
+        <br /> <br />
+        <button onClick={this.editNotification}>Edit Notitfication (New)</button>
         <Notifications notifications={notifications} />
       </div>
 		);

src/actions.js

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

src/const.js

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

src/notifications.js

@@ -8,37 +8,71 @@ import NotifySystem from 'react-notification-system';
 
 class Notifications extends React.Component {
 
+  constructor(props){
+    super(props);
+    this.notifications = []; //variable to keep refernce to all notifications, needs in case of update notification
+    this.editNotifications = this.editNotifications.bind(this);
+    this.addNotification = this.addNotification.bind(this);
+    this.removeNotification = this.removeNotification.bind(this);
+  }
+
   system() {
     return this.refs.notify;
   }
 
-  componentWillReceiveProps(nextProps) {
-    const {notifications} = nextProps;
-    const notificationIds = notifications.map(notification => notification.uid);
-    const systemNotifications = this.system().state.notifications || [];
+  editNotifications(notifications){
+    notifications.map((notification, index) => {
+      this.system().editNotification(this.notifications[index] , {
+        ...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) {
-          this.system().removeNotification(notification.uid);
+  addNotification(notifications){
+    this.notifications = notifications.map(notification => {
+      return this.system().addNotification({
+        ...notification,
+        onRemove: () => {
+          this.context.store.dispatch(actions.hide(notification.uid));
+          notification.onRemove && notification.onRemove();
         }
       });
+    });
+  }
 
-      notifications.forEach(notification => {
-        this.system().addNotification({
-          ...notification,
-          onRemove: () => {
-            this.context.store.dispatch(actions.hide(notification.uid));
-            notification.onRemove && notification.onRemove();
+  removeNotification(){
+    this.system().clearNotifications();
+    this.notifications = [];
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const {notifications} = nextProps;
+    const notificationIds = notifications.map(notification => notification.uid);
+    const systemNotifications = this.system().state.notifications || [];
+
+    if(this.props.notifications.length === nextProps.notifications.length){
+      this.editNotifications( notifications);
+    }
+    else{
+      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) {
+            this.system().removeNotification(notification.uid);
           }
         });
-      });
+
+        this.addNotification(notifications);
+      }
     }
 
     if ((this.props.notifications !== notifications) && notifications.length === 0) {
-      this.system().clearNotifications();
+        this.removeNotification();
     }
   }
 
@@ -71,3 +105,4 @@ Object.keys(actions).forEach(key => {
 Notifications.reducer = reducer;
 
 module.exports = Notifications;
+// export default Notifications;

src/reducer.js

@@ -1,4 +1,4 @@
-import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS} from './const';
+import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS, RNS_EDIT_NOTIFICATION} from './const';
 
 export default function Notifications(state = [], action = {}) {
   switch(action.type) {
@@ -14,6 +14,11 @@ export default function Notifications(state = [], action = {}) {
       });
     case RNS_REMOVE_ALL_NOTIFICATIONS:
       return [];
+    case RNS_EDIT_NOTIFICATION:
+      const { opts } = action;
+      const {uid , ...parms} = opts;
+      return state.map(notification => notification.uid !== uid ? notification :  Object.assign({}, notification, parms));
+     default :
+      return state;
   }
-  return state;
 }