JSFiddle - React, Tailwind, and code Playground

by Ajey

Babel + JSX

// 1) Create pubsub - publish/subscribe/unsubscribe
// 2) Resuable 

// pubsub.publish(eventName, data);
// pubsub.subscribe(eventName, function);
// pubsub.unsubscribe(eventName);

// multiiple sub

// pubsub.subscribe("addToCart", sendEvent);
// pubsub.subscribe("addToCart", pushEvent);
// pubsub.unsubscribe("addToCart", pushEvent);

class PubSub {
	constructor() {
		/* if(this.instance) {
		  return this.instance;
		} else {
		       this.instance = new PubSub();
		} */
		this.subscribers = new Map();
	}

	publish(eventName, data) {
		let arrayOfFunc = this.subscribers.get(eventName);
		if(arrayOfFunc.length > 0) {
			arrayOfFunc.forEach((func) => {
				func.apply(this, [data]);
        // func(data);
			});
		} else {
			console.log("No subscribers found for the publisher - ", eventName);
		}	
	}

	subscribe(eventName, callback) {
		if(typeof callback !== "function") {
			console.error("2nd parameter to subscribe should be a function");
		} else {
			// this.subscribers.set(eventName, callback);
			let arr = this.subscribers.get(eventName);

			if(arr && arr.length > 0) {
				this.subscribers.set(eventName, arr.push(callback));
			} else {
				this.subscribers.set(eventName, [callback]);
			}
		}
	}

	// addToCart = []
	unsubscribe(eventName, callbackName) {
		if(eventName) {
			console.error("No eventName ", eventName , " found");
		} else {
			// this.subscribers.remove(eventName);	
			let arrayOfFunc = this.subscribers.get(eventName);
			let filteredArrOfFunc = arrayOfFunc.filter((funcName) => {
				return funcName !== callbackName
			});

			if(filteredArrOfFunc.length > 0) {
				this.subscribers.set(eventName, filteredArrOfFunc);
			} else {
				this.subscribers.remove(eventName);	
			}
		}
	}
}

const pubSub = new PubSub();
// console.log(pubSub);
pubSub.subscribe("test", (data) => {
  console.log(data);
});
setTimeout(() => {
	pubSub.publish("test", "This is a test pubsub");
}, 5000);