hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-10 11:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert redux state access to hooks

Browse Source
This commit is contained in:
Nathan Barber
2021-04-08 17:21:02 -04:00
parent c7dcb4db85
commit 21f4988f24
14 changed files with 4106 additions and 4891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
jsx/src/components/AddUser/AddUser.js
View File

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

33
jsx/src/components/AddUser/AddUser.pre.jsx → jsx/src/components/AddUser/AddUser.jsx
View File

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

20
jsx/src/components/CreateGroup/CreateGroup.js
View File

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

34
jsx/src/components/CreateGroup/CreateGroup.pre.jsx → jsx/src/components/CreateGroup/CreateGroup.jsx
View File

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

26
jsx/src/components/EditUser/EditUser.js
View File

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

48
jsx/src/components/EditUser/EditUser.pre.jsx → jsx/src/components/EditUser/EditUser.jsx
View File

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

18
jsx/src/components/GroupEdit/GroupEdit.js
View File

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

30
jsx/src/components/GroupEdit/GroupEdit.pre.jsx → jsx/src/components/GroupEdit/GroupEdit.jsx
View File

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

33
jsx/src/components/Groups/Groups.js
View File

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

59
jsx/src/components/Groups/Groups.pre.jsx → jsx/src/components/Groups/Groups.jsx
View File

@@ -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 {
user_data,
groups_data,
refreshGroupsData,
refreshUserData,
history,
} = props;
var user_data = useSelector((state) => state.user_data),
groups_data = useSelector((state) => state.groups_data),
dispatch = useDispatch();
var { refreshGroupsData, refreshUserData, 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();
refreshUserData();
refreshGroupsData()
.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);

21
jsx/src/components/ServerDashboard/ServerDashboard.js
View File

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

35
jsx/src/components/ServerDashboard/ServerDashboard.pre.jsx → jsx/src/components/ServerDashboard/ServerDashboard.jsx
View File

@@ -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 PropTypes from "prop-types";
import { jhapiRequest } from "../../util/jhapiUtil";
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),
[sortMethod, setSortMethod] = useState(null);
var [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);

1
jupyterhub-proxy.pid Normal file
View File

@@ -0,0 +1 @@
38441

8618
share/jupyterhub/static/js/admin-react.js
View File

File diff suppressed because one or more lines are too long