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

Add UI pagination, update Redux and API service lib

Browse Source
This commit is contained in:
Nathan Barber
2021-05-05 18:41:48 -04:00
parent 5e2ca7bcff
commit 0439a0d274
14 changed files with 334 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
jsx/src/components/ServerDashboard/ServerDashboard.jsx
View File

@@ -10,6 +10,7 @@ import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
import "./server-dashboard.css";
import { timeSince } from "../../util/timeSince";
import { jhapiRequest } from "../../util/jhapiUtil";
import PaginationFooter from "../PaginationFooter/PaginationFooter";
const ServerDashboard = (props) => {
// sort methods
@@ -30,10 +31,13 @@ const ServerDashboard = (props) => {
var [sortMethod, setSortMethod] = useState(null);
var user_data = useSelector((state) => state.user_data);
var user_page = useSelector((state) => state.user_page);
var limit = useSelector((state) => state.limit);
var page = parseInt(new URLSearchParams(props.location.search).get("page"));
var user_data = useSelector((state) => state.user_data),
user_page = useSelector((state) => state.user_page),
limit = useSelector((state) => state.limit),
page = parseInt(new URLSearchParams(props.location.search).get("page"));
console.log(user_page);
page = isNaN(page) ? 0 : page;
var slice = [page * limit, limit];
@@ -49,14 +53,7 @@ const ServerDashboard = (props) => {
history,
} = props;
var dispatchUserUpdate = (data) => {
dispatch({
type: "USER_DATA",
value: data,
});
};
var dispatchPageChange = (data, page) => {
var dispatchPageUpdate = (data, page) => {
dispatch({
type: "USER_PAGE",
value: {
@@ -71,9 +68,7 @@ const ServerDashboard = (props) => {
}
if (page != user_page) {
updateUsers(...slice)
.then((data) => data.json())
.then((data) => dispatchPageChange(data, page));
updateUsers(...slice).then((data) => dispatchPageUpdate(data, page));
}
if (sortMethod != null) {
@@ -138,9 +133,8 @@ const ServerDashboard = (props) => {
Promise.all(startAll(user_data.map((e) => e.name)))
.then((res) => {
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
dispatchPageUpdate(data, page);
})
.catch((err) => console.log(err));
return res;
@@ -159,9 +153,8 @@ const ServerDashboard = (props) => {
Promise.all(stopAll(user_data.map((e) => e.name)))
.then((res) => {
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
dispatchPageUpdate(data, page);
})
.catch((err) => console.log(err));
return res;
@@ -198,11 +191,9 @@ const ServerDashboard = (props) => {
onClick={() =>
stopServer(e.name)
.then((res) => {
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
});
updateUsers(...slice).then((data) => {
dispatchPageUpdate(data, page);
});
return res;
})
.catch((err) => console.log(err))
@@ -217,11 +208,9 @@ const ServerDashboard = (props) => {
onClick={() =>
startServer(e.name)
.then((res) => {
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
});
updateUsers(...slice).then((data) => {
dispatchPageUpdate(data, page);
});
return res;
})
.catch((err) => console.log(err))
@@ -253,24 +242,13 @@ const ServerDashboard = (props) => {
))}
</tbody>
</table>
<br></br>
<p>
Displaying users {slice[0]}-{slice[0] + user_data.length}
{user_data.length >= limit ? (
<button className="btn btn-link">
<Link to={`/?page=${page + 1}`}>Next</Link>
</button>
) : (
<></>
)}
{page >= 1 ? (
<button className="btn btn-link">
<Link to={`/?page=${page - 1}`}>Previous</Link>
</button>
) : (
<></>
)}
</p>
<PaginationFooter
endpoint="/"
page={page}
limit={limit}
numOffset={slice[0]}
numElements={user_data.length}
/>
<br></br>
</div>
</div>