agent

src/pages/members/agent-balance/AgentBalance.tsx

@@ -44,6 +44,7 @@ const AgentBalance = () => {
   const [dataBalance, setDataBalance] = useState([]);
   const [formData, setFormData] = useState(initBalance);
   const [pageIndex, setPageIndex] = useState(1);
+  const [currentPage, setCurrentPage] = useState(0);
   const [pageSize, setPageSize] = useState(10);
   const [dialogType, setDialogType] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -52,34 +53,42 @@ const AgentBalance = () => {
   // const [selectedMember, setSelectedMember] = useState(initBalance);
 
   useEffect(() => {
-   fetchAgentBalance();
+  //  fetchAgentBalance();
   }, []);
 
-  async function fetchAgentBalance(): Promise<void> {
-    setIsReloading(true);
-    try {
-      let balances = await axios.get(`${BASE_URL}/customer/agent-balance`, {
-        params: {
-          limit: 20,
-          page: 1,
-          with_deleted: false,
-          order_field: 'created_at',
-          order_direction: 'DESC'
-        }
-      });
-      let temp = 1;
-      let resBalance = balances.data.data.list.map((el: any) => {
-        el.no = temp++;
-        if (!el.agent_name) el.agent_name = ''
-        return el;
-      });
-      setDataBalance(resBalance);
-    } catch (error: any) {
-      alert(error.message);
-      console.log(error);
-    } finally {
-      setIsReloading(false);
-    }
+  const fetchAgentBalance = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    filter = filter.length ? filter : {};
+    let balances = await axios.get(`${BASE_URL}/customer/agent-balance`, {
+      params: {
+        limit: limit,
+        page: page + 1, // +1 because your API uses 1-based pages
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'DESC',
+        filter: JSON.stringify(filter),
+      }
+    });
+    let temp = 1;
+    let resBalance = balances.data.data.list.map((el: any) => {
+      el.no = temp++;
+      if (!el.agent_name) el.agent_name = ''
+      return el;
+    });
+    return { data: resBalance, totalCount: balances?.data.data.total_count }
+    // setIsReloading(true);
+    // try {
+    //   // setDataBalance(resBalance);
+    // } catch (error: any) {
+    //   alert(error.message);
+    //   console.log(error);
+    // } finally {
+    //   setIsReloading(false);
+    // }
   }
 
   const openDialog = () => setIsDialogOpen(true);
@@ -100,9 +109,11 @@ const AgentBalance = () => {
     setIsDialogOpen(true);
   };
 
-  const handleReload = () => {
+  const handleReload = async () => {
     setIsReloading(true);
-    fetchAgentBalance();
+    await fetchAgentBalance(currentPage, pageSize, '','');
+    setIsReloading(false);
+    // fetchAgentBalance();
   };
 
   async function getQrCode(customerId:any): Promise<void> {
@@ -154,24 +165,28 @@ const AgentBalance = () => {
           {isReloading && (
             <DataGridLoader />
           )}
-          <DataGridProvider
-            data={dataBalance}
-            columns={getColumns(handleUpdate)}
-            pagination={{ size: 10 }}
-            toolbar={
-              <ListToolBar
-                createGroup={createGroup}
-                onReload={handleReload}
-                isReloading={isReloading}
-              />
-            }
-            layout={{ card: true }}
-            serverSide={false}
-            onRowSelectionChange={(selected, table: any) => {
-              const selectedRow = table.getSelectedRowModel().rows[0];
-              if (selectedRow) handleUpdate(selectedRow.original);
-            }}
-          />
+          {!isReloading && (<DataGridProvider
+              // data={dataBalance}
+              pagination={{ size: pageSize }}
+              columns={getColumns(handleUpdate)}
+              layout={{ card: true }}
+              serverSide={true}
+              onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+                fetchAgentBalance(pageIndex, pageSize, sorting, columnFilters)
+              }
+              toolbar={
+                <ListToolBar
+                  createGroup={createGroup}
+                  onReload={handleReload}
+                  isReloading={isReloading}
+                />
+              }
+              onRowSelectionChange={(selected, table: any) => {
+                const selectedRow = table.getSelectedRowModel().rows[0];
+                if (selectedRow) handleUpdate(selectedRow.original);
+              }}
+            />
+          )}
         </div>
         {/* </div> */}