Convert redux state access to hooks

2025-10-10 03:23:04 +00:00 · 2021-04-08 17:21:02 -04:00
parent c7dcb4db85
commit 21f4988f24
14 changed files with 4106 additions and 4891 deletions
--- a/jsx/src/components/AddUser/AddUser.jsx
+++ b/jsx/src/components/AddUser/AddUser.jsx
@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { compose, withProps } from "recompose";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { jhapiRequest } from "../../util/jhapiUtil";
+
+const AddUser = (props) => {
+  var [users, setUsers] = useState([]),
+    [admin, setAdmin] = useState(false);
+
+  var dispatch = useDispatch();
+
+  var dispatchUserData = (data) => {
+    dispatch({
+      type: "USER_DATA",
+      value: data,
+    });
+  };
+
+  var { addUsers, failRegexEvent, refreshUserData, history } = 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");
+                        setUsers(split_users);
+                      }}
+                    ></textarea>
+                    <br></br>
+                    <input
+                      className="form-check-input"
+                      type="checkbox"
+                      value=""
+                      id="admin-check"
+                      onChange={(e) => 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, admin)
+                      .then(
+                        refreshUserData()
+                          .then((data) => dispatchUserData(data))
+                          .catch((err) => console.log(err))
+                      )
+                      .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,
+  }),
+};
+
+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()),
+}));
+
+export default compose(withUserAPI)(AddUser);