105 lines
3.1 KiB
JavaScript

import React, { useState } from "react"
import PropTypes from "prop-types"
import { connect } from "react-redux"
import { List } from "immutable"
import { updateUser } from "../../actions/admins"
import Toggle from "react-bootstrap-toggle";
import { PolochonSelect } from "../polochons/select"
import { FormModal } from "../forms/modal"
import { FormInput } from "../forms/input"
const UserEditConnect = ({
id,
admin: initAdmin,
activated: initActivated,
polochonToken,
polochonId: initPolochonId,
polochonActivated: initPolochonActivated,
updateUser,
publicPolochons,
}) => {
const [modal, setModal] = useState(false);
const [admin, setAdmin] = useState(initAdmin);
const [activated, setActivated] = useState(initActivated);
const [token, setToken] = useState(polochonToken);
const [polochonId, setPolochonId] = useState(initPolochonId);
const [polochonActivated, setPolochonActivated] = useState(initPolochonActivated);
const [password, setPassword] = useState("");
const handleSubmit = function(e) {
if (e) { e.preventDefault(); }
updateUser({
userId: id,
polochonToken: token,
admin,
activated,
polochonId,
polochonActivated,
password,
});
setModal(false);
};
return (
<span>
<i
className="fa fa-pencil clickable"
onClick={() => setModal(true)} />
<FormModal
show={modal}
setShow={setModal}
title="Edit user"
icon="edit"
handleSubmit={handleSubmit}
>
<div className="form-group">
<label>Account status</label>
<Toggle className="pull-right" on="Activated" off="Deactivated" active={activated}
offstyle="danger" handlestyle="secondary" onClick={() => setActivated(!activated)}
/>
</div>
<div className="form-group">
<label>Admin status</label>
<Toggle className="pull-right" on="Admin" off="User" active={admin}
offstyle="info" handlestyle="secondary" onClick={() => setAdmin(!admin)} />
</div>
<FormInput label="Password" value={password} updateValue={setPassword} />
<PolochonSelect value={polochonId} changeValue={setPolochonId} polochonList={publicPolochons} />
<FormInput label="Polochon Token" value={token} updateValue={setToken} />
<div className="form-group">
<label>Polochon activated</label>
<Toggle className="pull-right" on="Activated" off="Deactivated" active={polochonActivated}
offstyle="danger" handlestyle="secondary" onClick={() => setPolochonActivated(!polochonActivated)}
/>
</div>
</FormModal>
</span>
);
}
UserEditConnect.propTypes = {
id: PropTypes.string,
activated: PropTypes.bool,
admin: PropTypes.bool,
data: PropTypes.object,
updateUser: PropTypes.func,
polochonToken: PropTypes.string,
polochonId: PropTypes.string,
polochonActivated: PropTypes.bool,
publicPolochons: PropTypes.instanceOf(List),
};
const mapStateToProps = (state) => ({
publicPolochons: state.polochon.get("public"),
});
export const UserEdit = connect(mapStateToProps, {updateUser})(UserEditConnect);