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 -);