asb_cloud_front/src/pages/Messages.jsx

import {Table, Select, DatePicker, Input} from 'antd';
import {useState, useEffect} from 'react'
import moment from 'moment'

import {MessageService} from '../services/api'
import LoaderPortal from '../components/LoaderPortal'
import { notify } from "../components/factory"
import '../styles/message.css'

const {Option} = Select
const pageSize = 26
const {RangePicker} = DatePicker;
const { Search } = Input

// Словарь категорий для строк таблицы
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: 'wellDepth',
    dataIndex: 'wellDepth',
  },
  {
    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({idWell}) {
  const [messages, setMessages] = useState([])
  const [pagination, setPagination] = useState(null)
  const [page, setPage] = useState(1)
  const [range, setRange] = useState([])
  const [categories, setCategories] = useState([])
  const [searchString, setSearchString] = useState('')
  const [showLoader, setShowLoader] = useState(false)

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

  const onChangeRange = (range) => {
    setRange(range)
  }

  const onChangeSearchString = (message) => {
    if (message.length < 3) {
      setSearchString('')
      return
    }
    setSearchString(message)
  }

  useEffect(() => {
    const GetMessages = async () => {
      setShowLoader(true)

      try {
        let begin = null
        let end = null
        if (range?.length > 1) {
          begin = range[0].toISOString()
          end = range[1].toISOString()
        }
        let paginatedMessages = await MessageService.getMessages(idWell,
          (page - 1) * pageSize,
          pageSize,
          categories,
          begin,
          end,
          searchString)
        if (paginatedMessages === null){
          notify(`Данных по скважине "${idWell}" нет`, 'warning')
          setShowLoader(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(`Не удалось загрузить сообщения по скважине "${idWell}"`, 'error')
      }
      setShowLoader(false)
    }
    GetMessages()
  }, [idWell, page, categories, range, searchString])

  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>
        <RangePicker
          showTime
          onChange={onChangeRange}
        />
        <Search
          className="filter-selector"
          placeholder="Фильтр сообщений по тексту"
          onSearch={onChangeSearchString}
        />
      </div>
      <LoaderPortal show={showLoader}>
        <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>
    </>
  )
}