CE-1942: fix urlstate out of sync

src/hooks/pagination.js

+import { useCallback, useMemo, useState } from "react";
+
+const isZeroOrPositiveInt = (val) => {
+  return Number.isInteger(val) && val >= 0;
+};
+
+/**
+ * Manages pagination state e.g. outside a table or url.
+ *
+ * Provides getting/setting for a single pagination object, but internally
+ * manages changes for each attribute independently so that e.g. if there are
+ * no changes then the object is unchanged.
+ */
+export const usePagination = ({
+  initPage,
+  initLimit,
+  initTotalCount,
+  rowsPerPageOptions
+}) => {
+  const [page, setPage] = useState(initPage ?? 0);
+  const [_rowsPerPageOptions] = useState(rowsPerPageOptions ?? [20, 50]);
+  const [limit, setLimit] = useState(initLimit ?? _rowsPerPageOptions[0]);
+  const [totalCount, setTotalCount] = useState(initTotalCount ?? 0);
+
+  /**
+   * Returns current set of pagination values
+   */
+  const pagination = useMemo(() => {
+    const val = {
+      page,
+      limit,
+      rows: limit,
+      totalCount,
+      totalRecords: totalCount,
+      rowsPerPageOptions: _rowsPerPageOptions
+    };
+    return val;
+  }, [page, limit, totalCount, _rowsPerPageOptions]);
+
+  /**
+   * Sets pagination. Ignores negative or nonzero values.
+   */
+  const setPagination = useCallback(
+    ({ page, limit, totalCount, first, rows, totalRecords }) => {
+      isZeroOrPositiveInt(page) && setPage(page);
+      isZeroOrPositiveInt(limit || rows) && setLimit(limit || rows);
+      isZeroOrPositiveInt(totalCount || totalRecords) &&
+        setTotalCount(totalCount || totalRecords);
+    },
+    []
+  );
+
+  return {
+    pagination,
+    setPagination
+  };
+};

src/views/host/HostListView.js

-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { styled } from "@mui/material/styles";
 import {
   Container,
@@ -27,7 +27,7 @@ import {
   serialize,
   deserialize
 } from "../../components/common/URLState/URLState";
-import { usePagination } from "@ess-ics/ce-ui-common";
+import { usePagination } from "../../hooks/pagination";
 
 const PREFIX = "HostListView";
 
@@ -57,9 +57,26 @@ export function HostListView() {
     },
     { navigateMode: "replace" }
   );
-
   const [hostFilter, setHostFilter] = useState("ALL");
 
+  const urlPagination = useMemo(
+    () => ({
+      rows: deserialize(urlState.rows),
+      page: deserialize(urlState.page)
+    }),
+    [urlState.rows, urlState.page]
+  );
+
+  const setUrlPagination = useCallback(
+    ({ rows, page }) => {
+      setUrlState({
+        rows: serialize(rows),
+        page: serialize(page)
+      });
+    },
+    [setUrlState]
+  );
+
   const hideOwnSlider = deserialize(urlState.tab) === 2;
 
   const handleTabChange = useCallback(
@@ -99,38 +116,32 @@ export function HostListView() {
 
   const rowsPerPage = [20, 50];
 
-  const { pagination, onPage } = usePagination({
+  const { pagination, setPagination } = usePagination({
     rowsPerPageOptions: rowsPerPage,
-    initLimit: 20
+    initLimit: urlPagination.rows ?? rowsPerPage[0],
+    initPage: urlPagination.page ?? 0
   });
 
-  // update pagination whenever search result
-  // total pages change
-  useEffect(
-    () => onPage({ totalCount: hosts.totalCount ?? 0 }),
-    [onPage, hosts.totalCount]
-  );
+  // update pagination whenever search result total pages change
+  useEffect(() => {
+    setPagination({ totalCount: hosts.totalCount ?? 0 });
+  }, [setPagination, hosts.totalCount]);
 
-  const setLazyParams = useCallback(
-    ({ rows, page }) => {
-      setUrlState({ rows: serialize(rows), page: serialize(page) });
-    },
-    [setUrlState]
-  );
+  // whenever url state changes, update pagination
+  useEffect(() => {
+    setPagination({ ...urlPagination });
+  }, [setPagination, urlPagination]);
 
-  const lazyParams = useCallback(() => {
-    setLazyParams(pagination);
-    return {
-      rows: deserialize(urlState.rows),
-      page: deserialize(urlState.page),
-      ...pagination
-    };
-  }, [urlState, pagination, setLazyParams]);
+  // whenever table pagination internally changes (user clicks next page etc)
+  // update the row params
+  useEffect(() => {
+    setUrlPagination(pagination);
+  }, [pagination, setUrlPagination]);
 
-  // Request new search results whenever search changes
+  // Request new search results whenever search or pagination changes
   useEffect(() => {
     let requestParams = initRequestParams(
-      lazyParams(),
+      pagination,
       transformHostQuery(deserialize(urlState.query))
     );
     requestParams.filter =
@@ -138,7 +149,7 @@ export function HostListView() {
         ? "OWN"
         : hostFilter;
     getHosts(requestParams);
-  }, [getHosts, lazyParams, hostFilter, urlState]);
+  }, [getHosts, hostFilter, urlState.query, urlState.own, pagination]);
 
   // Callback for searchbar, called whenever user updates search
   const setSearch = useCallback(
@@ -151,6 +162,11 @@ export function HostListView() {
   const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
   const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
 
+  // Invoked by Table on change to pagination
+  const onPage = (params) => {
+    setPagination(params);
+  };
+
   const content = (
     <>
       <SearchBar