84 lines
2.1 KiB
JavaScript

import React, { useState } from "react"
import PropTypes from "prop-types"
import { List } from "immutable"
import { connect } from "react-redux"
import { PolochonUser } from "./user"
import { PolochonEdit } from "./edit"
import { updatePolochon, deletePolochon } from "../../actions/polochon"
export const PolochonConnected = ({
id,
name,
token,
url,
authToken,
users,
updatePolochon,
deletePolochon,
}) => {
const [edit, setEdit] = useState(false);
return (
<React.Fragment>
<div className="card mb-2">
<div className="card-header">
{name !== "" ? name : "-"}
<small className="ml-1">
({url !== "" ? url : "-"})
</small>
<span className="pull-right">
<i
className="fa fa-edit mr-3 clickable"
onClick={() => setEdit(true)}
/>
<i
className="fa fa-trash clickable"
onClick={() => deletePolochon(id)}
/>
</span>
</div>
<div className="card-body">
<p className="card-text">ID: {id}</p>
<p className="card-text">Egress token: {token}</p>
<p className="card-text">Ingress token: {authToken}</p>
<p className="card-text">
Users:
{users.map((user, index) => (
<PolochonUser
key={index}
id={user.get("id")}
name={user.get("name")}
/>
))}
</p>
</div>
</div>
<PolochonEdit
show={edit}
setShow={setEdit}
update={updatePolochon}
id={id}
initialName={name}
initialUrl={url}
initialToken={token}
initialAuthToken={authToken}
/>
</React.Fragment>
)
}
PolochonConnected.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);