fix: payments table

src/entities/dashboard/payment-data/payment-data.ts

@@ -3,11 +3,14 @@ import { IPostsResponse } from 'entities/settings/posts-table/model/interface'
 import { useEffect, useState } from 'react'
 import { getAxiosInstance } from 'shared/api/api-query/api-query'
 import { setPaymentsState } from 'shared/redux/dashboard/dashboard-slice'
-import { useAppDispatch } from 'shared/redux/store'
+import { useAppDispatch, useAppSelector } from 'shared/redux/store'
 
 export const usePaymentData = () => {
   const { openNotification } = useNotify()
   const dispatch = useAppDispatch()
+  const currentPage = useAppSelector((state) => state.dashboard.pagination.current)
+  const pageSize = useAppSelector((state) => state.dashboard.pagination.pageSize)
+
   const [postSelect, setPostSelect] = useState([])
 
   const fetchPosts = async () => {
@@ -27,7 +30,9 @@ export const usePaymentData = () => {
   const fetchData = async () => {
     try {
       const axiosInstance = await getAxiosInstance()
-      const res = await axiosInstance.get('/payments')
+      const res = await axiosInstance.get('/payments', {
+        params: { take: pageSize, skip: (currentPage - 1) * pageSize },
+      })
       dispatch(setPaymentsState(res.data))
     } catch (error) {
       openNotification('Произошла ошибка при загрузке данных о платежах')
@@ -37,7 +42,7 @@ export const usePaymentData = () => {
   useEffect(() => {
     fetchData()
     fetchPosts()
-  }, [])
+  }, [pageSize, currentPage])
 
   return { fetchData, postSelect }
 }

src/pages/dashboard/ui/dashboard-payment/dashboard-payment.tsx

@@ -1,8 +1,18 @@
-import { Table } from 'antd'
+import { Table, TablePaginationConfig } from 'antd'
 import { IDashboardPaymentProps } from 'pages/dashboard/ui/dashboard-payment/model/interface'
 import React, { FC } from 'react'
+import { setPaginationPayment } from 'shared/redux/dashboard/dashboard-slice'
+import { useAppDispatch, useAppSelector } from 'shared/redux/store'
 
 export const DashboardPayment: FC<IDashboardPaymentProps> = ({ total, sum, columns, rows }) => {
+  const dispatch = useAppDispatch()
+  const currentPage = useAppSelector((state) => state.dashboard.pagination.current)
+  const pageSize = useAppSelector((state) => state.dashboard.pagination.pageSize)
+
+  const handleTableChange = (pagination: TablePaginationConfig) => {
+    dispatch(setPaginationPayment({ current: pagination.current, pageSize: pagination.pageSize }))
+  }
+
   return (
     <>
       <Table
@@ -11,8 +21,12 @@ export const DashboardPayment: FC<IDashboardPaymentProps> = ({ total, sum, colum
         bordered={true}
         showHeader={true}
         tableLayout={'fixed'}
+        onChange={handleTableChange}
         pagination={{
           total: total,
+          current: currentPage,
+          pageSize: pageSize,
+          showSizeChanger: true,
         }}
         scroll={{
           x: 'max-content',

src/shared/redux/dashboard/dashboard-slice.ts

@@ -5,6 +5,7 @@ const initialState = {
   posts: undefined,
   typeDate: 1,
   selectedDates: { start: undefined, end: undefined },
+  pagination: { current: 1, pageSize: 10 },
 }
 
 export const DashboardSlice = createSlice({
@@ -23,10 +24,18 @@ export const DashboardSlice = createSlice({
     setPaymentsSelectedDates: (state, action) => {
       state.selectedDates = action.payload
     },
+    setPaginationPayment: (state, action) => {
+      state.pagination = action.payload
+    },
   },
 })
 
-export const { setPaymentsState, setPaymentsPost, setPaymentsSelectedDates, setPaymentsTypeDate } =
-  DashboardSlice.actions
+export const {
+  setPaymentsState,
+  setPaymentsPost,
+  setPaginationPayment,
+  setPaymentsSelectedDates,
+  setPaymentsTypeDate,
+} = DashboardSlice.actions
 
 export default DashboardSlice.reducer