asb_cloud_front/src/pages/Messages.jsx

import {  Table } 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'


// Словарь категорий для строк таблицы
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'),
    sorter: (a, b) => new Date(b.date) - new Date(a.date),
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: 'Категория',
    key: 'categoryId',
    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: 'Сообщение',
    key: 'message',
    dataIndex: 'message',
    onFilter: (value, record) => record.name.indexOf(value) === 0,
  },
  {
    title: 'Пользователь',
    key: 'user',
    dataIndex: 'user',
  },
];

// Данные для таблицы
export default function Messages(props) {
  let { id } = useParams()
  const [messages, setMessages] = useState([])
  const [loader] = useState(false)

  const handleReceiveMessages = (messages) => {
    if (messages) {
      setMessages(messages.items)
    }
  }

  useEffect(() => {
    MessageService.getMessage(id)
      .then(handleReceiveMessages)
      .catch(error => console.error(error))
    let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
    return () => {
      unSubscribeMessagesHub()
    }
  }, [id]);

  return (
  <>
    <h2>Сообщения</h2>
    <hr />
    <Table
      columns={columns}
      dataSource={messages}
      rowClassName={(record) => `event_message_${record.categoryId}`}
      size={'small'}
      pagination={{ pageSize: 10 }}
      rowKey={(record) => record.id}
    />
    {loader && <Loader />}
  </>
  )
}

// TODO Стили для отсортированных страниц