Use redux hooks on alert components

frontend/js/components/alerts/alert.js

@@ -1,35 +1,27 @@
 import React from "react";
-import PropTypes from "prop-types";
 import SweetAlert from "react-bootstrap-sweetalert";
-import { connect } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 
 import { dismissAlert } from "../../actions/alerts";
 
-const mapStateToProps = (state) => ({
-  show: state.alerts.get("show"),
-  title: state.alerts.get("message"),
-  type: state.alerts.get("type"),
-});
-const mapDispatchToProps = { dismissAlert };
+const Alert = () => {
+  const dispatch = useDispatch();
 
-const Alert = (props) => {
-  if (!props.show) {
+  const show = useSelector((state) => state.alerts.get("show"));
+  const title = useSelector((state) => state.alerts.get("message"));
+  const type = useSelector((state) => state.alerts.get("type"));
+
+  if (!show) {
     return null;
   }
 
   return (
     <SweetAlert
-      type={props.type}
-      title={props.title}
-      onConfirm={props.dismissAlert}
+      type={type}
+      title={title}
+      onConfirm={() => dispatch(dismissAlert())}
     />
   );
 };
-Alert.propTypes = {
-  show: PropTypes.bool.isRequired,
-  title: PropTypes.string.isRequired,
-  dismissAlert: PropTypes.func.isRequired,
-  type: PropTypes.string,
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(Alert);
+export default Alert;