Make GroupEdit functional

jsx/src/components/GroupEdit/GroupEdit.js

@@ -1,7 +1,7 @@
 import { connect } from "react-redux";
 import { compose, withProps } from "recompose";
 import { jhapiRequest } from "../../util/jhapiUtil";
-import { GroupEdit } from "./GroupEdit.pre";
+import GroupEdit from "./GroupEdit.pre";
 
 const withGroupsAPI = withProps((props) => ({
   addToGroup: (users, groupname) =>

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

@@ -1,132 +1,124 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import { Link } from "react-router-dom";
 import Multiselect from "../Multiselect/Multiselect";
 import PropTypes from "prop-types";
 
-export class GroupEdit extends Component {
-  static get propTypes() {
-    return {
-      location: PropTypes.shape({
-        state: PropTypes.shape({
-          group_data: PropTypes.object,
-          user_data: PropTypes.array,
-          callback: PropTypes.func,
-        }),
-      }),
-      history: PropTypes.shape({
-        push: PropTypes.func,
-      }),
-      addToGroup: PropTypes.func,
-      removeFromGroup: PropTypes.func,
-      deleteGroup: PropTypes.func,
-    };
+const GroupEdit = (props) => {
+  var [selected, setSelected] = useState([]),
+    [changed, setChanged] = useState(false),
+    [added, setAdded] = useState(undefined),
+    [removed, setRemoved] = useState(undefined);
+
+  var {
+    addToGroup,
+    removeFromGroup,
+    deleteGroup,
+    refreshGroupsData,
+    history,
+    location,
+  } = props;
+
+  if (!location.state) {
+    history.push("/groups");
+    return <></>;
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected: [],
-      changed: false,
-      added: undefined,
-      removed: undefined,
-    };
-  }
+  var { group_data, user_data, callback } = location.state;
 
-  render() {
-    if (!this.props.location.state) {
-      this.props.history.push("/groups");
-      return <></>;
-    }
+  if (!(group_data && user_data)) return <div></div>;
 
-    var { group_data, user_data, callback } = this.props.location.state;
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+          <h3>Editing Group {group_data.name}</h3>
+          <br></br>
+          <div className="alert alert-info">Select group members</div>
+          <Multiselect
+            options={user_data.map((e) => e.name)}
+            value={group_data.users}
+            onChange={(selection, options) => {
+              setSelected(selection);
+              setChanged(true);
+            }}
+          />
+          <br></br>
+          <button id="return" className="btn btn-light">
+            <Link to="/groups">Back</Link>
+          </button>
+          <span> </span>
+          <button
+            id="submit"
+            className="btn btn-primary"
+            onClick={() => {
+              // check for changes
+              if (!changed) {
+                history.push("/groups");
+                return;
+              }
 
-    var {
-      addToGroup,
-      removeFromGroup,
-      deleteGroup,
-      refreshGroupsData,
-    } = this.props;
+              let new_users = selected.filter(
+                (e) => !group_data.users.includes(e)
+              );
+              let removed_users = group_data.users.filter(
+                (e) => !selected.includes(e)
+              );
 
-    if (!(group_data && user_data)) return <div></div>;
+              setAdded(new_users);
+              setRemoved(removed_users);
 
-    return (
-      <div className="container">
-        <div className="row">
-          <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-            <h3>Editing Group {group_data.name}</h3>
-            <br></br>
-            <div className="alert alert-info">Select group members</div>
-            <Multiselect
-              options={user_data.map((e) => e.name)}
-              value={group_data.users}
-              onChange={(selection, options) => {
-                this.setState({ selected: selection, changed: true });
-              }}
-            />
-            <br></br>
-            <button id="return" className="btn btn-light">
-              <Link to="/groups">Back</Link>
-            </button>
-            <span> </span>
-            <button
-              id="submit"
-              className="btn btn-primary"
-              onClick={() => {
-                // check for changes
-                if (!this.state.changed) {
-                  this.props.history.push("/groups");
-                  return;
-                }
-
-                let new_users = this.state.selected.filter(
-                  (e) => !group_data.users.includes(e)
-                );
-                let removed_users = group_data.users.filter(
-                  (e) => !this.state.selected.includes(e)
+              let promiseQueue = [];
+              if (new_users.length > 0)
+                promiseQueue.push(addToGroup(new_users, group_data.name));
+              if (removed_users.length > 0)
+                promiseQueue.push(
+                  removeFromGroup(removed_users, group_data.name)
                 );
 
-                this.setState(
-                  Object.assign({}, this.state, {
-                    added: new_users,
-                    removed: removed_users,
-                  })
-                );
+              Promise.all(promiseQueue)
+                .then((e) => callback())
+                .catch((err) => console.log(err));
 
-                let promiseQueue = [];
-                if (new_users.length > 0)
-                  promiseQueue.push(addToGroup(new_users, group_data.name));
-                if (removed_users.length > 0)
-                  promiseQueue.push(
-                    removeFromGroup(removed_users, group_data.name)
-                  );
-
-                Promise.all(promiseQueue)
-                  .then((e) => callback())
-                  .catch((err) => console.log(err));
-
-                this.props.history.push("/groups");
-              }}
-            >
-              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>
+              history.push("/groups");
+            }}
+          >
+            Apply
+          </button>
+          <button
+            className="btn btn-danger"
+            style={{ float: "right" }}
+            onClick={() => {
+              var groupName = group_data.name;
+              deleteGroup(groupName)
+                .then(refreshGroupsData())
+                .then(history.push("/groups"))
+                .catch((err) => console.log(err));
+            }}
+          >
+            Delete Group
+          </button>
+          <br></br>
+          <br></br>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+GroupEdit.propTypes = {
+  location: PropTypes.shape({
+    state: PropTypes.shape({
+      group_data: PropTypes.object,
+      user_data: PropTypes.array,
+      callback: PropTypes.func,
+    }),
+  }),
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+  addToGroup: PropTypes.func,
+  removeFromGroup: PropTypes.func,
+  deleteGroup: PropTypes.func,
+};
+
+export default GroupEdit;