56 lines
1.3 KiB
JavaScript

import React, { useEffect } from "react";
import PropTypes from "prop-types";
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 => ({
managedList: state.polochon.get("managed")
});
const mapDispatchToProps = {
getManagedPolochons
};
const PolochonListConnected = ({ getManagedPolochons, managedList }) => {
useEffect(() => {
getManagedPolochons();
}, [getManagedPolochons]);
return (
<div className="row mb-3">
<div className="col-12 col-md-8 offset-md-2">
<h2>My polochons</h2>
<hr />
<span>
{managedList.map((el, index) => (
<Polochon
key={index}
id={el.get("id")}
name={el.get("name")}
token={el.get("token")}
url={el.get("url")}
authToken={el.get("auth_token")}
users={el.get("users")}
/>
))}
</span>
<PolochonAdd />
</div>
</div>
);
};
PolochonListConnected.propTypes = {
getManagedPolochons: PropTypes.func,
managedList: PropTypes.instanceOf(List)
};
export const PolochonList = connect(
mapStateToProps,
mapDispatchToProps
)(PolochonListConnected);