Use notifier events

import ReactDOM from "react-dom";
import React from "react";

interface Context {
  api: {
    notifier: {
      notifySuccess: (message: string) => void;
      notifyError: (message: string) => void;
      notifyWarning: (message: string) => void;
      notifyInfo: (message: string) => void;
    };
  };
}

export default function createExternalRoot(container: HTMLElement) {
  return {
    render(context: Context) {
      const { notifySuccess, notifyError, notifyInfo, notifyWarning } =
        context.api.notifier;

      ReactDOM.render(
        <>
          <button
            onClick={() => {
              notifySuccess("Success message");
            }}
          >
            Show success message
          </button>
          <button
            onClick={() => {
              notifyWarning("Warning message");
            }}
          >
            Show warning message
          </button>
          <button
            onClick={() => {
              notifyInfo("Info message");
            }}
          >
            Show info message
          </button>
          <button
            onClick={() => {
              notifyError("Error message");
            }}
          >
            Show error message
          </button>
        </>,
        container
      );
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}