owncast/web/components/user-table.tsx
Gabe Kangas b10ba1dcc2 Admin support for managing users (#245)
* First pass at displaying user data in admin

* Hide chat blurb on home page if chat is disabled

* Hide sidebar chat section if chat is disabled

* Block/unblock user interface for https://github.com/owncast/owncast/issues/1096

* Simplify past display name handling

* Updates to reflect the api access token change

* Update paths

* Clean up the new access token page

* Fix linter

* Update linter workflow action

* Cleanup

* Fix exception rendering table row

* Commit next-env file that seems to be required with next 11

* chat refactor - admin adjustments (#250)

* add useragent parser; clean up some html;

* some ui changes
- use modal instead of popover to confirm block/unblock user
- update styles, table styles for consistency
- rename some user/chat labels in nav and content

* format user info modal a bit

* add some sort of mild treatment and delay while processing ban of users

* rename button to 'ban'

* add some notes

* Prettified Code!

* fix disableChat toggle for nav bar

* Support sorting the disabled user list

* Fix linter error around table sorting

* No longer restoring messages on unban so change message prompt

* Standardize on forbiddenUsername terminology

* The linter broke the webhooks page. Fixed it. Linter is probably pissed.

* Move chat welcome message to chat config

* Other submenus don't have icons so remove these ones

Co-authored-by: gingervitis <omqmail@gmail.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
2021-07-19 22:02:02 -07:00

64 lines
1.9 KiB
TypeScript

import { Table } from 'antd';
import format from 'date-fns/format';
import { SortOrder } from 'antd/lib/table/interface';
import { User } from '../types/chat';
import UserPopover from './user-popover';
import BanUserButton from './ban-user-button';
export function formatDisplayDate(date: string | Date) {
return format(new Date(date), 'MMM d H:mma');
}
export default function UserTable({ data }: UserTableProps) {
const columns = [
{
title: 'Last Known Display Name',
dataIndex: 'displayName',
key: 'displayName',
// eslint-disable-next-line react/destructuring-assignment
render: (displayName: string, user: User) => (
<UserPopover user={user}>
<span className="display-name">{displayName}</span>
</UserPopover>
),
},
{
title: 'Created',
dataIndex: 'createdAt',
key: 'createdAt',
render: (date: Date) => formatDisplayDate(date),
sorter: (a: any, b: any) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: 'Disabled at',
dataIndex: 'disabledAt',
key: 'disabledAt',
defaultSortOrder: 'descend' as SortOrder,
render: (date: Date) => (date ? formatDisplayDate(date) : null),
sorter: (a: any, b: any) =>
new Date(a.disabledAt).getTime() - new Date(b.disabledAt).getTime(),
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: '',
key: 'block',
className: 'actions-col',
render: (_, user) => <BanUserButton user={user} isEnabled={!user.disabledAt} />,
},
];
return (
<Table
pagination={{ hideOnSinglePage: true }}
className="table-container"
columns={columns}
dataSource={data}
size="small"
rowKey="id"
/>
);
}
interface UserTableProps {
data: User[];
}