owncast/web/pages/chat/users.tsx
2021-11-12 21:28:29 -08:00

90 lines
2.6 KiB
TypeScript

import React, { useState, useEffect, useContext } from 'react';
import { Typography, Tabs } from 'antd';
import { ServerStatusContext } from '../../utils/server-status-context';
import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS, MODERATORS } from '../../utils/apis';
import UserTable from '../../components/user-table';
import ClientTable from '../../components/client-table';
const { Title } = Typography;
const { TabPane } = Tabs;
export const FETCH_INTERVAL = 10 * 1000; // 10 sec
export default function ChatUsers() {
const context = useContext(ServerStatusContext);
const { online } = context || {};
const [disabledUsers, setDisabledUsers] = useState([]);
const [clients, setClients] = useState([]);
const [moderators, setModerators] = useState([]);
const getInfo = async () => {
try {
const result = await fetchData(DISABLED_USERS);
setDisabledUsers(result);
} catch (error) {
console.log('==== error', error);
}
try {
const result = await fetchData(CONNECTED_CLIENTS);
setClients(result);
} catch (error) {
console.log('==== error', error);
}
try {
const result = await fetchData(MODERATORS);
setModerators(result);
} catch (error) {
console.error('error fetching moderators', error);
}
};
useEffect(() => {
let getStatusIntervalId = null;
getInfo();
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
};
}, [online]);
const connectedUsers = online ? (
<>
<ClientTable data={clients} />
<p className="description">
Visit the{' '}
<a
href="https://owncast.online/docs/viewers/?source=admin"
target="_blank"
rel="noopener noreferrer"
>
documentation
</a>{' '}
to configure additional details about your viewers.
</p>
</>
) : (
<p className="description">
When a stream is active and chat is enabled, connected chat clients will be displayed here.
</p>
);
return (
<Tabs defaultActiveKey="1">
<TabPane tab={<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>} key="1">
{connectedUsers}
</TabPane>
<TabPane tab={<span>Banned {online ? `(${disabledUsers.length})` : null}</span>} key="2">
<UserTable data={disabledUsers} />
</TabPane>
<TabPane tab={<span>Moderators {online ? `(${moderators.length})` : null}</span>} key="3">
<UserTable data={moderators} />
</TabPane>
</Tabs>
);
}