76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
import { Popover, Table } from "antd";
|
|
import {
|
|
FormatDatetime,
|
|
MyAvatar,
|
|
WebSocketContext,
|
|
getConnectionStatusItem,
|
|
} from "../../utils";
|
|
import { useContext } from "react";
|
|
|
|
const columns = [
|
|
{
|
|
title: "Avatar",
|
|
dataIndex: "avatar",
|
|
key: "avatar",
|
|
},
|
|
{
|
|
title: "Username",
|
|
dataIndex: "username",
|
|
key: "username",
|
|
},
|
|
{
|
|
title: "Connection status",
|
|
dataIndex: "connectionStatus",
|
|
key: "connectionStatus",
|
|
},
|
|
{
|
|
title: "Last online",
|
|
dataIndex: "lastOnline",
|
|
key: "lastOnline",
|
|
},
|
|
];
|
|
|
|
export default function Users() {
|
|
const webSocketContext = useContext(WebSocketContext);
|
|
|
|
const getTableItems = () => {
|
|
let items = [];
|
|
|
|
webSocketContext.AllUsers.sort(
|
|
(a, b) => b.ConnectionStatus - a.ConnectionStatus
|
|
);
|
|
|
|
webSocketContext.AllUsers.forEach((user) => {
|
|
items.push({
|
|
key: user.Id,
|
|
avatar: (
|
|
<Popover
|
|
placement="right"
|
|
trigger={"hover"}
|
|
content={<MyAvatar avatar={user.Avatar} avatarWidth={256} />}
|
|
>
|
|
<>
|
|
<MyAvatar avatar={user.Avatar} />
|
|
</>
|
|
</Popover>
|
|
),
|
|
connectionStatus: getConnectionStatusItem(user.ConnectionStatus),
|
|
username: user.Username,
|
|
lastOnline: FormatDatetime(user.LastOnline),
|
|
});
|
|
});
|
|
|
|
return items;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<h1 style={{ fontWeight: "bold" }}>
|
|
All users ({webSocketContext.AllUsers.length})
|
|
</h1>
|
|
|
|
<Table columns={columns} dataSource={getTableItems()} />
|
|
</>
|
|
);
|
|
}
|