asb_cloud_front/src/pages/Messages.jsx

import {Table, Select, DatePicker, ConfigProvider} from 'antd';
import {MessageService} from '../services/api'
import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import LoaderPortal from '../components/LoaderPortal'
import '../styles/message.css'
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 = {
  1: {title: 'Авария'},
  2: {title: 'Предупреждение'},
  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 [pagination, setPagination] = useState(null)
  const [page, setPage] = useState(1)
  const [range, setRange] = useState([])
  const [categories, setCategories] = useState([])

  const [loader, setLoader] = useState(false)

  const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)

  const onChangeRange = (range) => {
    setRange(range)
  }
  
  useEffect(() => {
    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)
        if (paginatedMessages === null){
          notify(`Данных по скважине "${id}" нет`, 'warning')
          setLoader(false)
          return
        }

        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) {
        console.log(ex)
        notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
      }
      setLoader(false)
    }
    GetMessages()
  }, [id, page, categories, range])

  return (
    <>
      <div className='filter-group'>
        <h3 className='filter-group__heading'>Фильтр сообщений</h3>
        <Select
          mode="multiple"
          allowClear
          placeholder="Фильтр сообщений"
          className="filter-selector"
          value={categories}
          onChange={setCategories}>
          {children}
        </Select>
        <ConfigProvider locale={locale}>
          <RangePicker
            showTime
            onChange={onChangeRange}
          />
        </ConfigProvider>
      </div>
      <LoaderPortal show={loader}>
        <Table
          columns={columns}
          dataSource={messages}
          rowClassName={(record) => `event_message_${record.categoryId} event_message`}
          size={'small'}
          pagination={{
            pageSize: pageSize,
            showSizeChanger: false,
            total: pagination?.total,
            current: page,
            onChange: (page) => setPage(page)
          }}
          rowKey={(record) => record.id}
        />
      </LoaderPortal>
    </>
  )
}