45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
import { Toast } from "react-bootstrap";
|
|
|
|
import { removeNotification } from "../../actions/notifications";
|
|
|
|
export const Notification = ({ id }) => {
|
|
const dispatch = useDispatch();
|
|
const notification = useSelector((state) => state.notifications.get(id));
|
|
|
|
const [show, setShow] = useState(true);
|
|
|
|
const hide = () => {
|
|
setShow(false);
|
|
dispatch(removeNotification(id));
|
|
};
|
|
|
|
return (
|
|
<Toast
|
|
show={show}
|
|
onClose={hide}
|
|
autohide={notification.autohide || true}
|
|
delay={notification.delay || 10000}
|
|
>
|
|
<Toast.Header>
|
|
{notification.icon && (
|
|
<i className={`fa fa-${notification.icon} mr-2`} />
|
|
)}
|
|
<strong className="mr-auto">{notification.title}</strong>
|
|
</Toast.Header>
|
|
<Toast.Body>
|
|
{notification.message !== "" && <span>{notification.message}</span>}
|
|
{notification.imageUrl !== "" && (
|
|
<img src={notification.imageUrl} className="img-fluid mt-2 mr-auto" />
|
|
)}
|
|
</Toast.Body>
|
|
</Toast>
|
|
);
|
|
};
|
|
Notification.propTypes = {
|
|
id: PropTypes.string.isRequired,
|
|
};
|