Add create group / delete group functionality

jsx/src/components/CreateGroup/CreateGroup.js

@@ -0,0 +1,20 @@
+import { connect } from "react-redux";
+import { compose, withProps } from "recompose";
+import { jhapiRequest } from "../../util/jhapiUtil";
+import { CreateGroup } from "./CreateGroup.pre";
+
+const withUserAPI = withProps((props) => ({
+  createGroup: (groupName) => jhapiRequest("/groups/" + groupName, "POST"),
+  failRegexEvent: () =>
+    alert(
+      "Removed " +
+        JSON.stringify(removed_users) +
+        " for either containing special characters or being too short."
+    ),
+  refreshGroupsData: () =>
+    jhapiRequest("/groups", "GET")
+      .then((data) => data.json())
+      .then((data) => props.dispatch({ type: "GROUPS_DATA", value: data })),
+}));
+
+export default compose(connect(), withUserAPI)(CreateGroup);

jsx/src/components/CreateGroup/CreateGroup.pre.jsx

@@ -0,0 +1,77 @@
+import React, { Component } 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,
+      }),
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupName: "",
+    };
+  }
+
+  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));
+                    }}
+                  >
+                    Add Users
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}

jsx/src/components/GroupEdit/GroupEdit.js

@@ -8,6 +8,12 @@ const withGroupsAPI = withProps((props) => ({
     jhapiRequest("/groups/" + groupname + "/users", "POST", { users }),
   removeFromGroup: (users, groupname) =>
     jhapiRequest("/groups/" + groupname + "/users", "DELETE", { users }),
+  deleteGroup: (name) => 
+    jhapiRequest("/groups/" + name, "DELETE"),
+  refreshGroupsData: () =>
+    jhapiRequest("/groups", "GET")
+      .then((data) => data.json())
+      .then((data) => props.dispatch({ type: "GROUPS_DATA", value: data })),
 }));
 
 export default compose(connect(), withGroupsAPI)(GroupEdit);

jsx/src/components/GroupEdit/GroupEdit.pre.jsx

@@ -18,6 +18,7 @@ export class GroupEdit extends Component {
       }),
       addToGroup: PropTypes.func,
       removeFromGroup: PropTypes.func,
+      deleteGroup: PropTypes.func
     };
   }
 
@@ -39,7 +40,7 @@ export class GroupEdit extends Component {
 
     var { group_data, user_data, callback } = this.props.location.state;
 
-    var { addToGroup, removeFromGroup } = this.props;
+    var { addToGroup, removeFromGroup, deleteGroup, refreshGroupsData } = this.props;
 
     if (!(group_data && user_data)) return <div></div>;
 
@@ -103,6 +104,13 @@ export class GroupEdit extends Component {
             >
               Apply
             </button>
+            <button className="btn btn-danger" style={{ float: "right" }} onClick={() => {
+              var groupName = group_data.name
+              deleteGroup(groupName)
+                .then(refreshGroupsData())
+                .then(this.props.history.push("/groups"))
+                .catch(err => console.log(err))
+            }}>Delete Group</button>
             <br></br>
             <br></br>
           </div>

jsx/src/components/Groups/Groups.js

@@ -21,7 +21,7 @@ const withGroupsAPI = withProps((props) => ({
     jhapiRequest("/groups/" + name + "/users", "DELETE", {
       body: { users: removed_users },
       json: true,
-    }),
+    })
 }));
 
 export default compose(

jsx/src/components/Groups/Groups.pre.jsx

@@ -37,32 +37,43 @@ export class Groups extends Component {
                 <h4>Groups</h4>
               </div>
               <div className="panel-body">
-                {groups_data.map((e, i) => (
-                  <div key={"group-edit" + i} className="group-edit-link">
-                    <h4>
-                      <Link
-                        to={{
-                          pathname: "/group-edit",
-                          state: {
-                            group_data: e,
-                            user_data: user_data,
-                            callback: () => {
-                              refreshGroupsData();
-                              refreshUserData();
+                {groups_data.length > 0 ? (
+                  groups_data.map((e, i) => (
+                    <div key={"group-edit" + i} className="group-edit-link">
+                      <h4>
+                        <Link
+                          to={{
+                            pathname: "/group-edit",
+                            state: {
+                              group_data: e,
+                              user_data: user_data,
+                              callback: () => {
+                                refreshGroupsData();
+                                refreshUserData();
+                              },
                             },
-                          },
-                        }}
-                      >
-                        {e.name}
-                      </Link>
-                    </h4>
+                          }}
+                        >
+                          {e.name}
+                        </Link>
+                      </h4>
+                    </div>
+                  ))
+                ) : (
+                  <div>
+                    <h4>no groups created...</h4>
                   </div>
-                ))}
+                )}
               </div>
               <div className="panel-footer">
-                <div className="btn btn-light">
+                <button className="btn btn-light adjacent-span-spacing">
                   <Link to="/">Back</Link>
-                </div>
+                </button>
+                <button className="btn btn-primary adjacent-span-spacing" onClick={() => {
+                  this.props.history.push("/create-group")
+                }}>
+                  New Group
+                </button>
               </div>
             </div>
           </div>