fix: pagination on all page

src/component/PartnerComponent.js

@@ -1,23 +1,11 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, {useContext, useState} from "react";
-import {
+import {Button, Divider, Form, Input, List, message, Modal, Space, Table, Tag,} from "antd";
-  Button,
+import {observer} from "mobx-react-lite";
-  Form,
+import {ExclamationCircleOutlined} from "@ant-design/icons";
-  Input,
+import {useHistory} from "react-router-dom";
-  message,
+import {useStore} from "../utils/useStore";
-  Modal,
+import {LINKS} from "../routes/app";
-  Select,
+import {ModalLoaderContext} from "../utils/modal";
-  Space,
-  Table,
-  Tag,
-  List,
-  Divider,
-} from "antd";
-import { observer } from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
-import { useStore } from "../utils/useStore";
-import { LINKS } from "../routes/app";
-import { ModalLoaderContext } from "../utils/modal";
 
 export const PartnerComponent = observer((props) => {
   const store = useStore();
@@ -223,15 +211,15 @@ export const PartnerComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.partner.pageSize = page.pageSize;
-              store.partner.page = page.current;
+              store.partner.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.partner.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.partner.pageSize,
             total: store.partner.total_data,
-            current: store.partner.page,
+            current: store.partner.page + 1,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.partner.data}
           style={{ padding: 0 }}

src/component/ProductComponent.js

@@ -281,15 +281,15 @@ export const ProductComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.product.pageSize = page.pageSize;
-              store.product.page = page.current;
+              store.product.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.product.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.product.pageSize,
             total: store.product.total_data,
-            current: store.product.page,
+            current: store.product.page + 1,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.product.data}
           style={{ padding: 0 }}

src/component/SubcategoryComponent.js

@@ -125,15 +125,15 @@ export const SubcategoryComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.subcategory.pageSize = page.pageSize;
-              store.subcategory.page = page.current;
+              store.subcategory.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.subcategory.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.subcategory.pageSize,
             total: store.subcategory.total_data,
-            current: store.subcategory.page,
+            current: store.subcategory.page + 1,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.subcategory.data}
           style={{ padding: 0 }}

src/component/SupplierComponent.js

@@ -1,23 +1,12 @@
-import React, { useContext, useState } from "react";
+import React, {useContext, useState} from "react";
-import {
+import {Button, Divider, Form, Input, List, message, Modal, Space, Table, Tag,} from "antd";
-  Button,
+import {observer} from "mobx-react-lite";
-  Form,
+import {ExclamationCircleOutlined} from "@ant-design/icons";
-  Input,
+import {useHistory} from "react-router-dom";
-  message,
+import {useStore} from "../utils/useStore";
-  Modal,
+import {LINKS} from "../routes/app";
-  Space,
+import {TopupsaldoModal} from "./TopupsaldoModal";
-  Table,
+import {ModalLoaderContext} from "../utils/modal";
-  Tag,
-  List,
-  Divider,
-} from "antd";
-import { observer } from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
-import { useStore } from "../utils/useStore";
-import { LINKS } from "../routes/app";
-import { TopupsaldoModal } from "./TopupsaldoModal";
-import { ModalLoaderContext } from "../utils/modal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
@@ -231,15 +220,15 @@ export const SupplierComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.supplier.pageSize = page.pageSize;
-              store.supplier.page = page.current;
+              store.supplier.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.supplier.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.supplier.pageSize,
             total: store.supplier.total_data,
-            current: store.supplier.page,
+            current: store.supplier.page + 1,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.supplier.data}
           style={{ padding: 0 }}

src/pages/Membership/Membership.js

@@ -338,17 +338,17 @@ export const Membership = observer(() => {
               itemLayout="horizontal"
               position={"top"}
               pagination={{
-                onChange: async (page) => {
+                  onChange: async (page) => {
-                  store.membership.pageSize = page.pageSize;
+                      store.membership.pageSize = page.pageSize;
-                  store.membership.page = page.current;
+                      store.membership.page = page.current - 1;
-                  modalLoader.setLoading(true);
+                      modalLoader.setLoading(true);
-                  await getData();
+                      await getData();
-                  modalLoader.setLoading(false);
+                      modalLoader.setLoading(false);
-                },
+                  },
-                pageSize: store.membership.pageSize,
+                  pageSize: store.membership.pageSize,
-                total: store.membership.total_data,
+                  total: store.membership.total_data,
-                current: store.membership.page,
+                  current: store.membership.page + 1,
-                style: { marginBottom: "1rem", marginRight: "1rem" },
+                  style: {marginBottom: "1rem", marginRight: "1rem"},
               }}
               dataSource={store.membership.data}
               style={{ padding: 0 }}

src/pages/Profile/Profile.js

@@ -145,9 +145,24 @@ export const Profile = observer(() => {
                 Filter
               </Button>
               <Table
-                columns={columns}
+                  columns={columns}
-                dataSource={store.transaction.dataHistoryTransaction}
+                  bordered
-                bordered
+                  dataSource={store.transaction.dataHistoryTransaction}
+                  pagination={{
+                    pageSize: store.transaction.pageSizeHistoryTransaction,
+                    total: store.transaction.total_dataHistoryTransaction,
+                    current: store.transaction.pageHistoryTransaction + 1,
+                    showSizeChanger: true,
+                    simple: false,
+                  }}
+                  onChange={async (page) => {
+                    let pageNumber = page.current;
+                    store.transaction.pageSizeHistoryTransaction = page.pageSize;
+                    store.transaction.pageHistoryTransaction = pageNumber - 1;
+                    modalLoader.setLoading(true);
+                    await store.transaction.getDataHistoryTransaction();
+                    modalLoader.setLoading(false);
+                  }}
               />
             </div>
           </Col>

src/store/transaction.js

@@ -23,7 +23,7 @@ export class Transaction {
 
     pageHistoryTransaction = 0;
     pageHistoryTopUp = 0;
-    // pageSizeHistoryTransaction = 10
+    pageSizeHistoryTransaction = 10
     dataHistoryTransaction = [];
     total_dataHistoryTransaction = 0;
 
@@ -71,7 +71,7 @@ export class Transaction {
 
     async getDataHistoryTransaction() {
         try {
-            const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}`);
+            const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}`);
 
             this.dataHistoryTransaction = response.body.data ?? []
             this.total_dataHistoryTransaction = response?.body?.count ?? 0