Integrate eventEmitter with react-notification-system

App.js

/*
Base component to hold the Notification. 
We don't need to have Notification in every single React component.
*/

class App extends PureComponent {
  render () {
    return (
               <div>
                 …….
               <Notification />
               </div>     
    )
  }
}

constants.js

/*
Contants which contain all set of event handlers that we have in the system. 
This will be used while emitting and listening to the event. This also avoid hand coding magic string.
*/

export const EVENT_LISTENER = {
  NOTIFY: 'NOTIFY'
}

eventEmitter.js

/*
EventEmitter wrapper which creates an instance and uses the same instance throughout the application (Singleton)
*/

import EventEmitter from 'wolfy87-eventemitter'; //Library
export const ee = new EventEmitter(); 
module.exports = ee; //Instance exported

Notification.js

import React, {PureComponent} from 'react';
import NotificationSystem from 'react-notification-system'; //Library
import ee from 'utils/eventEmitter'; //our custom wrapper on top of EventEmitter
import {EVENT_LISTENER} from 'utils/constants'; //Do centrally define events

/*
React component that will listen for any notification message.
Notification message can originate not only from other react components 
but could also originate from callbacks, utility methods, server side REST calls etc,.

*/
export class Notification extends PureComponent {

  componentDidMount(){
    this._notificationSystem = this.refs.notificationSystem;
    ee.addListener(EVENT_LISTENER.NOTIFY, this.showNotification);
  }

  showNotification = (message) => {
    console.log('got a new notification');
    this._notificationSystem.addNotification(message);
  }

  render(){
      return ( <NotificationSystem ref="notificationSystem" /> );
  }
}

notifier.js

/*
Wrapper on top of notification system.
Helper for common notifications. For complex needs, we can directly call the eventEmitter
*/
import {eventEmitter,EVENTS} from 'utils/eventEmitter';

export const notify = (notification) => {
  eventEmitter.emitEvent(EVENTS.NOTIFY, [notification]);
}

export const success = (title, message) => {
  notify({
    title,
    message,
    level: 'success'
  });
}

export const error = (title, message) => {
  notify({
    title,
    message,
    level: 'error'
  });
}

export const warning = (title, message) => {
  notify({
    title,
    message,
    level: 'warning'
  });
}

export const warning = (title, message) => {
  notify({
    title,
    message,
    level: 'info'
  });
}

SomeOtherComponent.js

/*
Sample compoent that tries to notify users of a success scenario.
*/

import * as notifier from 'utils/notifier';
....

export class SomeOtherComponent extends PureComponent {

      onSubmit = async (props) => {
            ...
            notifier.success('Updated successfully','Your changes will be reviewed before it is published.');

      }
}