reset offset to 0 on name filter change

move offset to redux state, rather than independent,
since it can come from two places (user_page and pagination footer). Keeps things in sync.

Adds reducers for setting offset, name filter explicitly.

jsx/src/Store.js

@@ -1,23 +1,48 @@
 export const initialState = {
   user_data: undefined,
-  user_page: 0,
+  user_page: { offset: 0, limit: window.api_page_limit || 100 },
   name_filter: "",
   groups_data: undefined,
-  groups_page: 0,
-  limit: window.api_page_limit,
+  groups_page: { offset: 0, limit: window.api_page_limit || 100 },
+  limit: window.api_page_limit || 100,
 };
 
 export const reducers = (state = initialState, action) => {
   switch (action.type) {
     // Updates the client user model data and stores the page
+    case "USER_OFFSET":
+      return Object.assign({}, state, {
+        user_page: Object.assign({}, state.user_page, {
+          offset: action.value.offset,
+        }),
+      });
+
+    case "USER_NAME_FILTER":
+      // set offset to 0 if name filter changed,
+      // otherwise leave it alone
+      const newOffset =
+        action.value.name_filter !== state.name_filter ? 0 : state.name_filter;
+      return Object.assign({}, state, {
+        user_page: Object.assign({}, state.user_page, {
+          offset: newOffset,
+        }),
+        name_filter: action.value.name_filter,
+      });
+
     case "USER_PAGE":
       return Object.assign({}, state, {
         user_page: action.value.page,
         user_data: action.value.data,
-        name_filter: action.value.name_filter || "",
       });
 
-    // Updates the client group model data and stores the page
+    // Updates the client group user model data and stores the page
+    case "GROUPS_OFFSET":
+      return Object.assign({}, state, {
+        groups_page: Object.assign({}, state.groups_page, {
+          offset: action.value.offset,
+        }),
+      });
+
     case "GROUPS_PAGE":
       return Object.assign({}, state, {
         groups_page: action.value.page,

jsx/src/components/Groups/Groups.jsx

@@ -10,7 +10,16 @@ const Groups = (props) => {
     groups_page = useSelector((state) => state.groups_page),
     dispatch = useDispatch();
 
-  var [offset, setOffset] = useState(groups_page ? groups_page.offset : 0);
+  var offset = groups_page ? groups_page.offset : 0;
+
+  const setOffset = (offset) => {
+    dispatch({
+      type: "GROUPS_OFFSET",
+      value: {
+        offset: offset,
+      },
+    });
+  };
   var limit = groups_page ? groups_page.limit : window.api_page_limit;
   var total = groups_page ? groups_page.total : undefined;
 

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -56,7 +56,7 @@ const ServerDashboard = (props) => {
     user_page = useSelector((state) => state.user_page),
     name_filter = useSelector((state) => state.name_filter);
 
-  var [offset, setOffset] = useState(user_page ? user_page.offset : 0);
+  var offset = user_page ? user_page.offset : 0;
   var limit = user_page ? user_page.limit : window.api_page_limit;
   var total = user_page ? user_page.total : undefined;
 
@@ -72,12 +72,29 @@ const ServerDashboard = (props) => {
     history,
   } = props;
 
-  var dispatchPageUpdate = (data, page, name_filter) => {
+  const dispatchPageUpdate = (data, page) => {
     dispatch({
       type: "USER_PAGE",
       value: {
         data: data,
         page: page,
+      },
+    });
+  };
+
+  const setOffset = (newOffset) => {
+    dispatch({
+      type: "USER_OFFSET",
+      value: {
+        offset: newOffset,
+      },
+    });
+  };
+
+  const setNameFilter = (name_filter) => {
+    dispatch({
+      type: "USER_NAME_FILTER",
+      value: {
         name_filter: name_filter,
       },
     });
@@ -85,24 +102,18 @@ const ServerDashboard = (props) => {
 
   useEffect(() => {
     updateUsers(offset, limit, name_filter)
-      .then((data) =>
-        dispatchPageUpdate(data.items, data._pagination, name_filter)
-      )
+      .then((data) => dispatchPageUpdate(data.items, data._pagination))
       .catch((err) => setErrorAlert("Failed to update user list."));
-  }, [offset, limit]);
+  }, [offset, limit, name_filter]);
 
   if (!user_data || !user_page) {
     return <div data-testid="no-show"></div>;
   }
 
-  let page = offset / limit;
   var slice = [offset, limit, name_filter];
 
   const handleSearch = debounce(async (event) => {
-    // setNameFilter(event.target.value);
-    updateUsers(offset, limit, event.target.value).then((data) =>
-      dispatchPageUpdate(data.items, data._pagination, name_filter)
-    );
+    setNameFilter(event.target.value);
   }, 300);
 
   if (sortMethod != null) {