Use redux hooks on notification components

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 = ({
     </Toast>
   );
 };
-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
-);

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 (
     <div className="notifications">
       {notifications.map((el) => (
@@ -23,12 +24,6 @@ const NotificationsConnected = ({ notifications }) => {
     </div>
   );
 };
-NotificationsConnected.propTypes = {
+Notifications.propTypes = {
   notifications: PropTypes.instanceOf(List),
 };
-
-const mapStateToProps = (state) => ({
-  notifications: state.notifications,
-});
-
-export const Notifications = connect(mapStateToProps)(NotificationsConnected);