import React, { useState, useEffect, useContext } from 'react';
import { Row, Col, Typography } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import Chart from '../components/chart';
import StatisticItem from '../components/statistic';
import { ServerStatusContext } from '../utils/server-status-context';
import { VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
const FETCH_INTERVAL = 60 * 1000; // 1 min
export default function ViewersOverTime() {
const context = useContext(ServerStatusContext);
const { online, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } = context || {};
const [viewerInfo, setViewerInfo] = useState([]);
const getInfo = async () => {
try {
const result = await fetchData(VIEWERS_OVER_TIME);
setViewerInfo(result);
} catch (error) {
console.log('==== error', error);
}
};
useEffect(() => {
let getStatusIntervalId = null;
getInfo();
if (online) {
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
};
}
return () => [];
}, [online]);
if (!viewerInfo.length) {
return 'no info';
}
return (
<>
Viewer Info
{online && (
}
/>
)}
}
/>
}
/>
>
);
}