eventBus.ts

import * as React from 'react';
import mitt from 'mitt';

type IEventName =
  | 'CommentCreated'
  | 'CommentDestroy'

type IEventPaload = any;

type IEventHandler = (payload: IEventPaload) => void;

interface IEmitter {
  emit: (eventName: IEventName, payload: IEventPaload) => void;
  on: (eventName: IEventName, handler: IEventHandler) => void;
  off: (eventName: IEventName, handler: IEventHandler) => void;
}

const Context = React.createContext<IEmitter>({
  emit: () => undefined,
  on: () => undefined,
  off: () => undefined,
});
interface IProps {
  children: React.ReactNode;
}
function createEmitter(): IEmitter {
  return mitt() as any;
}

export function EvenBusProvider({ children }: IProps) {
  const emitter = React.useMemo(createEmitter, []);
  return <Context.Provider value={emitter}>{children}</Context.Provider>;
}

export function useEventEmit() {
  return React.useContext(Context).emit;
}

export function useEventListener(
  eventName: IEventName,
  handler: IEventHandler,
) {
  const emitter = React.useContext(Context);
  React.useEffect(() => {
    emitter.on(eventName, handler);
    return () => emitter.off(eventName, handler);
  }, [eventName, handler]);
}