diff --git a/frontend/js/components/notifications/notification.js b/frontend/js/components/notifications/notification.js index 427c123..0872ce5 100644 --- a/frontend/js/components/notifications/notification.js +++ b/frontend/js/components/notifications/notification.js @@ -1,12 +1,12 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; -import { connect } from "react-redux"; +import { useDispatch } from "react-redux"; import { Toast } from "react-bootstrap"; import { removeNotification } from "../../actions/notifications"; -const NotificationConnected = ({ +export const Notification = ({ id, icon, title, @@ -14,13 +14,13 @@ const NotificationConnected = ({ imageUrl, autohide, delay, - removeNotification, }) => { + const dispatch = useDispatch(); const [show, setShow] = useState(true); const hide = () => { setShow(false); - setTimeout(() => removeNotification(id), 200); + setTimeout(() => dispatch(removeNotification(id)), 200); }; return ( @@ -38,7 +38,7 @@ const NotificationConnected = ({ ); }; -NotificationConnected.propTypes = { +Notification.propTypes = { id: PropTypes.string, icon: PropTypes.string, title: PropTypes.string, @@ -46,10 +46,9 @@ NotificationConnected.propTypes = { imageUrl: PropTypes.string, autohide: PropTypes.bool, delay: PropTypes.number, - removeNotification: PropTypes.func, }; -NotificationConnected.defaultProps = { +Notification.defaultProps = { autohide: false, delay: 5000, icon: "", @@ -57,7 +56,3 @@ NotificationConnected.defaultProps = { title: "Info", message: "", }; - -export const Notification = connect(null, { removeNotification })( - NotificationConnected -); diff --git a/frontend/js/components/notifications/notifications.js b/frontend/js/components/notifications/notifications.js index ceac8dd..285b234 100644 --- a/frontend/js/components/notifications/notifications.js +++ b/frontend/js/components/notifications/notifications.js @@ -1,11 +1,12 @@ import React from "react"; import PropTypes from "prop-types"; import { List } from "immutable"; -import { connect } from "react-redux"; +import { useSelector } from "react-redux"; import { Notification } from "./notification"; -const NotificationsConnected = ({ notifications }) => { +export const Notifications = () => { + const notifications = useSelector((state) => state.notifications); return (