reafctor: normalize component formatting (#2082)

* refactor: move/rename BanUserButton file * refactor: move/rename Chart file * refactor: update generic component filenames to PascalCase * refactor: update config component filenames to PascalCase * refactor: update AdminLayout component filename to PascalCase * refactor: update/move VideoJS component * chore(eslint): disable bad react/require-default-props rule * refactor: normalize ActionButton component * refactor: normalize ActionButtonRow component * refactor: normalize FollowButton component * refactor: normalize NotifyButton component * refactor: normalize ChatActionMessage component * refactor: normalize ChatContainer component * refactor: normalize ChatJoinMessage component * refactor: normalize ChatModerationActionMenu component * refactor: normalize ChatModerationDetailsModal component * refactor: normalize ChatModeratorNotification component * refactor: normalize ChatSocialMessage component * refactor: normalize ChatSystemMessage component * refactor: normalize ChatTextField component * refactor: normalize ChatUserBadge component * refactor: normalize ChatUserMessage component * refactor: normalize ContentHeader component * refactor: normalize OwncastLogo component * refactor: normalize UserDropdown component * chore(eslint): modify react/function-component-definition rule * refactor: normalize CodecSelector component * refactor: update a bunch of functional components using eslint * refactor: update a bunch of functional components using eslint, pt2 * refactor: update a bunch of functional components using eslint, pt3 * refactor: replace all component->component default imports with named imports * refactor: replace all component-stories->component default imports with named imports * refactor: remove default exports from most components * chore(eslint): add eslint config files for the components and pages dirs * fix: use-before-define error in ChatContainer * Fix ChatContainer import * Only process .tsx files in Next builds Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2025-11-03 13:01:46 +08:00 · 2022-09-07 09:00:28 +02:00
parent ee333ef10a
commit d1f3fffe2f
178 changed files with 1258 additions and 1227 deletions
--- a/web/components/ClientTable.tsx
+++ b/web/components/ClientTable.tsx
@ -0,0 +1,99 @@
+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<ClientTableProps> = ({ data }) => {
+  const columns: ColumnsType<Client> = [
+    {
+      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 (
+          <UserPopover user={user} connectionInfo={connectionInfo}>
+            <span className="display-name">{user.displayName}</span>
+          </UserPopover>
+        );
+      },
+      sorter: (a: any, b: any) => b.user.displayName.localeCompare(a.user.displayName),
+      filterIcon: <SearchOutlined />,
+      // eslint-disable-next-line react/no-unstable-nested-components
+      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }: FilterDropdownProps) => (
+        <div style={{ padding: 8 }}>
+          <Input
+            placeholder="Search display names..."
+            value={selectedKeys[0]}
+            onChange={e => {
+              setSelectedKeys(e.target.value ? [e.target.value] : []);
+              confirm({ closeDropdown: false });
+            }}
+          />
+        </div>
+      ),
+      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) => <div style={{ textAlign: 'center' }}>{count}</div>,
+    },
+    {
+      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) => <BanUserButton user={row.user} isEnabled={!row.user.disabledAt} />,
+    },
+  ];
+
+  return (
+    <Table
+      className="table-container"
+      pagination={{ hideOnSinglePage: true }}
+      columns={columns}
+      dataSource={data}
+      size="small"
+      rowKey="id"
+    />
+  );
+};