added filter in RequestPage

src/pages/RequestPage/Columns.tsx

@@ -42,7 +42,7 @@ export const columns: TableProps<DataType>['columns'] = [
         key: "sendDate",
         width: '11%',
         render: (_, record) => (
-            <span>{dayjs(record.sendDate).format('YYYY-MM-DD HH:mm:ss')}</span>
+            <span>{dayjs(record.sendDate).format('DD-MM-YYYY HH:mm:ss')}</span>
         )
     },
     {

src/pages/RequestPage/RequestPage.tsx

 import React, { useEffect, useState, createRef } from 'react';
-import dayjs from 'dayjs';
-// import isBetween from 'dayjs/plugin/isBetween';
-// import customParseFormat from "dayjs/plugin/customParseFormat";
+import dayjs, { Dayjs } from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
 import { DatePicker, Select, Button, Pagination, Spin, Table } from 'antd';
 import { useDispatch, useSelector } from 'react-redux';
 import { columns, DataType } from './Columns';
@@ -10,7 +9,8 @@ import { setCurrentPage, setTotalReqNumber } from '../../features/pagination/req
 import { TableRef } from 'antd/es/table';
 import './RequestPage.css';
 
-const dateFormat = 'YYYY/MM/DD';
+dayjs.extend(isBetween);
+const dateFormat = 'DD/MM/YYYY';
 
 const RequestPage: React.FC = () => {
     const dispatch = useDispatch();
@@ -19,53 +19,54 @@ const RequestPage: React.FC = () => {
     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();
+    const [startDate, setStartDate] = useState<Dayjs | null>(null);
+    const [endDate, setEndDate] = useState<Dayjs | null>(null);
+    const [data, setData] = useState<DataType[]>([]);
     const [method, setMethod] = useState('');
-    const [filteredData, setFilteredData] = useState<Request[]>([]);
 
     const handlePaginationChange = (page: number) => {
-        // tableRef.current?.nativeElement.scrollIntoView({ behavior: 'smooth' });
+        /*
+            scrollIntoView resets to the top of the table after changing the page with Pagination. But the bug was found - the add button scrolls to top of the page too, under the Header component. It happens because of overflow
+        */
+        // tableRef.current?.nativeElement.scrollIntoView({ behavior: 'smooth' }); 
         dispatch(setCurrentPage(page));
     };
 
-    const paginatedData = (dataSource: DataType[]) => {
+    const paginateData = (dataSource: DataType[]) => {
         const startIndex = (currentPage - 1) * REQ_NUMBER_PER_PAGE;
         const endIndex = Math.min(startIndex + REQ_NUMBER_PER_PAGE, totalReqNumber);
         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);
+    const applyFilters = () => {
+        let filtered = reqs.list;
+    
+        if (startDate && endDate) {
+            filtered = filtered.filter((req) => {
+                const sendDate = dayjs(req.sendDate, dateFormat);
+                return sendDate.isBetween(startDate, endDate, 'day', '[]');
+            });
+        }
+        
+        if (method && method !== 'all') {
+            filtered = filtered.filter(req => req.requestType === method);
+        }
+    
+        setData(filtered);
+        dispatch(setCurrentPage(1));
         dispatch(setTotalReqNumber(filtered.length));
-    };
+    }
 
-    const setDefaultDate = () => {
-        let min = Infinity;
-        reqs.list.map((req) => {
-            const dateValue = new Date(req.sendDate).valueOf();
-            if (min >= dateValue) {
-                min = dateValue; 
-            }
-        })
-        let minDateType = new Date(min);
-        setStartDate(minDateType);
+    const onSelectStartDate = (date: Dayjs | null) => {
+        setStartDate(date);
     }
 
-    const onSelectStartDate = (dateString: any) => {
-        setStartDate(dateString);
+    const onSelectEndDate = (date: Dayjs | null) => {
+        setEndDate(date);
     }
 
-    const onSelectEndDate = (dateString: any) => {
-        setEndDate(dateString);
+    const onSelectMethod = (method: string) => {
+        setMethod(method);
     }
 
     const {
@@ -77,55 +78,91 @@ const RequestPage: React.FC = () => {
     } = useGetRequestsQuery();
 
     let table;
-
+    let min: number = Infinity;
+    let max: number = -Infinity;
+    
     if (isLoading) {
         table = <Spin />;
     } else if (isSuccess) {
+        reqs.list.forEach((req) => {
+            const dateValue = new Date(req.sendDate).valueOf();
+            if (min > dateValue) {
+                min = dateValue; 
+            }
+            if (max < dateValue) {
+                max = dateValue;
+            }
+        })
         table = <Table 
-            dataSource={paginatedData(reqs.list)} 
+            dataSource={paginateData(data)} 
             columns={columns} 
             pagination={false}
             rowKey="id"
             ref={tableRef}
         />;
-    } else if (isError) {
+    } else if (isError) {   
         console.log(error);
         table = <div>{error.toString()}</div>;
     }
 
     useEffect(() => {
         if (isSuccess) {
+            setData(reqs.list); 
             dispatch(setTotalReqNumber(reqs.list.length));
+            setStartDate(dayjs(min));
+            setEndDate(dayjs(max));
         }
     }, [isSuccess, reqs, dispatch]);
 
-    useEffect(() => {
-        setDefaultDate();
-    }, [setStartDate])
-
     return (
         <div className="container">
             <div className="filter">
                 <div className="fields">
                     <div className="dates">
-                        <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} />
+                        <DatePicker 
+                            onChange={onSelectStartDate} 
+                            format={dateFormat} 
+                            defaultValue={startDate}
+                            value={startDate}
+                            style={{ marginRight: 14 }} 
+                        />
+                        <DatePicker 
+                            onChange={onSelectEndDate} 
+                            format={dateFormat} 
+                            defaultValue={endDate}
+                            value={endDate}
+                        />
                     </div>
                     <div className="category">
-                        <Select placeholder="Не выбрано" style={{ width: 270 }} options={[
-                            {
-                                value: "contract",
-                                label: "contract"
-                            },
-                            {
-                                value: "dictionary",
-                                label: "dictionary"
-                            }
-                        ]} />
+                        <Select 
+                            placeholder="Не выбрано" 
+                            style={{ width: 270 }} 
+                            onChange={onSelectMethod}
+                            defaultValue={'all'}
+                            options={[
+                                {
+                                    value: 'all',
+                                    label: 'Все методы'
+                                },
+                                {
+                                    value: "contract",
+                                    label: "contract"
+                                },
+                                {
+                                    value: "dictionary",
+                                    label: "dictionary"
+                                }
+                            ]} 
+                        />
                     </div>
                 </div>
 
-                <Button onClick={filterByDate} type='primary'>Применить</Button>
+                <Button 
+                    type='primary'
+                    onClick={applyFilters}
+                >
+                    Применить
+                </Button>
             </div>
             <div className="data">
                 {table}