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,51 +1,29 @@
-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,
-    };
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected: [],
-      changed: false,
-      added: undefined,
-      removed: undefined,
-    };
-  }
-
-  render() {
-    if (!this.props.location.state) {
-      this.props.history.push("/groups");
-      return <></>;
-    }
-
-    var { group_data, user_data, callback } = this.props.location.state;
+const GroupEdit = (props) => {
+  var [selected, setSelected] = useState([]),
+    [changed, setChanged] = useState(false),
+    [added, setAdded] = useState(undefined),
+    [removed, setRemoved] = useState(undefined);
 
   var {
     addToGroup,
     removeFromGroup,
     deleteGroup,
     refreshGroupsData,
-    } = this.props;
+    history,
+    location,
+  } = props;
+
+  if (!location.state) {
+    history.push("/groups");
+    return <></>;
+  }
+
+  var { group_data, user_data, callback } = location.state;
 
   if (!(group_data && user_data)) return <div></div>;
 
@@ -60,7 +38,8 @@ export class GroupEdit extends Component {
             options={user_data.map((e) => e.name)}
             value={group_data.users}
             onChange={(selection, options) => {
-                this.setState({ selected: selection, changed: true });
+              setSelected(selection);
+              setChanged(true);
             }}
           />
           <br></br>
@@ -73,24 +52,20 @@ export class GroupEdit extends Component {
             className="btn btn-primary"
             onClick={() => {
               // check for changes
-                if (!this.state.changed) {
-                  this.props.history.push("/groups");
+              if (!changed) {
+                history.push("/groups");
                 return;
               }
 
-                let new_users = this.state.selected.filter(
+              let new_users = selected.filter(
                 (e) => !group_data.users.includes(e)
               );
               let removed_users = group_data.users.filter(
-                  (e) => !this.state.selected.includes(e)
+                (e) => !selected.includes(e)
               );
 
-                this.setState(
-                  Object.assign({}, this.state, {
-                    added: new_users,
-                    removed: removed_users,
-                  })
-                );
+              setAdded(new_users);
+              setRemoved(removed_users);
 
               let promiseQueue = [];
               if (new_users.length > 0)
@@ -104,7 +79,7 @@ export class GroupEdit extends Component {
                 .then((e) => callback())
                 .catch((err) => console.log(err));
 
-                this.props.history.push("/groups");
+              history.push("/groups");
             }}
           >
             Apply
@@ -116,7 +91,7 @@ export class GroupEdit extends Component {
               var groupName = group_data.name;
               deleteGroup(groupName)
                 .then(refreshGroupsData())
-                  .then(this.props.history.push("/groups"))
+                .then(history.push("/groups"))
                 .catch((err) => console.log(err));
             }}
           >
@@ -128,5 +103,22 @@ export class GroupEdit extends Component {
       </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;