Make functional AddUser/CreateGroup/EditUser

This commit is contained in:
Nathan Barber
2021-04-07 11:56:45 -04:00
parent dc4bbc01bb
commit 0f5e86ff06
14 changed files with 325 additions and 357 deletions

View File

@@ -1,7 +1,7 @@
import { connect } from "react-redux";
import { compose, withProps } from "recompose";
import { jhapiRequest } from "../../util/jhapiUtil";
import { AddUser } from "./AddUser.pre";
import AddUser from "./AddUser.pre";
const withUserAPI = withProps((props) => ({
addUsers: (usernames, admin) =>

View File

@@ -1,116 +1,101 @@
import React, { Component } from "react";
import React, { Component, useState } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
export class AddUser extends Component {
static get propTypes() {
return {
addUsers: PropTypes.func,
failRegexEvent: PropTypes.func,
refreshUserData: PropTypes.func,
dispatch: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
}
const AddUser = (props) => {
var [users, setUsers] = useState([]),
[admin, setAdmin] = useState(false);
constructor(props) {
super(props);
this.state = {
users: [],
admin: false,
};
}
var { addUsers, failRegexEvent, refreshUserData, history } = props;
render() {
var { addUsers, failRegexEvent, refreshUserData, dispatch } = this.props;
return (
<>
<div className="container">
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="panel panel-default">
<div className="panel-heading">
<h4>Add Users</h4>
</div>
<div className="panel-body">
<form>
<div className="form-group">
<textarea
className="form-control"
id="add-user-textarea"
rows="3"
placeholder="usernames separated by line"
onBlur={(e) => {
let split_users = e.target.value.split("\n");
this.setState(
Object.assign({}, this.state, {
users: split_users,
})
);
}}
></textarea>
<br></br>
<input
className="form-check-input"
type="checkbox"
value=""
id="admin-check"
onChange={(e) =>
this.setState(
Object.assign({}, this.state, {
admin: e.target.checked,
})
)
}
/>
<span> </span>
<label className="form-check-label">Admin</label>
</div>
</form>
</div>
<div className="panel-footer">
<button id="return" className="btn btn-light">
<Link to="/">Back</Link>
</button>
<span> </span>
<button
id="submit"
className="btn btn-primary"
onClick={() => {
let filtered_users = this.state.users.filter(
(e) =>
e.length > 2 &&
/[!@#$%^&*(),.?":{}|<>]/g.test(e) == false
);
if (filtered_users.length < this.state.users.length) {
let removed_users = this.state.users.filter(
(e) => !filtered_users.includes(e)
);
this.setState(
Object.assign({}, this.state, {
users: filtered_users,
})
);
failRegexEvent();
return (
<>
<div className="container">
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="panel panel-default">
<div className="panel-heading">
<h4>Add Users</h4>
</div>
<div className="panel-body">
<form>
<div className="form-group">
<textarea
className="form-control"
id="add-user-textarea"
rows="3"
placeholder="usernames separated by line"
onBlur={(e) => {
let split_users = e.target.value.split("\n");
setUsers(split_users);
}}
></textarea>
<br></br>
<input
className="form-check-input"
type="checkbox"
value=""
id="admin-check"
onChange={(e) =>
// this.setState(
// Object.assign({}, this.state, {
// admin: e.target.checked,
// })
// )
setAdmin(e.target.checked)
}
/>
<span> </span>
<label className="form-check-label">Admin</label>
</div>
</form>
</div>
<div className="panel-footer">
<button id="return" className="btn btn-light">
<Link to="/">Back</Link>
</button>
<span> </span>
<button
id="submit"
className="btn btn-primary"
onClick={() => {
let filtered_users = users.filter(
(e) =>
e.length > 2 &&
/[!@#$%^&*(),.?":{}|<>]/g.test(e) == false
);
if (filtered_users.length < users.length) {
let removed_users = users.filter(
(e) => !filtered_users.includes(e)
);
setUsers(filtered_users);
failRegexEvent();
}
addUsers(filtered_users, this.state.admin)
.then(() => refreshUserData())
.then(() => this.props.history.push("/"))
.catch((err) => console.log(err));
}}
>
Add Users
</button>
</div>
addUsers(filtered_users, admin)
.then(() => refreshUserData())
.then(() => history.push("/"))
.catch((err) => console.log(err));
}}
>
Add Users
</button>
</div>
</div>
</div>
</div>
</>
);
}
}
</div>
</>
);
};
AddUser.propTypes = {
addUsers: PropTypes.func,
failRegexEvent: PropTypes.func,
refreshUserData: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
export default AddUser;