Make functional AddUser/CreateGroup/EditUser

jsx/src/App.jsx

@@ -11,7 +11,7 @@ import { createBrowserHistory } from "history";
 import ServerDashboard from "./components/ServerDashboard/ServerDashboard";
 import Groups from "./components/Groups/Groups";
 import GroupEdit from "./components/GroupEdit/GroupEdit";
-import CreateGroup from "./components/CreateGroup/CreateGroup"
+import CreateGroup from "./components/CreateGroup/CreateGroup";
 import AddUser from "./components/AddUser/AddUser";
 import EditUser from "./components/EditUser/EditUser";
 

jsx/src/components/AddUser/AddUser.js

@@ -1,7 +1,7 @@
 import { connect } from "react-redux";
 import { compose, withProps } from "recompose";
 import { jhapiRequest } from "../../util/jhapiUtil";
-import { AddUser } from "./AddUser.pre";
+import AddUser from "./AddUser.pre";
 
 const withUserAPI = withProps((props) => ({
   addUsers: (usernames, admin) =>

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

@@ -1,30 +1,12 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
-export class AddUser extends Component {
+const AddUser = (props) => {
-  static get propTypes() {
+  var [users, setUsers] = useState([]),
-    return {
+    [admin, setAdmin] = useState(false);
-      addUsers: PropTypes.func,
-      failRegexEvent: PropTypes.func,
-      refreshUserData: PropTypes.func,
-      dispatch: PropTypes.func,
-      history: PropTypes.shape({
-        push: PropTypes.func,
-      }),
-    };
-  }
 
-  constructor(props) {
+  var { addUsers, failRegexEvent, refreshUserData, history } = props;
-    super(props);
-    this.state = {
-      users: [],
-      admin: false,
-    };
-  }
-
-  render() {
-    var { addUsers, failRegexEvent, refreshUserData, dispatch } = this.props;
 
   return (
     <>
@@ -45,11 +27,7 @@ export class AddUser extends Component {
                       placeholder="usernames separated by line"
                       onBlur={(e) => {
                         let split_users = e.target.value.split("\n");
-                          this.setState(
+                        setUsers(split_users);
-                            Object.assign({}, this.state, {
-                              users: split_users,
-                            })
-                          );
                       }}
                     ></textarea>
                     <br></br>
@@ -59,11 +37,12 @@ export class AddUser extends Component {
                       value=""
                       id="admin-check"
                       onChange={(e) =>
-                          this.setState(
+                        // this.setState(
-                            Object.assign({}, this.state, {
+                        //   Object.assign({}, this.state, {
-                              admin: e.target.checked,
+                        //     admin: e.target.checked,
-                            })
+                        //   })
-                          )
+                        // )
+                        setAdmin(e.target.checked)
                       }
                     />
                     <span> </span>
@@ -80,26 +59,22 @@ export class AddUser extends Component {
                   id="submit"
                   className="btn btn-primary"
                   onClick={() => {
-                      let filtered_users = this.state.users.filter(
+                    let filtered_users = users.filter(
                       (e) =>
                         e.length > 2 &&
                         /[!@#$%^&*(),.?":{}|<>]/g.test(e) == false
                     );
-                      if (filtered_users.length < this.state.users.length) {
+                    if (filtered_users.length < users.length) {
-                        let removed_users = this.state.users.filter(
+                      let removed_users = users.filter(
                         (e) => !filtered_users.includes(e)
                       );
-                        this.setState(
+                      setUsers(filtered_users);
-                          Object.assign({}, this.state, {
-                            users: filtered_users,
-                          })
-                        );
                       failRegexEvent();
                     }
 
-                      addUsers(filtered_users, this.state.admin)
+                    addUsers(filtered_users, admin)
                       .then(() => refreshUserData())
-                        .then(() => this.props.history.push("/"))
+                      .then(() => history.push("/"))
                       .catch((err) => console.log(err));
                   }}
                 >
@@ -112,5 +87,15 @@ export class AddUser extends Component {
       </div>
     </>
   );
-  }
+};
-}
+
+AddUser.propTypes = {
+  addUsers: PropTypes.func,
+  failRegexEvent: PropTypes.func,
+  refreshUserData: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+};
+
+export default AddUser;

jsx/src/components/CreateGroup/CreateGroup.js

@@ -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"),

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

@@ -1,29 +1,11 @@
-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 {
+const CreateGroup = (props) => {
-  static get propTypes() {
+  var [groupName, setGroupName] = useState("");
-    return {
-      createGroup: PropTypes.func,
-      refreshGroupsData: PropTypes.func,
-      failRegexEvent: PropTypes.func,
-      history: PropTypes.shape({
-        push: PropTypes.func,
-      }),
-    };
-  }
 
-  constructor(props) {
+  var { createGroup, refreshGroupsData, history } = props;
-    super(props);
-    this.state = {
-      groupName: "",
-    };
-  }
-
-  render() {
-    var { createGroup, refreshGroupsData } = this.props;
 
   return (
     <>
@@ -39,11 +21,11 @@ export class CreateGroup extends Component {
                   <input
                     className="group-name-input"
                     type="text"
-                      value={this.state.groupName}
+                    value={groupName}
                     id="group-name"
                     placeholder="group name..."
                     onChange={(e) => {
-                        this.setState({ groupName: e.target.value });
+                      setGroupName(e.target.value);
                     }}
                   ></input>
                 </div>
@@ -57,10 +39,10 @@ export class CreateGroup extends Component {
                   id="submit"
                   className="btn btn-primary"
                   onClick={() => {
-                      let groupName = this.state.groupName;
+                    let groupName = groupName;
                     createGroup(groupName)
                       .then(refreshGroupsData())
-                        .then(this.props.history.push("/groups"))
+                      .then(history.push("/groups"))
                       .catch((err) => console.log(err));
                   }}
                 >
@@ -73,5 +55,15 @@ export class CreateGroup extends Component {
       </div>
     </>
   );
-  }
+};
-}
+
+CreateGroup.propTypes = {
+  createGroup: PropTypes.func,
+  refreshGroupsData: PropTypes.func,
+  failRegexEvent: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+};
+
+export default CreateGroup;

jsx/src/components/EditUser/EditUser.js

@@ -1,7 +1,7 @@
 import { connect } from "react-redux";
 import { compose, withProps } from "recompose";
 import { jhapiRequest } from "../../util/jhapiUtil";
-import { EditUser } from "./EditUser.pre";
+import EditUser from "./EditUser.pre";
 
 const withUserAPI = withProps((props) => ({
   editUser: (username, updated_username, admin) =>

jsx/src/components/EditUser/EditUser.pre.jsx

@@ -1,43 +1,25 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
-export class EditUser extends Component {
+const EditUser = (props) => {
-  static get propTypes() {
+  var {
-    return {
+    editUser,
-      location: PropTypes.shape({
+    deleteUser,
-        state: PropTypes.shape({
+    failRegexEvent,
-          username: PropTypes.string,
+    refreshUserData,
-          has_admin: PropTypes.bool,
+    history,
-        }),
+  } = props;
-      }),
-      history: PropTypes.shape({
-        push: PropTypes.func,
-      }),
-      editUser: PropTypes.func,
-      deleteUser: PropTypes.func,
-      failRegexEvent: PropTypes.func,
-      refreshUserData: PropTypes.func,
-    };
-  }
 
-  constructor(props) {
+  if (props.location.state == undefined) {
-    super(props);
+    props.history.push("/");
-    this.state = {
-      updated_username: null,
-      admin: null,
-    };
-  }
-
-  render() {
-    if (this.props.location.state == undefined) {
-      this.props.history.push("/");
     return <></>;
   }
 
-    var { username, has_admin } = this.props.location.state;
+  var { username, has_admin } = props.location.state;
 
-    var { editUser, deleteUser, failRegexEvent, refreshUserData } = this.props;
+  var [updatedUsername, setUpdatedUsername] = useState(""),
+    [admin, setAdmin] = useState(has_admin);
 
   return (
     <>
@@ -56,28 +38,17 @@ export class EditUser extends Component {
                       id="exampleFormControlTextarea1"
                       rows="3"
                       placeholder="updated username"
-                        onKeyDown={(e) => {
+                      onBlur={(e) => {
-                          this.setState(
+                        setUpdatedUsername(e.target.value);
-                            Object.assign({}, this.state, {
-                              updated_username: e.target.value,
-                            })
-                          );
                       }}
                     ></textarea>
                     <br></br>
                     <input
                       className="form-check-input"
-                        checked={has_admin ? true : false}
+                      checked={admin}
                       type="checkbox"
-                        value=""
                       id="admin-check"
-                        onChange={(e) =>
+                      onChange={(e) => setAdmin(!admin)}
-                          this.setState(
-                            Object.assign({}, this.state, {
-                              admin: e.target.checked,
-                            })
-                          )
-                        }
                     />
                     <span> </span>
                     <label className="form-check-label">Admin</label>
@@ -88,7 +59,7 @@ export class EditUser extends Component {
                       onClick={() => {
                         deleteUser(username)
                           .then((data) => {
-                              this.props.history.push("/");
+                            history.push("/");
                             refreshUserData();
                           })
                           .catch((err) => console.log(err));
@@ -108,33 +79,23 @@ export class EditUser extends Component {
                   id="submit"
                   className="btn btn-primary"
                   onClick={() => {
-                      let updated_username = this.state.updated_username,
+                    if (updatedUsername == "" && admin == has_admin) return;
-                        admin = this.state.admin;
-
-                      if (updated_username == null && admin == null) return;
                     if (
-                        updated_username.length > 2 &&
+                      updatedUsername.length > 2 &&
-                        /[!@#$%^&*(),.?":{}|<>]/g.test(updated_username) ==
+                      /[!@#$%^&*(),.?":{}|<>]/g.test(updatedUsername) == false
-                          false
                     ) {
                       editUser(
                         username,
-                          updated_username != null
+                        updatedUsername != "" ? updatedUsername : username,
-                            ? updated_username
+                        admin
-                            : username,
-                          admin != null ? admin : has_admin
                       )
                         .then((data) => {
-                            this.props.history.push("/");
+                          history.push("/");
                           refreshUserData();
                         })
                         .catch((err) => {});
                     } else {
-                        this.setState(
+                      setUpdatedUsername(null);
-                          Object.assign({}, this.state, {
-                            updated_username: "",
-                          })
-                        );
                       failRegexEvent();
                     }
                   }}
@@ -148,5 +109,22 @@ export class EditUser extends Component {
       </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,
+  refreshUserData: PropTypes.func,
+};
+
+export default EditUser;

jsx/src/components/GroupEdit/GroupEdit.js

@@ -8,8 +8,7 @@ const withGroupsAPI = withProps((props) => ({
     jhapiRequest("/groups/" + groupname + "/users", "POST", { users }),
   removeFromGroup: (users, groupname) =>
     jhapiRequest("/groups/" + groupname + "/users", "DELETE", { users }),
-  deleteGroup: (name) => 
+  deleteGroup: (name) => jhapiRequest("/groups/" + name, "DELETE"),
-    jhapiRequest("/groups/" + name, "DELETE"),
   refreshGroupsData: () =>
     jhapiRequest("/groups", "GET")
       .then((data) => data.json())

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

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

@@ -69,9 +69,12 @@ export class Groups extends Component {
                 <button className="btn btn-light adjacent-span-spacing">
                   <Link to="/">Back</Link>
                 </button>
-                <button className="btn btn-primary adjacent-span-spacing" onClick={() => {
+                <button
-                  this.props.history.push("/create-group")
+                  className="btn btn-primary adjacent-span-spacing"
-                }}>
+                  onClick={() => {
+                    this.props.history.push("/create-group");
+                  }}
+                >
                   New Group
                 </button>
               </div>

jupyterhub-proxy.pid

@@ -1 +1 @@
-16381
+17503