diff --git a/frontend/js/components/polochons/add.js b/frontend/js/components/polochons/add.js
index 42854d2..848dccc 100644
--- a/frontend/js/components/polochons/add.js
+++ b/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))}
/>
);
};
-PolochonAddConnected.propTypes = {
+PolochonAdd.propTypes = {
addPolochon: PropTypes.func,
};
-
-export const PolochonAdd = connect(null, { addPolochon })(PolochonAddConnected);
diff --git a/frontend/js/components/polochons/list.js b/frontend/js/components/polochons/list.js
index 6881fe2..b1c3010 100644
--- a/frontend/js/components/polochons/list.js
+++ b/frontend/js/components/polochons/list.js
@@ -1,25 +1,18 @@
import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { List } from "immutable";
+import { useSelector, useDispatch } from "react-redux";
import { getManagedPolochons } from "../../actions/polochon";
import { Polochon } from "./polochon";
import { PolochonAdd } from "./add";
-const mapStateToProps = (state) => ({
- managedList: state.polochon.get("managed"),
-});
+export const PolochonList = () => {
+ const list = useSelector((state) => state.polochon.get("managed"));
+ const dispatch = useDispatch();
-const mapDispatchToProps = {
- getManagedPolochons,
-};
-
-const PolochonListConnected = ({ getManagedPolochons, managedList }) => {
useEffect(() => {
- getManagedPolochons();
- }, [getManagedPolochons]);
+ dispatch(getManagedPolochons());
+ }, [dispatch]);
return (
@@ -27,7 +20,7 @@ const PolochonListConnected = ({ getManagedPolochons, managedList }) => {
My polochons
- {managedList.map((el, index) => (
+ {list.map((el, index) => (
{
);
};
-PolochonListConnected.propTypes = {
- getManagedPolochons: PropTypes.func,
- managedList: PropTypes.instanceOf(List),
-};
-
-export const PolochonList = connect(
- mapStateToProps,
- mapDispatchToProps
-)(PolochonListConnected);
diff --git a/frontend/js/components/polochons/polochon.js b/frontend/js/components/polochons/polochon.js
index ef13b78..3bbc37d 100644
--- a/frontend/js/components/polochons/polochon.js
+++ b/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 = ({
- id,
- name,
- token,
- url,
- authToken,
- users,
- updatePolochon,
- deletePolochon,
-}) => {
+export const Polochon = ({ id, name, token, url, authToken, users }) => {
const [edit, setEdit] = useState(false);
+ const dispatch = useDispatch();
+
return (
@@ -33,7 +26,7 @@ export const PolochonConnected = ({
/>
deletePolochon(id)}
+ onClick={() => dispatch(deletePolochon(id))}
/>
@@ -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 = ({
);
};
-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
-);
diff --git a/frontend/js/components/polochons/user.js b/frontend/js/components/polochons/user.js
index d7c4ce3..ab52f1c 100644
--- a/frontend/js/components/polochons/user.js
+++ b/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 = () => {
- editPolochonUser({
- polochonId,
- id,
- token,
- activated,
- });
+ dispatch(
+ editPolochonUser({
+ polochonId,
+ id,
+ token,
+ activated,
+ })
+ );
setEdit(false);
};
@@ -67,7 +69,7 @@ export const PolochonUserConnected = ({
);
};
-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
-);