asb_cloud_front/src/components/ActiveMessagesOnline.jsx

import {useState, useEffect} from 'react'
import {MessageService} from '../services/api'
import {Subscribe} from '../services/signalr'
import moment from 'moment'
import notify from "../components/notify"
import '../styles/message.css'
import {Table} from "antd";
import LoaderPortal from "./LoaderPortal"

// Словарь категорий для строк таблицы
const categoryDictionary = {
  1: {title: 'Важное'},
  2: {title: 'Предупреждение'},
  3: {title: 'Информация'},
}

// Конфигурация таблицы
const columns = [
  {
    title: 'Дата',
    dataIndex: 'date',
    render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
    sorter: (a, b) => new Date(b.date) - new Date(a.date),
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: 'Категория',
    dataIndex: 'categoryId',
    render: (_, item) => categoryDictionary[item.categoryId].title,
    style: (_, item) => categoryDictionary[item.categoryId].style,
    sorter: (a, b) => a.categoryId - b.categoryId,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: 'Сообщение',
    dataIndex: 'message',
    onFilter: (value, record) => record.name.indexOf(value) === 0,
  },
  {
    title: 'Пользователь',
    dataIndex: 'user',
  },
];

export default function ActiveMessagesOnline({idWell}) {
  const [messages, setMessages] = useState([])
  const [loader, setLoader] = useState(false)

  const handleReceiveMessages = (messages) => {
    if (messages) {
      setMessages(messages.items.splice(0, 4))
    }
  }

  useEffect(() => {
    const update = async () => {
      setLoader(true)
      try {
        const messages = await MessageService.getMessage(idWell)
        handleReceiveMessages(messages)
      }
      catch (ex) {
        notify(`Не удалось загрузить сообщения по скважине "${idWell}"`, 'error')
        console.log(ex)
      }
      setLoader(false)
      return Subscribe('hubs/telemetry','ReceiveMessages', `well_${idWell}`, handleReceiveMessages)
    }
    update()
  }, [idWell])

  return (<LoaderPortal show={loader}>
    <Table
      showHeader={false}
      columns={columns}
      dataSource={messages}
      rowClassName={(record) => `event_message_${record.categoryId} event_message`}
      className={'message_table'}
      size={'small'}
      pagination={false}
      rowKey={(record) => record.id}
    />
  </LoaderPortal>)
}