From 6cfee5ea743a25a3186a2732a5b08197bd825d96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Fri, 3 Apr 2020 16:02:39 +0200
Subject: [PATCH] Use redux hooks on alert components

---
 frontend/js/components/alerts/alert.js | 32 ++++++++++----------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/frontend/js/components/alerts/alert.js b/frontend/js/components/alerts/alert.js
index 9655a5c..dbc33d9 100644
--- a/frontend/js/components/alerts/alert.js
+++ b/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;