import { Input, Table } from 'antd'; import { FilterDropdownProps, SortOrder } from 'antd/lib/table/interface'; import { ColumnsType } from 'antd/es/table'; import { SearchOutlined } from '@ant-design/icons'; import { formatDistanceToNow } from 'date-fns'; import { FC } from 'react'; import { Client } from '../types/chat'; import { UserPopover } from './UserPopover'; import { BanUserButton } from './BanUserButton'; import { formatUAstring } from '../utils/format'; export type ClientTableProps = { data: Client[]; }; export const ClientTable: FC = ({ data }) => { const columns: ColumnsType = [ { title: 'Display Name', key: 'username', // eslint-disable-next-line react/destructuring-assignment render: (client: Client) => { const { user, connectedAt, messageCount, userAgent } = client; const connectionInfo = { connectedAt, messageCount, userAgent }; return ( {user.displayName} ); }, sorter: (a: any, b: any) => b.user.displayName.localeCompare(a.user.displayName), filterIcon: , // eslint-disable-next-line react/no-unstable-nested-components filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }: FilterDropdownProps) => (
{ setSelectedKeys(e.target.value ? [e.target.value] : []); confirm({ closeDropdown: false }); }} />
), onFilter: (value: string, record: Client) => record.user.displayName.includes(value), sortDirections: ['descend', 'ascend'] as SortOrder[], }, { title: 'Messages sent', dataIndex: 'messageCount', key: 'messageCount', className: 'number-col', width: '12%', sorter: (a: any, b: any) => a.messageCount - b.messageCount, sortDirections: ['descend', 'ascend'] as SortOrder[], render: (count: number) =>
{count}
, }, { title: 'Connected Time', dataIndex: 'connectedAt', key: 'connectedAt', defaultSortOrder: 'ascend', render: (time: Date) => formatDistanceToNow(new Date(time)), sorter: (a: any, b: any) => new Date(b.connectedAt).getTime() - new Date(a.connectedAt).getTime(), sortDirections: ['descend', 'ascend'] as SortOrder[], }, { title: 'User Agent', dataIndex: 'userAgent', key: 'userAgent', render: (ua: string) => formatUAstring(ua), }, { title: 'Location', dataIndex: 'geo', key: 'geo', render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'), }, { title: '', key: 'block', className: 'actions-col', render: (_, row) => , }, ]; return ( ); };