Convert redux state access to hooks

jsx/src/components/CreateGroup/CreateGroup.js

@@ -1,20 +0,0 @@
-import { connect } from "react-redux";
-import { compose, withProps } from "recompose";
-import { jhapiRequest } from "../../util/jhapiUtil";
-import CreateGroup from "./CreateGroup.pre";
-
-const withUserAPI = withProps((props) => ({
-  createGroup: (groupName) => jhapiRequest("/groups/" + groupName, "POST"),
-  failRegexEvent: () =>
-    alert(
-      "Removed " +
-        JSON.stringify(removed_users) +
-        " for either containing special characters or being too short."
-    ),
-  refreshGroupsData: () =>
-    jhapiRequest("/groups", "GET")
-      .then((data) => data.json())
-      .then((data) => props.dispatch({ type: "GROUPS_DATA", value: data })),
-}));
-
-export default compose(connect(), withUserAPI)(CreateGroup);

jsx/src/components/CreateGroup/CreateGroup.jsx

@@ -1,10 +1,22 @@
 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 CreateGroup = (props) => {
   var [groupName, setGroupName] = useState("");
 
+  var dispatch = useDispatch();
+
+  var dispatchGroupsData = (data) => {
+    dispatch({
+      type: "GROUPS_DATA",
+      value: data,
+    });
+  };
+
   var { createGroup, refreshGroupsData, history } = props;
 
   return (
@@ -40,12 +52,16 @@ const CreateGroup = (props) => {
                   className="btn btn-primary"
                   onClick={() => {
                     createGroup(groupName)
-                      .then(refreshGroupsData())
+                      .then(
+                        refreshGroupsData()
+                          .then((data) => dispatchGroupsData(data))
+                          .catch((err) => console.log(err))
+                      )
                       .then(history.push("/groups"))
                       .catch((err) => console.log(err));
                   }}
                 >
-                  Add Users
+                  Create
                 </button>
               </div>
             </div>
@@ -65,4 +81,16 @@ CreateGroup.propTypes = {
   }),
 };
 
-export default CreateGroup;
+const withGroupsAPI = withProps((props) => ({
+  createGroup: (groupName) => jhapiRequest("/groups/" + groupName, "POST"),
+  failRegexEvent: () =>
+    alert(
+      "Removed " +
+        JSON.stringify(removed_users) +
+        " for either containing special characters or being too short."
+    ),
+  refreshGroupsData: () =>
+    jhapiRequest("/groups", "GET").then((data) => data.json()),
+}));
+
+export default compose(withGroupsAPI)(CreateGroup);