115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import React, { useState, useEffect } from "react"
|
|
import PropTypes from "prop-types"
|
|
import { connect } from "react-redux"
|
|
import Loader from "../loader/loader"
|
|
import { List } from "immutable"
|
|
|
|
import { getUserInfos, updateUser } from "../../actions/users"
|
|
import { getPolochons } from "../../actions/polochon"
|
|
|
|
import { PolochonSelect } from "../polochons/select"
|
|
|
|
const mapStateToProps = (state) => ({
|
|
loading: state.userStore.get("loading"),
|
|
publicPolochons: state.polochon.get("public"),
|
|
polochonId: state.userStore.get("polochonId"),
|
|
polochonActivated: state.userStore.get("polochonActivated"),
|
|
});
|
|
|
|
const mapDispatchToProps = {
|
|
updateUser, getPolochons, getUserInfos,
|
|
}
|
|
|
|
const UserEditConnect = ({
|
|
loading,
|
|
polochonId,
|
|
polochonActivated,
|
|
updateUser,
|
|
getPolochons,
|
|
getUserInfos,
|
|
publicPolochons,
|
|
}) => {
|
|
const [id, setId] = useState(polochonId);
|
|
const [password, setPassword] = useState("");
|
|
const [passwordConfirm, setPasswordConfirm] = useState("");
|
|
|
|
useEffect(() => {
|
|
getPolochons();
|
|
getUserInfos();
|
|
}, [getPolochons, getUserInfos])
|
|
|
|
useEffect(() => {
|
|
setId(polochonId);
|
|
}, [polochonId])
|
|
|
|
const handleSubmit = (ev) => {
|
|
ev.preventDefault();
|
|
updateUser({
|
|
"password": password,
|
|
"password_confirm": passwordConfirm,
|
|
"polochon_id": id,
|
|
});
|
|
}
|
|
|
|
if (loading) { return (<Loader />) }
|
|
|
|
return (
|
|
<div className="row mb-3">
|
|
<div className="col-12 col-md-8 offset-md-2">
|
|
<h2>Edit user</h2>
|
|
<hr />
|
|
<form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
|
|
<div className="form-group">
|
|
<label className="control-label">
|
|
Polochon
|
|
{polochonActivated ||
|
|
<span className="ml-1 text text-primary">(Needs activation from admin)</span>
|
|
}
|
|
</label>
|
|
<PolochonSelect value={id} changeValue={setId} polochonList={publicPolochons} />
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div className="form-group">
|
|
<label className="control-label">Password</label>
|
|
<input
|
|
className="form-control"
|
|
type="password"
|
|
autoComplete="off"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="control-label">Confirm Password</label>
|
|
<input
|
|
className="form-control"
|
|
type="password"
|
|
autoComplete="off"
|
|
value={passwordConfirm}
|
|
onChange={(e) => setPasswordConfirm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="submit" className="btn btn-primary pull-right" value="Update"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
UserEditConnect.propTypes = {
|
|
loading: PropTypes.bool.isRequired,
|
|
polochonId: PropTypes.string,
|
|
polochonActivated: PropTypes.bool,
|
|
updateUser: PropTypes.func,
|
|
getPolochons: PropTypes.func,
|
|
getUserInfos: PropTypes.func,
|
|
publicPolochons: PropTypes.instanceOf(List),
|
|
};
|
|
|
|
export const UserEdit = connect(mapStateToProps, mapDispatchToProps)(UserEditConnect);
|