decap-cms-core/dist/esm/components/UI/Notifications.js

Decap CMS core application, see decap-cms package for the main distribution.

import { useEffect, useState } from 'react';
// import { translate } from 'react-polyglot';
import { injectStyle } from 'react-toastify/dist/inject-style';
import { toast, ToastContainer } from 'react-toastify';
import { connect, useDispatch } from 'react-redux';
import { useTranslate } from 'react-polyglot';
import { dismissNotification } from '../../actions/notifications';
import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
injectStyle();
function Notifications({
  notifications
}) {
  const t = useTranslate();
  const dispatch = useDispatch();
  const [idMap, setIdMap] = useState({});
  useEffect(() => {
    notifications.filter(notification => !idMap[notification.id]).forEach(notification => {
      const toastId = toast(typeof notification.message == 'string' ? notification.message : t(notification.message.key, {
        ...notification.message
      }), {
        autoClose: notification.dismissAfter,
        type: notification.type
      });
      idMap[notification.id] = toastId;
      setIdMap(idMap);
      if (notification.dismissAfter) {
        setTimeout(() => {
          dispatch(dismissNotification(notification.id));
        }, notification.dismissAfter);
      }
    });
    Object.entries(idMap).forEach(([id, toastId]) => {
      if (!notifications.find(notification => notification.id === id)) {
        toast.dismiss(toastId);
        delete idMap[id];
        setIdMap(idMap);
      }
    });
  }, [notifications]);
  toast.onChange(payload => {
    if (payload.status == 'removed') {
      const id = Object.entries(idMap).find(([, toastId]) => toastId === payload.id)?.[0];
      if (id) {
        dispatch(dismissNotification(id));
      }
    }
  });
  return _jsx(_Fragment, {
    children: _jsx(ToastContainer, {
      position: "top-right",
      theme: "colored",
      className: "notif__container",
      closeOnClick: true,
      draggable: true
    })
  });
}
function mapStateToProps({
  notifications
}) {
  return {
    notifications: notifications.notifications
  };
}
export default connect(mapStateToProps)(Notifications);