added table reset after changing the page

src/components/Header/Header.tsx

@@ -43,7 +43,7 @@ const Header: React.FC = () => {
                     }}
                     placement='left'
                     className='custom-drawer'
-                    title="ЕСУТДjh"
+                    title="ЕСУТД"
                 >
                     <Menu
                         theme='dark'

src/features/api/apiSlice.tsx

 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { RootState } from '../../main';
 
-interface Organization {
-    id: number;
-    bin: string;
-    code: string;
-    name: string;
-    status: number;
-    created: string;
-    deleted: null;
-    login: string;
-    password: string;
-    host: string;
-}
-
 export const apiSlice = createApi({
     reducerPath: 'api',
     baseQuery: fetchBaseQuery({

src/features/pagination/reqPagination.ts

 import { createSlice } from "@reduxjs/toolkit";
 
-const initialState = {
+interface InitialState {
+    currentPage: number,
+    totalReqNumber: number,
+    REQ_NUMBER_PER_PAGE: number,
+}
+
+const initialState:InitialState = {
     currentPage: 1,
     totalReqNumber: 0,
-    REQ_NUMBER_PER_PAGE: 10
+    REQ_NUMBER_PER_PAGE: 12
 }
 
 const reqPaginationSlice = createSlice({

src/pages/HomePage/HomePage.tsx

-import React, { useEffect } from 'react';
+import React, { createRef, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useSelector, useDispatch } from 'react-redux';
 import { Button, Pagination, Spin, Table } from 'antd';
 import { useGetOrganizationsQuery } from '../../features/api/organizationApiSlice';
 import { setCurrentPage, setTotalOrgNumber } from '../../features/pagination/mainPagination';
 import { DataType, columns } from './Columns';
+import { TableRef } from 'antd/es/table';
 import './Homepage.css';
 
 const HomePage: React.FC = () => {
     const navigate = useNavigate();
     const dispatch = useDispatch();
+    const tableRef = createRef<TableRef>();
     const totalOrgNumber = useSelector((state: any) => state.mainPagination.totalOrgNumber);
     const currentPage = useSelector((state: any) => state.mainPagination.currentPage);
     const ORG_NUMBER_PER_PAGE = useSelector((state: any) => state.mainPagination.ORG_NUMBER_PER_PAGE);
@@ -19,6 +21,7 @@ const HomePage: React.FC = () => {
     };
 
     const handlePaginationChange = (page: number) => {
+        tableRef.current?.nativeElement.scrollIntoView({ behavior: 'smooth' });
         dispatch(setCurrentPage(page));
     };
 
@@ -41,7 +44,12 @@ const HomePage: React.FC = () => {
     if (isLoading) {
         table = <Spin />
     } else if (isSuccess) {
-        table = <Table dataSource={paginatedData(orgs)} columns={columns} pagination={false} rowKey="id" />
+        table = <Table 
+        dataSource={paginatedData(orgs)} 
+        columns={columns} pagination={false} 
+        rowKey="id" 
+        ref={tableRef}
+    />
     } else if (isError) {
         console.log(error)
         table = <div>{error.toString()}</div>

src/pages/HomePage/Homepage.css

@@ -45,7 +45,7 @@
 .data {
     flex: 1;
     overflow-y: auto;
-    margin-bottom: 75px;
+    padding-bottom: 20px;
 }
 
 .data-table {

src/pages/RequestPage/Columns.tsx

@@ -89,7 +89,7 @@ export const columns: TableProps<DataType>['columns'] = [
     }
 ]
 
-export const ResendColumn: React.FC<{ data: DataType }> = () => {
+export const ResendColumn: React.FC<{ data: DataType }> = ({ data }) => {
     const [open, setOpen] = useState<boolean>(false);
 
     const showResendModal = () => {
@@ -112,10 +112,10 @@ export const ResendColumn: React.FC<{ data: DataType }> = () => {
 
     return (
         <Space>
-            <Button onClick={showResendModal}>П</Button>
+            <Button onClick={showResendModal}>Переотправить</Button>
             <Modal
                 open={open}
-                title={`Вы уверены, что хотите переотправить?`}
+                title={`Вы уверены, что хотите переотправить запрос с id ${data.id}?`}
                 onCancel={handleResendModalCancel}
                 onOk={handleResendModalOk}
                 >

src/pages/RequestPage/RequestPage.css

 .filter {
-    margin: 1rem 1rem 2rem;
+    margin: 1rem 1rem 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/pages/RequestPage/RequestPage.tsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useState, createRef } from 'react';
 import dayjs from 'dayjs';
+// import isBetween from 'dayjs/plugin/isBetween';
+// import customParseFormat from "dayjs/plugin/customParseFormat";
 import { DatePicker, Select, Button, Pagination, Spin, Table } from 'antd';
 import { useDispatch, useSelector } from 'react-redux';
 import { columns, DataType } from './Columns';
 import { useGetRequestsQuery } from '../../features/api/requestApiSlice';
 import { setCurrentPage, setTotalReqNumber } from '../../features/pagination/reqPagination';
 import './RequestPage.css';
+import { TableRef } from 'antd/es/table';
 
 const dateFormat = 'YYYY/MM/DD';
 
 const RequestPage: React.FC = () => {
     const dispatch = useDispatch();
+    const tableRef = createRef<TableRef>();
     const totalReqNumber = useSelector((state: any) => state.reqPagination.totalReqNumber);
     const currentPage = useSelector((state: any) => state.reqPagination.currentPage);
     const REQ_NUMBER_PER_PAGE = useSelector((state: any) => state.reqPagination.REQ_NUMBER_PER_PAGE);
 
+    const [startDate, setStartDate] = useState<Date>();
+    const [endDate, setEndDate] = useState<Date>();
+    const [method, setMethod] = useState('');
+    const [filteredData, setFilteredData] = useState<Request[]>([]);
+
     const handlePaginationChange = (page: number) => {
+        tableRef.current?.nativeElement.scrollIntoView({ behavior: 'smooth' });
         dispatch(setCurrentPage(page));
     };
 
@@ -25,6 +35,26 @@ const RequestPage: React.FC = () => {
         return dataSource.slice(startIndex, endIndex);
     };
 
+    const filterByDate = () => {
+        if (!startDate || !endDate) return;
+
+        const filtered = reqs.list.filter((req) => {
+            const sendDate = dayjs(req.sendDate, dateFormat);
+        });
+
+        console.log(filtered);
+        // setFilteredData(filtered);
+        dispatch(setTotalReqNumber(filtered.length));
+    };
+
+    const onSelectStartDate = (dateString: any) => {
+        setStartDate(dateString);
+    }
+
+    const onSelectEndDate = (dateString: any) => {
+        setEndDate(dateString);
+    }
+
     const {
         data: reqs = { list: [] },
         isLoading,
@@ -33,8 +63,6 @@ const RequestPage: React.FC = () => {
         error
     } = useGetRequestsQuery();
 
-    console.log(reqs)
-
     let table;
 
     if (isLoading) {
@@ -44,6 +72,8 @@ const RequestPage: React.FC = () => {
             dataSource={paginatedData(reqs.list)} 
             columns={columns} 
             pagination={false}
+            rowKey="id"
+            ref={tableRef}
         />;
     } else if (isError) {
         console.log(error);
@@ -61,15 +91,24 @@ const RequestPage: React.FC = () => {
             <div className="filter">
                 <div className="fields">
                     <div className="dates">
-                        <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} style={{ marginRight: 14 }} />
-                        <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} />
+                        <DatePicker onChange={onSelectStartDate} defaultValue={dayjs('2024/07/11', dateFormat)} format={dateFormat} style={{ marginRight: 14 }} />
+                        <DatePicker onChange={onSelectEndDate} defaultValue={dayjs('2024/07/11', dateFormat)} format={dateFormat} />
                     </div>
                     <div className="category">
-                        <Select placeholder="Не выбрано" style={{ width: 270 }} options={[]} />
+                        <Select placeholder="Не выбрано" style={{ width: 270 }} options={[
+                            {
+                                value: "contract",
+                                label: "contract"
+                            },
+                            {
+                                value: "dictionary",
+                                label: "dictionary"
+                            }
+                        ]} />
                     </div>
                 </div>
 
-                <Button type='primary'>Применить</Button>
+                <Button onClick={filterByDate} type='primary'>Применить</Button>
             </div>
             <div className="data">
                 {table}
@@ -81,6 +120,7 @@ const RequestPage: React.FC = () => {
                     pageSize={REQ_NUMBER_PER_PAGE}
                     total={totalReqNumber}
                     onChange={handlePaginationChange}
+                    hideOnSinglePage={true}
                 />
             </div>
         </div>