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 { CreateGroup } from "./CreateGroup.pre";
import CreateGroup from "./CreateGroup.pre";
const withUserAPI = withProps((props) => ({
createGroup: (groupName) => jhapiRequest("/groups/" + groupName, "POST"),

View File

@@ -1,77 +1,69 @@
import React, { Component } from "react";
import React, { Component, useState } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import Multiselect from "../Multiselect/Multiselect";
export class CreateGroup extends Component {
static get propTypes() {
return {
createGroup: PropTypes.func,
refreshGroupsData: PropTypes.func,
failRegexEvent: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
}
const CreateGroup = (props) => {
var [groupName, setGroupName] = useState("");
constructor(props) {
super(props);
this.state = {
groupName: "",
};
}
var { createGroup, refreshGroupsData, history } = props;
render() {
var { createGroup, refreshGroupsData } = 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>Create Group</h4>
</div>
<div className="panel-body">
<div className="input-group">
<input
className="group-name-input"
type="text"
value={this.state.groupName}
id="group-name"
placeholder="group name..."
onChange={(e) => {
this.setState({ groupName: e.target.value });
}}
></input>
</div>
</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 groupName = this.state.groupName;
createGroup(groupName)
.then(refreshGroupsData())
.then(this.props.history.push("/groups"))
.catch((err) => console.log(err));
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>Create Group</h4>
</div>
<div className="panel-body">
<div className="input-group">
<input
className="group-name-input"
type="text"
value={groupName}
id="group-name"
placeholder="group name..."
onChange={(e) => {
setGroupName(e.target.value);
}}
>
Add Users
</button>
></input>
</div>
</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 groupName = groupName;
createGroup(groupName)
.then(refreshGroupsData())
.then(history.push("/groups"))
.catch((err) => console.log(err));
}}
>
Add Users
</button>
</div>
</div>
</div>
</div>
</>
);
}
}
</div>
</>
);
};
CreateGroup.propTypes = {
createGroup: PropTypes.func,
refreshGroupsData: PropTypes.func,
failRegexEvent: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
export default CreateGroup;