error of merging

src/features/api/apiSlice.tsx

@@ -12,11 +12,11 @@ interface Organization {
 export const apiSlice = createApi({
     reducerPath: 'api',
     baseQuery: fetchBaseQuery({ baseUrl: "https://669f8d88b132e2c136fe5106.mockapi.io/api/v1" }),
-    tagTypes: ["organizations"],
+    tagTypes: ["organizations"], // Определяет типы тегов для инвалидации кэша или инвалидации данных, связанных с конкретными запросами или мутациями.
     endpoints: (builder) => ({
         getOrganizations: builder.query<Organization[], void>({
             query: () => '/organizations',
-            providesTags: ["organizations"],
+            providesTags: ["organizations"], // Определяет теги, которые будут инвалидированы при получении данных, чтобы обновить кэш, связанный с этими данными.
         }),
         getOrganization: builder.query<Organization, string>({
             query: (orgId) => `/organizations/${orgId}`,
@@ -27,14 +27,14 @@ export const apiSlice = createApi({
                 method: 'POST',
                 body: initialOrg,
             }),
-            invalidatesTags: ["organizations"],
+            invalidatesTags: ["organizations"], // при успешном выполнении этой мутации необходимо инвалидировать теги, связанные с организациями, чтобы обновить кэш.
         }),
         editOrganization: builder.mutation<Organization, Partial<Organization>>({
             query: ({ id, ...rest }) => ({
                 url: `/organizations/${id}`,
                 method: 'PUT',
                 body: rest,
-            }),
+            })
         }),
         deleteOrganization: builder.mutation<{ success: boolean; id: number }, number>({
             query: (orgId) => ({

src/pages/HomePage/HomePage.tsx

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { MaterialSymbol } from 'react-material-symbols';
 import { Button, Pagination, Space, Spin, Table, Tag, Modal } from 'antd';
@@ -74,7 +74,7 @@ const ActionColumn: React.FC<{ data: any }> = ({ data }) => {
     const showDeleteModal = () => {
         setOpen(true);
     };
-    
+
     const handleDeleteModalOk = () => {
         setOpen(false);
     };
@@ -95,8 +95,8 @@ const ActionColumn: React.FC<{ data: any }> = ({ data }) => {
                 open={open}
                 title={`Вы уверены в том, что хотите удалить ${data.organization_name}?`}
                 footer={() => {
-                    return <div style={{textAlign: 'start', marginTop: '1rem'}}>
-                        <Button key="submit" type="primary" danger onClick={handleDeleteModalOk} style={{marginRight: '.5rem'}}>
+                    return <div style={{ textAlign: 'start', marginTop: '1rem' }}>
+                        <Button key="submit" type="primary" danger onClick={handleDeleteModalOk} style={{ marginRight: '.5rem' }}>
                             Удалить
                         </Button>
                         <Button key="back" onClick={handleDeleteModalCancel}>
@@ -104,22 +104,31 @@ const ActionColumn: React.FC<{ data: any }> = ({ data }) => {
                         </Button>
                     </div>;
                 }}
-            />  
+            />
         </Space>
     )
 }
 
 const HomePage: React.FC = () => {
+    const [totalOrgNumber, setTotalOrgNumber] = useState(0);
+    const [currentPage, setCurrentPage] = useState(1);
+    const ORG_NUMBER_PER_PAGE = 15;
     const navigate = useNavigate();
 
     const handleAddClick = () => {
         navigate("/add");
     };
 
-    const handlePaginationChange = (page: number | string | null) => {
-        console.log("Current page:", page);
+    const handlePaginationChange = (page: React.SetStateAction<number>) => {
+        setCurrentPage(page);
     };
 
+    const paginatedData = (dataSource: DataType[]) => {
+        const startIndex = (currentPage - 1) * ORG_NUMBER_PER_PAGE;
+        const endIndex = Math.min(startIndex + ORG_NUMBER_PER_PAGE, totalOrgNumber);
+        return dataSource.slice(startIndex, endIndex);
+    }
+
     const {
         data: orgs = [],
         isLoading,
@@ -134,11 +143,17 @@ const HomePage: React.FC = () => {
         table = <Spin />
     } else if (isSuccess) {
         const dataSource = orgs.map((org) => ({ ...org, key: org.id }));
-        table = <Table dataSource={dataSource} columns={columns} pagination={false} />
+        table = <Table dataSource={paginatedData(dataSource)} columns={columns} pagination={false} />
     } else if (isError) {
         table = <div>{error.toString()}</div>
     }
 
+    useEffect(() => {
+        if (isSuccess) {
+            setTotalOrgNumber(orgs.length);
+        }
+    }, [isSuccess, orgs]);
+
     return (
         <div className="container">
             <section className='section'>
@@ -151,11 +166,11 @@ const HomePage: React.FC = () => {
                     {table}
                 </div>
                 <div className='pagination-container'>
-                    <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
+                    <Pagination current={currentPage} defaultCurrent={1} pageSize={ORG_NUMBER_PER_PAGE} total={totalOrgNumber} onChange={handlePaginationChange} />
                 </div>
             </section>
         </div>
     );
 }
 
-export default HomePage;
\ No newline at end of file
+export default HomePage;