jupyterhub/jsx/src/components/EditUser/EditUser.jsx

import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { compose, withProps } from "recompose";
import PropTypes from "prop-types";

import { Link } from "react-router-dom";

import { jhapiRequest } from "../../util/jhapiUtil";

const EditUser = (props) => {
  var dispatch = useDispatch();

  var dispatchUserData = (data) => {
    dispatch({
      type: "USER_DATA",
      value: data,
    });
  };

  var {
    editUser,
    deleteUser,
    failRegexEvent,
    noChangeEvent,
    refreshUserData,
    history,
  } = props;

  if (props.location.state == undefined) {
    props.history.push("/");
    return <></>;
  }

  var { username, has_admin } = props.location.state;

  var [updatedUsername, setUpdatedUsername] = useState(""),
    [admin, setAdmin] = useState(has_admin);

  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>Editing user {username}</h4>
              </div>
              <div className="panel-body">
                <form>
                  <div className="form-group">
                    <textarea
                      className="form-control"
                      id="exampleFormControlTextarea1"
                      rows="3"
                      placeholder="updated username"
                      onBlur={(e) => {
                        setUpdatedUsername(e.target.value);
                      }}
                    ></textarea>
                    <br></br>
                    <input
                      className="form-check-input"
                      checked={admin}
                      type="checkbox"
                      id="admin-check"
                      onChange={(e) => setAdmin(!admin)}
                    />
                    <span> </span>
                    <label className="form-check-label">Admin</label>
                    <br></br>
                    <button
                      id="delete-user"
                      className="btn btn-danger btn-sm"
                      onClick={() => {
                        deleteUser(username)
                          .then((data) => {
                            history.push("/");
                            refreshUserData()
                              .then((data) => dispatchUserData(data))
                              .catch((err) => console.log(err));
                          })
                          .catch((err) => console.log(err));
                      }}
                    >
                      Delete user
                    </button>
                  </div>
                </form>
              </div>
              <div className="panel-footer">
                <button className="btn btn-light">
                  <Link to="/">Back</Link>
                </button>
                <span> </span>
                <button
                  id="submit"
                  className="btn btn-primary"
                  onClick={() => {
                    if (updatedUsername == "" && admin == has_admin) {
                      noChangeEvent();
                      return;
                    } else if (updatedUsername != "") {
                      if (
                        updatedUsername.length > 2 &&
                        /[!@#$%^&*(),.?":{}|<>]/g.test(updatedUsername) == false
                      ) {
                        editUser(
                          username,
                          updatedUsername != "" ? updatedUsername : username,
                          admin
                        )
                          .then((data) => {
                            history.push("/");
                            refreshUserData()
                              .then((data) => dispatchUserData(data))
                              .catch((err) => console.log(err));
                          })
                          .catch((err) => {});
                      } else {
                        setUpdatedUsername("");
                        failRegexEvent();
                      }
                    } else {
                      editUser(username, username, admin)
                        .then((data) => {
                          history.push("/");
                          refreshUserData()
                            .then((data) => dispatchUserData(data))
                            .catch((err) => console.log(err));
                        })
                        .catch((err) => {});
                    }
                  }}
                >
                  Apply
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

EditUser.propTypes = {
  location: PropTypes.shape({
    state: PropTypes.shape({
      username: PropTypes.string,
      has_admin: PropTypes.bool,
    }),
  }),
  history: PropTypes.shape({
    push: PropTypes.func,
  }),
  editUser: PropTypes.func,
  deleteUser: PropTypes.func,
  failRegexEvent: PropTypes.func,
  noChangeEvent: PropTypes.func,
  refreshUserData: PropTypes.func,
};

const withUserAPI = withProps((props) => ({
  editUser: (username, updated_username, admin) =>
    jhapiRequest("/users/" + username, "PATCH", {
      name: updated_username,
      admin,
    }),
  deleteUser: (username) => jhapiRequest("/users/" + username, "DELETE"),
  failRegexEvent: () =>
    alert(
      "Cannot change username - either contains special characters or is too short."
    ),
  noChangeEvent: () => {
    returns;
  },
  refreshUserData: () =>
    jhapiRequest("/users", "GET").then((data) => data.json()),
}));

export default compose(withUserAPI)(EditUser);