Merge pull request #15914 from GordonSmith/HPCC-27387-PaginationRegression

HPCC-27387 FluentUI Grid Pagination Regression

Reviewed-By: Jeremy Clements <jeremy.clements@lexisnexisrisk.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/src/src-react/hooks/grid.tsx

@@ -142,10 +142,10 @@ function useFluentStoreGrid({
     const [sorted, setSorted] = React.useState<QuerySortItem>(sort);
     const [selection, setSelection] = React.useState([]);
     const [items, setItems] = React.useState<any[]>([]);
-    const [total, setTotal] = React.useState<number>();
+    const [total, setTotal] = React.useState<number>(0);
 
     const refreshTable = React.useCallback(() => {
-        if (isNaN(start) || isNaN(count)) return;
+        if (isNaN(start) || (isNaN(count) || count === 0)) return;
         const storeQuery = store.query(query ?? {}, { start, count, sort: sorted ? [sorted] : undefined });
         storeQuery.total.then(total => {
             setTotal(total);
@@ -278,7 +278,11 @@ export function useFluentPagedGrid({
     const [page, setPage] = React.useState(0);
     const [persistedPageSize, setPersistedPageSize] = useUserStore(`${persistID}_pageSize`, "25");
     const pageSize = React.useMemo(() => {
-        return parseInt(persistedPageSize);
+        const retVal = parseInt(persistedPageSize);
+        if (isNaN(retVal)) {
+            return 0;
+        }
+        return retVal;
     }, [persistedPageSize]);
     const { Grid, selection, copyButtons, total, refreshTable } = useFluentStoreGrid({ store, query, sort, start: page * pageSize, count: pageSize, columns, filename });
     const [theme] = useUserTheme();

esp/src/src-react/hooks/store.ts

@@ -9,7 +9,7 @@ function useStore(store: IKeyValStore, key: string, defaultValue?: string, monit
     React.useEffect(() => {
         if (!store) return;
         store.get(key).then(value => {
-            setValue(value === undefined ? defaultValue : value);
+            setValue(typeof value !== "string" ? defaultValue : value);
         }).catch(e => {
             setValue(defaultValue);
         });