Skip to content

edit notification feature added #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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
```


Expand Down
32 changes: 29 additions & 3 deletions example/src/components/container.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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) {
Expand All @@ -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>
);
Expand Down
6 changes: 5 additions & 1 deletion src/actions.js
Original file line number Diff line number Diff line change
@@ -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
// {
Expand Down Expand Up @@ -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 };
}
1 change: 1 addition & 0 deletions src/const.js
Original file line number Diff line number Diff line change
@@ -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';
71 changes: 53 additions & 18 deletions src/notifications.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}

Expand Down Expand Up @@ -71,3 +105,4 @@ Object.keys(actions).forEach(key => {
Notifications.reducer = reducer;

module.exports = Notifications;
// export default Notifications;
9 changes: 7 additions & 2 deletions src/reducer.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
}