Client: Fixed up pagination, now also stored

Donkie · Jul 6, 2023 · eeac30a · eeac30a
1 parent 58833f2
commit eeac30a
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 53 deletions.
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
@@ -41,28 +41,43 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   const initialState = useInitialTableState("filamentList");
 
   // Fetch data from the API
-  const { tableProps, sorters, filters, setSorters, setFilters } =
-    useTable<IFilament>({
-      syncWithLocation: false,
-      pagination: {
-        mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
-      },
-      sorters: {
-        mode: "off", // Disable server-side sorting
-        initial: initialState.sorters,
-      },
-      filters: {
-        mode: "off", // Disable server-side filtering
-        initial: initialState.filters,
-      },
-    });
+  const {
+    tableProps,
+    sorters,
+    setSorters,
+    filters,
+    setFilters,
+    current,
+    pageSize,
+    setCurrent,
+    setPageSize,
+  } = useTable<IFilament>({
+    syncWithLocation: false,
+    pagination: {
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
+      current: initialState.pagination.current,
+      pageSize: initialState.pagination.pageSize,
+    },
+    sorters: {
+      mode: "off", // Disable server-side sorting
+      initial: initialState.sorters,
+    },
+    filters: {
+      mode: "off", // Disable server-side filtering
+      initial: initialState.filters,
+    },
+  });
 
   // Type the sorters and filters
   const typedSorters = typeSorters<IFilamentCollapsed>(sorters);
   const typedFilters = typeFilters<IFilamentCollapsed>(filters);
 
   // Store state in local storage
-  useStoreInitialState("filamentList", { sorters, filters });
+  useStoreInitialState("filamentList", {
+    sorters,
+    filters,
+    pagination: { current, pageSize },
+  });
 
   // Collapse the dataSource to a mutable list and add a filament_name field
   const dataSource: IFilamentCollapsed[] = React.useMemo(
@@ -96,6 +111,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             onClick={() => {
               setFilters([], "replace");
               setSorters([{ field: "id", order: "asc" }]);
+              setCurrent(1);
             }}
           >
             Clear Filters
@@ -107,7 +123,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
       <Table
         {...tableProps}
         dataSource={filteredDataSource}
-        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        pagination={{
+          showSizeChanger: true,
+          current: current,
+          pageSize: pageSize,
+          onChange: (page, pageSize) => {
+            setCurrent(page);
+            setPageSize(pageSize);
+          },
+        }}
         rowKey="id"
       >
         <Table.Column

diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
@@ -42,28 +42,43 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const initialState = useInitialTableState("spoolList");
 
   // Fetch data from the API
-  const { tableProps, sorters, filters, setSorters, setFilters } =
-    useTable<ISpool>({
-      syncWithLocation: false,
-      pagination: {
-        mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
-      },
-      sorters: {
-        mode: "off", // Disable server-side sorting
-        initial: initialState.sorters,
-      },
-      filters: {
-        mode: "off", // Disable server-side filtering
-        initial: initialState.filters,
-      },
-    });
+  const {
+    tableProps,
+    sorters,
+    setSorters,
+    filters,
+    setFilters,
+    current,
+    pageSize,
+    setCurrent,
+    setPageSize,
+  } = useTable<ISpool>({
+    syncWithLocation: false,
+    pagination: {
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
+      current: initialState.pagination.current,
+      pageSize: initialState.pagination.pageSize,
+    },
+    sorters: {
+      mode: "off", // Disable server-side sorting
+      initial: initialState.sorters,
+    },
+    filters: {
+      mode: "off", // Disable server-side filtering
+      initial: initialState.filters,
+    },
+  });
 
   // Type the sorters and filters
   const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
   const typedFilters = typeFilters<ISpoolCollapsed>(filters);
 
   // Store state in local storage
-  useStoreInitialState("spoolList", { sorters, filters });
+  useStoreInitialState("spoolList", {
+    sorters,
+    filters,
+    pagination: { current, pageSize },
+  });
 
   // Collapse the dataSource to a mutable list and add a filament_name field
   const dataSource: ISpoolCollapsed[] = React.useMemo(
@@ -98,6 +113,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             onClick={() => {
               setFilters([], "replace");
               setSorters([{ field: "id", order: "asc" }]);
+              setCurrent(1);
             }}
           >
             Clear Filters
@@ -109,7 +125,15 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
       <Table
         {...tableProps}
         dataSource={filteredDataSource}
-        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        pagination={{
+          showSizeChanger: true,
+          current: current,
+          pageSize: pageSize,
+          onChange: (page, pageSize) => {
+            setCurrent(page);
+            setPageSize(pageSize);
+          },
+        }}
         rowKey="id"
       >
         <Table.Column

diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
@@ -31,28 +31,43 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const initialState = useInitialTableState("vendorList");
 
   // Fetch data from the API
-  const { tableProps, sorters, filters, setSorters, setFilters } =
-    useTable<IVendor>({
-      syncWithLocation: false,
-      pagination: {
-        mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
-      },
-      sorters: {
-        mode: "off", // Disable server-side sorting
-        initial: initialState.sorters,
-      },
-      filters: {
-        mode: "off", // Disable server-side filtering
-        initial: initialState.filters,
-      },
-    });
+  const {
+    tableProps,
+    sorters,
+    setSorters,
+    filters,
+    setFilters,
+    current,
+    pageSize,
+    setCurrent,
+    setPageSize,
+  } = useTable<IVendor>({
+    syncWithLocation: false,
+    pagination: {
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
+      current: initialState.pagination.current,
+      pageSize: initialState.pagination.pageSize,
+    },
+    sorters: {
+      mode: "off", // Disable server-side sorting
+      initial: initialState.sorters,
+    },
+    filters: {
+      mode: "off", // Disable server-side filtering
+      initial: initialState.filters,
+    },
+  });
 
   // Type the sorters and filters
   const typedSorters = typeSorters<IVendor>(sorters);
   const typedFilters = typeFilters<IVendor>(filters);
 
   // Store state in local storage
-  useStoreInitialState("vendorList", { sorters, filters });
+  useStoreInitialState("vendorList", {
+    sorters,
+    filters,
+    pagination: { current, pageSize },
+  });
 
   // Collapse the dataSource to a mutable list
   const dataSource: IVendor[] = React.useMemo(
@@ -77,6 +92,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
             onClick={() => {
               setFilters([], "replace");
               setSorters([{ field: "id", order: "asc" }]);
+              setCurrent(1);
             }}
           >
             Clear Filters
@@ -88,7 +104,15 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
       <Table
         {...tableProps}
         dataSource={filteredDataSource}
-        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        pagination={{
+          showSizeChanger: true,
+          current: current,
+          pageSize: pageSize,
+          onChange: (page, pageSize) => {
+            setCurrent(page);
+            setPageSize(pageSize);
+          },
+        }}
         rowKey="id"
       >
         <Table.Column

diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
@@ -69,7 +69,6 @@ export function useListFiltersForField<Obj, Field extends keyof Obj>(
     dataSource: Obj[],
     field: Field): ColumnFilterItem[] {
     return React.useMemo(() => {
-        console.log("useListFiltersForField");
         const filters: ColumnFilterItem[] = [];
         dataSource.forEach((element) => {
             const value = element[field];

diff --git a/client/src/utils/saveload.ts b/client/src/utils/saveload.ts
@@ -2,18 +2,26 @@ import React from "react";
 import { CrudFilter, CrudSort } from "@refinedev/core";
 import { isLocalStorageAvailable } from "./support";
 
+interface Pagination {
+    current: number;
+    pageSize: number;
+}
+
 interface TableState {
     sorters: CrudSort[];
     filters: CrudFilter[];
+    pagination: Pagination;
 }
 
 export function useInitialTableState(tableId: string): TableState {
     const [initialState] = React.useState(() => {
         const savedSorters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null;
         const savedFilters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null;
+        const savedPagination = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null;
         const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }];
         const filters = savedFilters ? JSON.parse(savedFilters) : [];
-        return { sorters, filters };
+        const pagination = savedPagination ? JSON.parse(savedPagination) : { page: 1, pageSize: 20 };
+        return { sorters, filters, pagination };
     });
     return initialState;
 }
@@ -30,4 +38,10 @@ export function useStoreInitialState(tableId: string, state: TableState) {
             localStorage.setItem(`${tableId}-filters`, JSON.stringify(state.filters));
         }
     }, [tableId, state.filters]);
+
+    React.useEffect(() => {
+        if (isLocalStorageAvailable) {
+            localStorage.setItem(`${tableId}-pagination`, JSON.stringify(state.pagination));
+        }
+    }, [tableId, state.pagination]);
 }