Фильтрация сообщений в шапке таблицы

src/pages/Messages.jsx

@@ -1,14 +1,16 @@
-import {Button, Table, Select} from 'antd';
+import {Button, Table, Select, DatePicker, ConfigProvider} from 'antd';
 import {MessageService} from '../services/api'
 import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
-import {Subscribe} from '../services/signalr'
 import Loader from '../components/Loader'
-import moment from 'moment'
 import '../styles/message.css'
-import Notification from '../components/Notification'
+import notify from '../components/notify'
+import locale from "antd/lib/locale/ru_RU";
+import moment from 'moment'
 
 const {Option} = Select
+const pageSize = 26
+const {RangePicker} = DatePicker;
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
@@ -17,79 +19,94 @@ const categoryDictionary = {
   3: {title: 'Информация'},
 }
 
+const columns = [
+  {
+    title: 'Дата',
+    key: 'date',
+    dataIndex: 'date',
+    render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
+  },
+  {
+    title: 'Категория',
+    key: 'categoryId',
+    dataIndex: 'categoryId',
+    render: (_, item) => categoryDictionary[item.categoryId].title,
+    style: (_, item) => categoryDictionary[item.categoryId].style,
+    ellipsis: true,
+  },
+  {
+    title: 'Сообщение',
+    key: 'message',
+    dataIndex: 'message',
+  },
+  {
+    title: 'Пользователь',
+    key: 'user',
+    dataIndex: 'user',
+  },
+];
+
+const filterOptions = [
+  {label: 'Авария', value: 1},
+  {label: 'Предупреждение', value: 2},
+  {label: 'Информация', value: 3},
+]
+
 // Данные для таблицы
 export default function Messages() {
   let {id} = useParams()
   const [messages, setMessages] = useState([])
-  const [filteredInfo, setFilteredInfo] = useState({})
-  const [loader] = useState(false)
-  const filterOptions = [
-    {label: 'Авария', value: '1'},
-    {label: 'Предупреждение', value: '2'},
-    {label: 'Информация', value: '3'},
-  ]
+  const [pagination, setPagination] = useState(null)
+  const [page, setPage] = useState(1)  
+  const [range, setRange] = useState([])
+  const [categories, setCategories] = useState([])
 
-  const children = filterOptions.map((line) => (<Option key={line.value}>{line.label}</Option>))
+  const [loader, setLoader] = useState(false)
 
-  const handleChange = (filters) => {
-    setFilteredInfo({
-      filteredInfo: filters
-    })
+
+  const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)
+
+  const onChangeRange = (range) => {
+    setRange(range)
   }
 
-  const handleReceiveMessages = (messages) => {
-    if (messages) {
-      setMessages(messages.items)
+  const GetMessages = async() => {
+    setLoader(true)
+    try {
+      let begin = null
+      let end = null
+      if(range?.length>1){
+        begin = range[0].toISOString()
+        end = range[1].toISOString()
+      }
+      let paginatedMessages = await MessageService.getMessage(`${id}`,
+        (page - 1) * pageSize,
+        pageSize,
+        categories,
+        begin,
+        end)
+      setMessages(paginatedMessages.items.map(m => {
+        return {
+          key: m.id,
+          categoryids: categoryDictionary[m.categoryId],
+          begin: m.date,
+          ...m
+        }
+      }))
+      setPagination({
+        total: paginatedMessages.count,
+        current: Math.floor(paginatedMessages.skip / pageSize),
+      })
+    } catch (ex) {
+      notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
+      console.log(ex)
     }
+    setLoader(false)
   }
 
   useEffect(() => {
-    MessageService.getMessage(id)
-      .then(handleReceiveMessages)
-      .catch((ex) => {
-        Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
-        console.log(ex)
-      })
-
-    let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
-    return () => {
-      unSubscribeMessagesHub()
-    }
-  }, [id])
-
-  const columns = [
-    {
-      title: 'Дата',
-      key: 'date',
-      dataIndex: 'date',
-      render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
-    },
-    {
-      title: 'Категория',
-      key: 'categoryId',
-      dataIndex: 'categoryId',
-      render: (_, item) => categoryDictionary[item.categoryId].title,
-      style: (_, item) => categoryDictionary[item.categoryId].style,
-      filters: [
-        {text: 'Авария', value: '1'},
-        {text: 'Предупреждение', value: '2'},
-        {text: 'Информация', value: '3'},
-      ],
-      filteredValue: filteredInfo.categoryId,
-      onFilter: (value, record) => record.categoryId.toString() === value,
-      ellipsis: true,
-    },
-    {
-      title: 'Сообщение',
-      key: 'message',
-      dataIndex: 'message',
-    },
-    {
-      title: 'Пользователь',
-      key: 'user',
-      dataIndex: 'user',
-    },
-  ];
+    GetMessages()
+  }, [page, categories, range])
 
   return (
     <>
@@ -101,10 +118,16 @@ export default function Messages() {
         allowClear
         placeholder="Фильтр сообщений"
         className="filter-selector"
-        onChange={handleChange}
-      >
+        value={categories}
+        onChange = {setCategories}>
         {children}
       </Select>
+      <ConfigProvider locale={locale}>
+        <RangePicker
+          showTime
+          onChange={onChangeRange}
+        />
+      </ConfigProvider>
       <Button
         type="primary"
         className="submit-button"
@@ -121,7 +144,13 @@ export default function Messages() {
         dataSource={messages}
         rowClassName={(record) => `event_message_${record.categoryId} event_message`}
         size={'small'}
-        pagination={{pageSize: 26}}
+        pagination={{
+          pageSize: pageSize,
+          showSizeChanger: false,
+          total: pagination?.total,
+          current: page,
+          onChange: (page) => setPage(page)
+        }}
         rowKey={(record) => record.id}
       />
       {loader && <Loader/>}