83 lines
2.0 KiB
JavaScript

import React, { useState, useEffect } from "react"
import PropTypes from "prop-types"
import { connect } from "react-redux"
import { editPolochonUser } from "../../actions/polochon"
import Toggle from "react-bootstrap-toggle";
import { FormModal } from "../forms/modal"
import { FormInput } from "../forms/input"
export const PolochonUserConnected = ({
polochonId,
id,
name,
initialToken,
initialActivated,
editPolochonUser,
}) => {
const [edit, setEdit] = useState(false);
const [token, setToken] = useState(initialToken);
const [activated, setActivated] = useState(initialActivated);
useEffect(() => {
setActivated(initialActivated);
setToken(initialToken);
}, [initialActivated, initialToken])
const handleSubmit = () => {
editPolochonUser({
polochonId,
id,
token,
activated,
});
setEdit(false);
}
return (
<tr>
<td>
{name}
</td>
<td>
{activated ? "Activated" : "Not activated"}
</td>
<td>
<i className="fa fa-edit ml-2" onClick={() => setEdit(true)} />
<FormModal
show={edit}
setShow={setEdit}
title="Edit polochon's user"
icon="edit"
handleSubmit={handleSubmit}
>
<FormInput label="Token" value={token} updateValue={setToken} />
<div className="form-group">
<label>Activated</label>
<Toggle
className="pull-right"
on="yes"
off="no"
active={activated}
offstyle="info"
handlestyle="secondary"
onClick={() => setActivated(!activated)} />
</div>
</FormModal>
</td>
</tr>
)
}
PolochonUserConnected.propTypes = {
polochonId: PropTypes.string,
id: PropTypes.string,
name: PropTypes.string,
initialToken: PropTypes.string,
initialActivated: PropTypes.bool,
editPolochonUser: PropTypes.func,
};
export const PolochonUser = connect(null, {editPolochonUser})(PolochonUserConnected);