Add React Admin and modify AdminHandler

jsx/src/components/AddUser/AddUser.js

@@ -0,0 +1,21 @@
+import { connect } from "react-redux";
+import { compose, withProps } from "recompose";
+import { jhapiRequest } from "../../util/jhapiUtil";
+import { AddUser } from "./AddUser.pre";
+
+const withUserAPI = withProps((props) => ({
+  addUsers: (usernames, admin) =>
+    jhapiRequest("/users", "POST", { usernames, admin }),
+  failRegexEvent: () =>
+    alert(
+      "Removed " +
+        JSON.stringify(removed_users) +
+        " for either containing special characters or being too short."
+    ),
+  refreshUserData: () =>
+    jhapiRequest("/users", "GET")
+      .then((data) => data.json())
+      .then((data) => props.dispatch({ type: "USER_DATA", value: data })),
+}));
+
+export default compose(connect(), withUserAPI)(AddUser);

jsx/src/components/AddUser/AddUser.pre.jsx

@@ -0,0 +1,116 @@
+import React, { Component } 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,
+      }),
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [],
+      admin: false,
+    };
+  }
+
+  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();
+                      }
+
+                      addUsers(filtered_users, this.state.admin)
+                        .then(() => refreshUserData())
+                        .then(() => this.props.history.push("/"))
+                        .catch((err) => console.log(err));
+                    }}
+                  >
+                    Add Users
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}

jsx/src/components/AddUser/AddUser.test.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Enzyme, { shallow } from "enzyme";
+import { AddUser } from "./AddUser.pre";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("AddUser Component: ", () => {
+  var mockAsync = () =>
+    jest.fn().mockImplementation(() => Promise.resolve({ key: "value" }));
+
+  var addUserJsx = (callbackSpy) => (
+    <AddUser
+      addUsers={callbackSpy}
+      failRegexEvent={callbackSpy}
+      refreshUserData={callbackSpy}
+      history={{ push: (a) => {} }}
+    />
+  );
+
+  it("Updates state.users on textbox blur", () => {
+    let component = shallow(addUserJsx(mockAsync())),
+      textarea = component.find("textarea");
+    textarea.simulate("blur", { target: { value: "foo" } });
+    expect(JSON.stringify(component.state("users"))).toBe('["foo"]');
+  });
+
+  it("Can separate newline spaced names into an array", () => {
+    let component = shallow(addUserJsx(mockAsync())),
+      textarea = component.find("textarea");
+    textarea.simulate("blur", { target: { value: "foo\nbar\nsoforth" } });
+    expect(JSON.stringify(component.state("users"))).toBe(
+      '["foo","bar","soforth"]'
+    );
+  });
+
+  it("Deliminates names with special / less than 3 characters", () => {
+    let component = shallow(addUserJsx(mockAsync())),
+      textarea = component.find("textarea"),
+      submit = component.find("#submit");
+    textarea.simulate("blur", {
+      target: { value: "foo\nbar\nb%%%\n$andy\nhalfdecent" },
+    });
+    submit.simulate("click");
+    expect(JSON.stringify(component.state("users"))).toBe(
+      '["foo","bar","halfdecent"]'
+    );
+  });
+
+  it("Recognizes admin user selection", () => {
+    let component = shallow(addUserJsx(mockAsync())),
+      admin = component.find("#admin-check");
+    admin.simulate("change", { target: { checked: true } });
+    expect(component.state("admin")).toBe(true);
+  });
+});