Use redux hooks on polochon components

frontend/js/components/polochons/add.js

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { addPolochon } from "../../actions/polochon";
 
 import { PolochonEdit } from "./edit";
 
-export const PolochonAddConnected = ({ addPolochon }) => {
+export const PolochonAdd = () => {
+  const dispatch = useDispatch();
   const [modal, setModal] = useState(false);
 
   return (
@@ -21,13 +22,11 @@ export const PolochonAddConnected = ({ addPolochon }) => {
         icon="plus"
         show={modal}
         setShow={setModal}
-        update={addPolochon}
+        update={(params) => dispatch(addPolochon(params))}
       />
     </React.Fragment>
   );
 };
-PolochonAddConnected.propTypes = {
+PolochonAdd.propTypes = {
   addPolochon: PropTypes.func,
 };
-
-export const PolochonAdd = connect(null, { addPolochon })(PolochonAddConnected);

frontend/js/components/polochons/list.js

@@ -1,25 +1,18 @@
 import React, { useEffect } from "react";
-import PropTypes from "prop-types";
+import { useSelector, useDispatch } from "react-redux";
-import { connect } from "react-redux";
-import { List } from "immutable";
 
 import { getManagedPolochons } from "../../actions/polochon";
 
 import { Polochon } from "./polochon";
 import { PolochonAdd } from "./add";
 
-const mapStateToProps = (state) => ({
+export const PolochonList = () => {
-  managedList: state.polochon.get("managed"),
+  const list = useSelector((state) => state.polochon.get("managed"));
-});
+  const dispatch = useDispatch();
 
-const mapDispatchToProps = {
-  getManagedPolochons,
-};
-
-const PolochonListConnected = ({ getManagedPolochons, managedList }) => {
   useEffect(() => {
-    getManagedPolochons();
+    dispatch(getManagedPolochons());
-  }, [getManagedPolochons]);
+  }, [dispatch]);
 
   return (
     <div className="row mb-3">
@@ -27,7 +20,7 @@ const PolochonListConnected = ({ getManagedPolochons, managedList }) => {
         <h2>My polochons</h2>
         <hr />
         <span>
-          {managedList.map((el, index) => (
+          {list.map((el, index) => (
             <Polochon
               key={index}
               id={el.get("id")}
@@ -44,12 +37,3 @@ const PolochonListConnected = ({ getManagedPolochons, managedList }) => {
     </div>
   );
 };
-PolochonListConnected.propTypes = {
-  getManagedPolochons: PropTypes.func,
-  managedList: PropTypes.instanceOf(List),
-};
-
-export const PolochonList = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(PolochonListConnected);

frontend/js/components/polochons/polochon.js

@@ -1,25 +1,18 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { List } from "immutable";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { PolochonUsers } from "./users";
 import { PolochonEdit } from "./edit";
 
 import { updatePolochon, deletePolochon } from "../../actions/polochon";
 
-export const PolochonConnected = ({
+export const Polochon = ({ id, name, token, url, authToken, users }) => {
-  id,
-  name,
-  token,
-  url,
-  authToken,
-  users,
-  updatePolochon,
-  deletePolochon,
-}) => {
   const [edit, setEdit] = useState(false);
 
+  const dispatch = useDispatch();
+
   return (
     <React.Fragment>
       <div className="card mb-2">
@@ -33,7 +26,7 @@ export const PolochonConnected = ({
             />
             <i
               className="fa fa-trash clickable"
-              onClick={() => deletePolochon(id)}
+              onClick={() => dispatch(deletePolochon(id))}
             />
           </span>
         </div>
@@ -49,7 +42,7 @@ export const PolochonConnected = ({
         title="Polochon config"
         show={edit}
         setShow={setEdit}
-        update={updatePolochon}
+        update={(params) => dispatch(updatePolochon(params))}
         id={id}
         initialName={name}
         initialUrl={url}
@@ -58,17 +51,11 @@ export const PolochonConnected = ({
     </React.Fragment>
   );
 };
-PolochonConnected.propTypes = {
+Polochon.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string,
   token: PropTypes.string,
   url: PropTypes.string,
   authToken: PropTypes.string,
   users: PropTypes.instanceOf(List),
-  updatePolochon: PropTypes.func,
-  deletePolochon: PropTypes.func,
 };
-
-export const Polochon = connect(null, { updatePolochon, deletePolochon })(
-  PolochonConnected
-);

frontend/js/components/polochons/user.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { editPolochonUser } from "../../actions/polochon";
 
@@ -9,14 +9,14 @@ import Toggle from "react-bootstrap-toggle";
 import { FormModal } from "../forms/modal";
 import { FormInput } from "../forms/input";
 
-export const PolochonUserConnected = ({
+export const PolochonUser = ({
   polochonId,
   id,
   name,
   initialToken,
   initialActivated,
-  editPolochonUser,
 }) => {
+  const dispatch = useDispatch();
   const [edit, setEdit] = useState(false);
   const [token, setToken] = useState(initialToken);
   const [activated, setActivated] = useState(initialActivated);
@@ -27,12 +27,14 @@ export const PolochonUserConnected = ({
   }, [initialActivated, initialToken]);
 
   const handleSubmit = () => {
+    dispatch(
       editPolochonUser({
         polochonId,
         id,
         token,
         activated,
-    });
+      })
+    );
     setEdit(false);
   };
 
@@ -67,7 +69,7 @@ export const PolochonUserConnected = ({
     </tr>
   );
 };
-PolochonUserConnected.propTypes = {
+PolochonUser.propTypes = {
   polochonId: PropTypes.string,
   id: PropTypes.string,
   name: PropTypes.string,
@@ -75,7 +77,3 @@ PolochonUserConnected.propTypes = {
   initialActivated: PropTypes.bool,
   editPolochonUser: PropTypes.func,
 };
-
-export const PolochonUser = connect(null, { editPolochonUser })(
-  PolochonUserConnected
-);