Convert redux state access to hooks

jsx/src/components/AddUser/AddUser.js

@@ -1,21 +0,0 @@
-import { connect } from "react-redux";
-import { compose, withProps } from "recompose";
-import { jhapiRequest } from "../../util/jhapiUtil";
-import AddUser from "./AddUser.pre";
-
-const withUserAPI = withProps((props) => ({
-  addUsers: (usernames, admin) =>
-    jhapiRequest("/users", "POST", { usernames, admin }),
-  failRegexEvent: () =>
-    alert(
-      "Removed " +
-        JSON.stringify(removed_users) +
-        " for either containing special characters or being too short."
-    ),
-  refreshUserData: () =>
-    jhapiRequest("/users", "GET")
-      .then((data) => data.json())
-      .then((data) => props.dispatch({ type: "USER_DATA", value: data })),
-}));
-
-export default compose(connect(), withUserAPI)(AddUser);

jsx/src/components/AddUser/AddUser.jsx

@@ -1,11 +1,23 @@
 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 AddUser = (props) => {
   var [users, setUsers] = useState([]),
     [admin, setAdmin] = useState(false);
 
+  var dispatch = useDispatch();
+
+  var dispatchUserData = (data) => {
+    dispatch({
+      type: "USER_DATA",
+      value: data,
+    });
+  };
+
   var { addUsers, failRegexEvent, refreshUserData, history } = props;
 
   return (
@@ -66,7 +78,11 @@ const AddUser = (props) => {
                     }
 
                     addUsers(filtered_users, admin)
-                      .then(() => refreshUserData())
+                      .then(
+                        refreshUserData()
+                          .then((data) => dispatchUserData(data))
+                          .catch((err) => console.log(err))
+                      )
                       .then(() => history.push("/"))
                       .catch((err) => console.log(err));
                   }}
@@ -91,4 +107,17 @@ AddUser.propTypes = {
   }),
 };
 
-export default AddUser;
+const withUserAPI = withProps((props) => ({
+  addUsers: (usernames, admin) =>
+    jhapiRequest("/users", "POST", { usernames, admin }),
+  failRegexEvent: () =>
+    alert(
+      "Removed " +
+        JSON.stringify(removed_users) +
+        " for either containing special characters or being too short."
+    ),
+  refreshUserData: () =>
+    jhapiRequest("/users", "GET").then((data) => data.json()),
+}));
+
+export default compose(withUserAPI)(AddUser);

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);

jsx/src/components/EditUser/EditUser.js

@@ -1,26 +0,0 @@
-import { connect } from "react-redux";
-import { compose, withProps } from "recompose";
-import { jhapiRequest } from "../../util/jhapiUtil";
-import EditUser from "./EditUser.pre";
-
-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())
-      .then((data) => props.dispatch({ type: "USER_DATA", value: data })),
-}));
-
-export default compose(connect(), withUserAPI)(EditUser);

jsx/src/components/EditUser/EditUser.jsx

@@ -1,8 +1,22 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+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,
@@ -61,7 +75,9 @@ const EditUser = (props) => {
                         deleteUser(username)
                           .then((data) => {
                             history.push("/");
-                            refreshUserData();
+                            refreshUserData()
+                              .then((data) => dispatchUserData(data))
+                              .catch((err) => console.log(err));
                           })
                           .catch((err) => console.log(err));
                       }}
@@ -95,7 +111,9 @@ const EditUser = (props) => {
                         )
                           .then((data) => {
                             history.push("/");
-                            refreshUserData();
+                            refreshUserData()
+                              .then((data) => dispatchUserData(data))
+                              .catch((err) => console.log(err));
                           })
                           .catch((err) => {});
                       } else {
@@ -106,7 +124,9 @@ const EditUser = (props) => {
                       editUser(username, username, admin)
                         .then((data) => {
                           history.push("/");
-                          refreshUserData();
+                          refreshUserData()
+                            .then((data) => dispatchUserData(data))
+                            .catch((err) => console.log(err));
                         })
                         .catch((err) => {});
                     }
@@ -140,4 +160,22 @@ EditUser.propTypes = {
   refreshUserData: PropTypes.func,
 };
 
-export default EditUser;
+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);

jsx/src/components/GroupEdit/GroupEdit.js

@@ -1,18 +0,0 @@
-import { connect } from "react-redux";
-import { compose, withProps } from "recompose";
-import { jhapiRequest } from "../../util/jhapiUtil";
-import GroupEdit from "./GroupEdit.pre";
-
-const withGroupsAPI = withProps((props) => ({
-  addToGroup: (users, groupname) =>
-    jhapiRequest("/groups/" + groupname + "/users", "POST", { users }),
-  removeFromGroup: (users, groupname) =>
-    jhapiRequest("/groups/" + groupname + "/users", "DELETE", { users }),
-  deleteGroup: (name) => jhapiRequest("/groups/" + name, "DELETE"),
-  refreshGroupsData: () =>
-    jhapiRequest("/groups", "GET")
-      .then((data) => data.json())
-      .then((data) => props.dispatch({ type: "GROUPS_DATA", value: data })),
-}));
-
-export default compose(connect(), withGroupsAPI)(GroupEdit);

jsx/src/components/GroupEdit/GroupEdit.jsx

@@ -1,7 +1,10 @@
 import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { compose, withProps } from "recompose";
 import { Link } from "react-router-dom";
-import Multiselect from "../Multiselect/Multiselect";
 import PropTypes from "prop-types";
+import { jhapiRequest } from "../../util/jhapiUtil";
+import Multiselect from "../Multiselect/Multiselect";
 
 const GroupEdit = (props) => {
   var [selected, setSelected] = useState([]),
@@ -9,6 +12,15 @@ const GroupEdit = (props) => {
     [added, setAdded] = useState(undefined),
     [removed, setRemoved] = useState(undefined);
 
+  var dispatch = useDispatch();
+
+  const dispatchGroupsData = (data) => {
+    dispatch({
+      type: "GROUPS_DATA",
+      value: data,
+    });
+  };
+
   var {
     addToGroup,
     removeFromGroup,
@@ -91,7 +103,9 @@ const GroupEdit = (props) => {
             onClick={() => {
               var groupName = group_data.name;
               deleteGroup(groupName)
-                .then(refreshGroupsData())
+                .then(
+                  refreshGroupsData().then((data) => dispatchGroupsData(data))
+                )
                 .then(history.push("/groups"))
                 .catch((err) => console.log(err));
             }}
@@ -123,4 +137,14 @@ GroupEdit.propTypes = {
   refreshGroupsData: PropTypes.func,
 };
 
-export default GroupEdit;
+const withGroupsAPI = withProps((props) => ({
+  addToGroup: (users, groupname) =>
+    jhapiRequest("/groups/" + groupname + "/users", "POST", { users }),
+  removeFromGroup: (users, groupname) =>
+    jhapiRequest("/groups/" + groupname + "/users", "DELETE", { users }),
+  deleteGroup: (name) => jhapiRequest("/groups/" + name, "DELETE"),
+  refreshGroupsData: () =>
+    jhapiRequest("/groups", "GET").then((data) => data.json()),
+}));
+
+export default compose(withGroupsAPI)(GroupEdit);

jsx/src/components/Groups/Groups.js

@@ -1,33 +0,0 @@
-import { compose, withProps } from "recompose";
-import { connect } from "react-redux";
-import { jhapiRequest } from "../../util/jhapiUtil";
-import Groups from "./Groups.pre";
-
-const withGroupsAPI = withProps((props) => ({
-  refreshGroupsData: () =>
-    jhapiRequest("/groups", "GET")
-      .then((data) => data.json())
-      .then((data) => props.dispatch({ type: "GROUPS_DATA", value: data })),
-  refreshUserData: () =>
-    jhapiRequest("/users", "GET")
-      .then((data) => data.json())
-      .then((data) => props.dispatch({ type: "USER_DATA", value: data })),
-  addUsersToGroup: (name, new_users) =>
-    jhapiRequest("/groups/" + name + "/users", "POST", {
-      body: { users: new_users },
-      json: true,
-    }),
-  removeUsersFromGroup: (name, removed_users) =>
-    jhapiRequest("/groups/" + name + "/users", "DELETE", {
-      body: { users: removed_users },
-      json: true,
-    }),
-}));
-
-export default compose(
-  connect((state) => ({
-    user_data: state.user_data,
-    groups_data: state.groups_data,
-  })),
-  withGroupsAPI
-)(Groups);

jsx/src/components/Groups/Groups.jsx

@@ -1,20 +1,36 @@
 import React from "react";
-import { Link } from "react-router-dom";
+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 Groups = (props) => {
-  var {
+  var user_data = useSelector((state) => state.user_data),
-    user_data,
+    groups_data = useSelector((state) => state.groups_data),
-    groups_data,
+    dispatch = useDispatch();
-    refreshGroupsData,
+
-    refreshUserData,
+  var { refreshGroupsData, refreshUserData, history } = props;
-    history,
-  } = props;
 
   if (!groups_data || !user_data) {
     return <div></div>;
   }
 
+  const dispatchGroupsData = (data) => {
+    dispatch({
+      type: "GROUPS_DATA",
+      value: data,
+    });
+  };
+
+  const dispatchUserData = (data) => {
+    dispatch({
+      type: "USER_DATA",
+      value: data,
+    });
+  };
+
   return (
     <div className="container">
       <div className="row">
@@ -35,8 +51,12 @@ const Groups = (props) => {
                             group_data: e,
                             user_data: user_data,
                             callback: () => {
-                              refreshGroupsData();
+                              refreshGroupsData()
-                              refreshUserData();
+                                .then((data) => dispatchGroupsData(data))
+                                .catch((err) => console.log(err));
+                              refreshUserData()
+                                .then((data) => dispatchUserData(data))
+                                .catch((err) => console.log(err));
                             },
                           },
                         }}
@@ -82,4 +102,21 @@ Groups.propTypes = {
   }),
 };
 
-export default Groups;
+const withGroupsAPI = withProps((props) => ({
+  refreshGroupsData: () =>
+    jhapiRequest("/groups", "GET").then((data) => data.json()),
+  refreshUserData: () =>
+    jhapiRequest("/users", "GET").then((data) => data.json()),
+  addUsersToGroup: (name, new_users) =>
+    jhapiRequest("/groups/" + name + "/users", "POST", {
+      body: { users: new_users },
+      json: true,
+    }),
+  removeUsersFromGroup: (name, removed_users) =>
+    jhapiRequest("/groups/" + name + "/users", "DELETE", {
+      body: { users: removed_users },
+      json: true,
+    }),
+}));
+
+export default compose(withGroupsAPI)(Groups);

jsx/src/components/ServerDashboard/ServerDashboard.js

@@ -1,21 +0,0 @@
-import React, { Component } from "react";
-import { compose, withProps, withHandlers } from "recompose";
-import { connect } from "react-redux";
-import { jhapiRequest } from "../../util/jhapiUtil";
-import ServerDashboard from "./ServerDashboard.pre";
-
-const withHubActions = withProps((props) => ({
-  updateUsers: (cb) => jhapiRequest("/users", "GET"),
-  shutdownHub: () => jhapiRequest("/shutdown", "POST"),
-  startServer: (name) => jhapiRequest("/users/" + name + "/server", "POST"),
-  stopServer: (name) => jhapiRequest("/users/" + name + "/server", "DELETE"),
-  startAll: (names) =>
-    names.map((e) => jhapiRequest("/users/" + e + "/server", "POST")),
-  stopAll: (names) =>
-    names.map((e) => jhapiRequest("/users/" + e + "/server", "DELETE")),
-}));
-
-export default compose(
-  withHubActions,
-  connect((state) => ({ user_data: state.user_data }))
-)(ServerDashboard);

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -1,10 +1,15 @@
 import React, { useState } from "react";
+import { compose, withProps } from "recompose";
+import { useSelector, useDispatch } from "react-redux";
+import PropTypes from "prop-types";
+
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
+
 import "./server-dashboard.css";
 import { timeSince } from "../../util/timeSince";
-import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
+import { jhapiRequest } from "../../util/jhapiUtil";
-import PropTypes from "prop-types";
 
 const ServerDashboard = (props) => {
   // sort methods
@@ -23,11 +28,13 @@ const ServerDashboard = (props) => {
     runningAsc = (e) => e.sort((a) => (a.server == null ? -1 : 1)),
     runningDesc = (e) => e.sort((a) => (a.server == null ? 1 : -1));
 
-  var [addUser, setAddUser] = useState(false),
+  var [sortMethod, setSortMethod] = useState(null);
-    [sortMethod, setSortMethod] = useState(null);
+
+  var user_data = useSelector((state) => state.user_data);
+
+  const dispatch = useDispatch();
 
   var {
-    user_data,
     updateUsers,
     shutdownHub,
     startServer,
@@ -35,7 +42,6 @@ const ServerDashboard = (props) => {
     startAll,
     stopAll,
     history,
-    dispatch,
   } = props;
 
   var dispatchUserUpdate = (data) => {
@@ -45,7 +51,9 @@ const ServerDashboard = (props) => {
     });
   };
 
-  if (!user_data) return <div></div>;
+  if (!user_data) {
+    return <div></div>;
+  }
 
   if (sortMethod != null) {
     user_data = sortMethod(user_data);
@@ -280,4 +288,15 @@ SortHandler.propTypes = {
   callback: PropTypes.func,
 };
 
-export default ServerDashboard;
+const withHubActions = withProps((props) => ({
+  updateUsers: (cb) => jhapiRequest("/users", "GET"),
+  shutdownHub: () => jhapiRequest("/shutdown", "POST"),
+  startServer: (name) => jhapiRequest("/users/" + name + "/server", "POST"),
+  stopServer: (name) => jhapiRequest("/users/" + name + "/server", "DELETE"),
+  startAll: (names) =>
+    names.map((e) => jhapiRequest("/users/" + e + "/server", "POST")),
+  stopAll: (names) =>
+    names.map((e) => jhapiRequest("/users/" + e + "/server", "DELETE")),
+}));
+
+export default compose(withHubActions)(ServerDashboard);

jupyterhub-proxy.pid

@@ -0,0 +1 @@
+38441