From 4c17b8ea309f0adfc84a936a326fd33b3670d18f Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Thu, 6 Jul 2023 16:06:04 +0200
Subject: [PATCH] Client: Perform pagination using AntD instead

If we let Refine do the pagination, it will only return a page's worth of items in the dataSource. This makes the sorting useless if the items span multiple pages.

Now we let Ant Design to the pagination instead.
---
 client/src/pages/filaments/list.tsx | 12 ++++++++----
 client/src/pages/spools/list.tsx    | 12 ++++++++----
 client/src/pages/vendors/list.tsx   | 12 ++++++++----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index 3a3804e..053806e 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -19,10 +19,9 @@ dayjs.extend(utc);
 
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps, sorters } = useTable<IFilament>({
-    syncWithLocation: true,
+    syncWithLocation: false,
     pagination: {
-      mode: "client",
-      pageSize: 20,
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
     },
     sorters: {
       mode: "off", // Disable server-side sorting
@@ -43,7 +42,12 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <List>
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+      <Table
+        {...tableProps}
+        dataSource={dataSource}
+        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        rowKey="id"
+      >
         <Table.Column
           dataIndex="id"
           title="Id"
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index 81fd665..bf965a6 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -19,10 +19,9 @@ dayjs.extend(utc);
 
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps, sorters } = useTable({
-    syncWithLocation: true,
+    syncWithLocation: false,
     pagination: {
-      mode: "client",
-      pageSize: 20,
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
     },
     sorters: {
       mode: "off", // Disable server-side sorting
@@ -52,7 +51,12 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <List>
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+      <Table
+        {...tableProps}
+        dataSource={dataSource}
+        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        rowKey="id"
+      >
         <Table.Column
           dataIndex="id"
           title="Id"
diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
index ff7d057..7642e5b 100644
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -17,10 +17,9 @@ dayjs.extend(utc);
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps, sorters } = useTable({
-    syncWithLocation: true,
+    syncWithLocation: false,
     pagination: {
-      mode: "client",
-      pageSize: 20,
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
     },
     sorters: {
       mode: "off", // Disable server-side sorting
@@ -41,13 +40,18 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <List>
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
         <Table.Column
           dataIndex="id"
           title="Id"
           sorter={true}
           defaultSortOrder="ascend"
         />
+      <Table
+        {...tableProps}
+        dataSource={dataSource}
+        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        rowKey="id"
+      >
         <Table.Column dataIndex="name" title="Name" sorter={true} />
         <Table.Column
           dataIndex={["registered"]}