add useEffect, new pagination style

jsx/src/App.jsx

@@ -26,11 +26,10 @@ const App = () => {
       .updateUsers(user_page * limit, limit)
       .then((data) => {
         console.log(data);
-        let { _pagination, items } = data,
+        let { _pagination, items } = data;
-          { offset, limit } = _pagination;
         store.dispatch({
           type: "USER_PAGE",
-          value: { data: items, page: Math.floor(offset / limit) },
+          value: { data: items, page: _pagination },
         });
       })
       .catch((err) => console.log(err));
@@ -39,11 +38,10 @@ const App = () => {
       .updateGroups(groups_page * limit, limit)
       .then((data) => {
         console.log(data);
-        let { _pagination, items } = data,
+        let { _pagination, items } = data;
-          { offset, limit } = _pagination;
         store.dispatch({
           type: "GROUPS_PAGE",
-          value: { data: items, page: Math.floor(offset / limit) },
+          value: { data: items, page: _pagination },
         });
       })
       .catch((err) => console.log(err));

jsx/src/components/Groups/Groups.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 
@@ -9,20 +9,27 @@ const Groups = (props) => {
   var user_data = useSelector((state) => state.user_data),
     groups_data = useSelector((state) => state.groups_data),
     groups_page = useSelector((state) => state.groups_page),
-    limit = useSelector((state) => state.limit),
+    dispatch = useDispatch();
-    dispatch = useDispatch(),
-    page = parseInt(new URLSearchParams(props.location.search).get("page"));
 
-  page = isNaN(page) ? 0 : page;
+  var [offset, setOffset] = useState(groups_page ? groups_page.offset : 0);
-  var slice = [page * limit, limit];
+  var limit = groups_page ? groups_page.limit : window.api_page_limit;
+  var total = groups_page ? groups_page.total : undefined;
 
   var { updateGroups, history } = props;
 
-  if (!groups_data || !user_data) {
+  console.log(groups_data, groups_page);
+
+  useEffect(() => {
+    updateGroups(offset, limit).then((data) =>
+      dispatchPageUpdate(data.items, data._pagination)
+    );
+  }, [offset, limit]);
+
+  if (!groups_data || !user_data || !groups_page) {
     return <div data-testid="no-show"></div>;
   }
 
-  const dispatchPageChange = (data, page) => {
+  const dispatchPageUpdate = (data, page) => {
     dispatch({
       type: "GROUPS_PAGE",
       value: {
@@ -32,12 +39,6 @@ const Groups = (props) => {
     });
   };
 
-  if (groups_page != page) {
-    updateGroups(...slice).then((data) => {
-      dispatchPageChange(data, page);
-    });
-  }
-
   return (
     <div className="container" data-testid="container">
       <div className="row">
@@ -74,11 +75,12 @@ const Groups = (props) => {
                 )}
               </ul>
               <PaginationFooter
-                endpoint="/groups"
+                offset={offset}
-                page={page}
                 limit={limit}
-                numOffset={slice[0]}
+                visible={groups_data.length}
-                numElements={groups_data.length}
+                total={total}
+                next={() => setOffset(offset + limit)}
+                prev={() => setOffset(offset - limit)}
               />
             </div>
             <div className="panel-footer">

jsx/src/components/PaginationFooter/PaginationFooter.jsx

@@ -1,33 +1,32 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
 import "./pagination-footer.css";
 
 const PaginationFooter = (props) => {
-  let { endpoint, page, limit, numOffset, numElements } = props;
+  let { offset, limit, visible, total, next, prev } = props;
   return (
     <div className="pagination-footer">
       <p>
-        Displaying {numOffset}-{numOffset + numElements}
+        Displaying {offset}-{offset + visible}
         <br></br>
         <br></br>
-        {page >= 1 ? (
+        {offset >= limit ? (
           <button className="btn btn-sm btn-light spaced">
-            <Link to={`${endpoint}?page=${page - 1}`}>
+            <span className="active-pagination" onClick={prev}>
-              <span className="active-pagination">Previous</span>
+              Previous
-            </Link>
+            </span>
           </button>
         ) : (
           <button className="btn btn-sm btn-light spaced">
             <span className="inactive-pagination">Previous</span>
           </button>
         )}
-        {numElements >= limit ? (
+        {offset + visible < total ? (
           <button className="btn btn-sm btn-light spaced">
-            <Link to={`${endpoint}?page=${page + 1}`}>
+            <span className="active-pagination" onClick={next}>
-              <span className="active-pagination">Next</span>
+              Next
-            </Link>
+            </span>
           </button>
         ) : (
           <button className="btn btn-sm btn-light spaced">

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { debounce } from "lodash";
 import PropTypes from "prop-types";
 
 import {
@@ -49,16 +50,15 @@ const ServerDashboard = (props) => {
   var [errorAlert, setErrorAlert] = useState(null);
   var [sortMethod, setSortMethod] = useState(null);
   var [disabledButtons, setDisabledButtons] = useState({});
-  const [collapseStates, setCollapseStates] = useState({});
+  var [collapseStates, setCollapseStates] = useState({});
 
   var user_data = useSelector((state) => state.user_data),
     user_page = useSelector((state) => state.user_page),
-    limit = useSelector((state) => state.limit),
+    name_filter = useSelector((state) => state.name_filter);
-    name_filter = useSelector((state) => state.name_filter),
-    page = parseInt(new URLSearchParams(props.location.search).get("page"));
 
-  page = isNaN(page) ? 0 : page;
+  var [offset, setOffset] = useState(user_page ? user_page.offset : 0);
-  var slice = [page * limit, limit, name_filter];
+  var limit = user_page ? user_page.limit : window.api_page_limit;
+  var total = user_page ? user_page.total : undefined;
 
   const dispatch = useDispatch();
 
@@ -83,21 +83,25 @@ const ServerDashboard = (props) => {
     });
   };
 
-  if (!user_data) {
+  useEffect(() => {
+    updateUsers(offset, limit, name_filter)
+      .then((data) =>
+        dispatchPageUpdate(data.items, data._pagination, name_filter)
+      )
+      .catch((err) => setErrorAlert("Failed to update user list."));
+  }, [offset, limit]);
+
+  if (!user_data || !user_page) {
     return <div data-testid="no-show"></div>;
   }
 
-  if (page != user_page) {
+  let page = offset / limit;
-    updateUsers(...slice).then((data) =>
+  var slice = [offset, limit, name_filter];
-      dispatchPageUpdate(data.items, page, name_filter)
-    );
-  }
 
-  var debounce = require("lodash.debounce");
   const handleSearch = debounce(async (event) => {
     // setNameFilter(event.target.value);
-    updateUsers(page * limit, limit, event.target.value).then((data) =>
+    updateUsers(offset, limit, event.target.value).then((data) =>
-      dispatchPageUpdate(data.items, page, name_filter)
+      dispatchPageUpdate(data.items, data._pagination, name_filter)
     );
   }, 300);
 
@@ -118,7 +122,11 @@ const ServerDashboard = (props) => {
               if (res.status < 300) {
                 updateUsers(...slice)
                   .then((data) => {
-                    dispatchPageUpdate(data.items, page, name_filter);
+                    dispatchPageUpdate(
+                      data.items,
+                      data._pagination,
+                      name_filter
+                    );
                   })
                   .catch(() => {
                     setIsDisabled(false);
@@ -154,7 +162,11 @@ const ServerDashboard = (props) => {
               if (res.status < 300) {
                 updateUsers(...slice)
                   .then((data) => {
-                    dispatchPageUpdate(data.items, page, name_filter);
+                    dispatchPageUpdate(
+                      data.items,
+                      data._pagination,
+                      name_filter
+                    );
                   })
                   .catch(() => {
                     setErrorAlert(`Failed to update users list.`);
@@ -456,7 +468,11 @@ const ServerDashboard = (props) => {
                       .then((res) => {
                         updateUsers(...slice)
                           .then((data) => {
-                            dispatchPageUpdate(data.items, page, name_filter);
+                            dispatchPageUpdate(
+                              data.items,
+                              data._pagination,
+                              name_filter
+                            );
                           })
                           .catch(() =>
                             setErrorAlert(`Failed to update users list.`)
@@ -492,7 +508,11 @@ const ServerDashboard = (props) => {
                       .then((res) => {
                         updateUsers(...slice)
                           .then((data) => {
-                            dispatchPageUpdate(data.items, page, name_filter);
+                            dispatchPageUpdate(
+                              data.items,
+                              data._pagination,
+                              name_filter
+                            );
                           })
                           .catch(() =>
                             setErrorAlert(`Failed to update users list.`)
@@ -520,11 +540,12 @@ const ServerDashboard = (props) => {
           </tbody>
         </table>
         <PaginationFooter
-          endpoint="/"
+          offset={offset}
-          page={page}
           limit={limit}
-          numOffset={slice[0]}
+          visible={user_data.length}
-          numElements={user_data.length}
+          total={total}
+          next={() => setOffset(offset + limit)}
+          prev={() => setOffset(offset - limit)}
         />
         <br></br>
       </div>