some prettifying ✨

web/pages/viewer-info.tsx

@@ -1,29 +1,20 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Table, Row } from "antd";
-import { formatDistanceToNow } from "date-fns";
-import { UserOutlined} from "@ant-design/icons";
-import { SortOrder } from "antd/lib/table/interface";
-import Chart from "./components/chart";
-import StatisticItem from "./components/statistic";
+import { Table, Row } from 'antd';
+import { formatDistanceToNow } from 'date-fns';
+import { UserOutlined } from '@ant-design/icons';
+import { SortOrder } from 'antd/lib/table/interface';
+import Chart from './components/chart';
+import StatisticItem from './components/statistic';
 
 import { ServerStatusContext } from '../utils/server-status-context';
 
-import {
-  CONNECTED_CLIENTS,
-  VIEWERS_OVER_TIME,
-  fetchData,
-} from "../utils/apis";
+import { CONNECTED_CLIENTS, 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 { online, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } = context || {};
 
   const [viewerInfo, setViewerInfo] = useState([]);
   const [clients, setClients] = useState([]);
@@ -33,14 +24,14 @@ export default function ViewersOverTime() {
       const result = await fetchData(VIEWERS_OVER_TIME);
       setViewerInfo(result);
     } catch (error) {
-      console.log("==== error", error);
+      console.log('==== error', error);
     }
 
     try {
       const result = await fetchData(CONNECTED_CLIENTS);
       setClients(result);
     } catch (error) {
-      console.log("==== error", error);
+      console.log('==== error', error);
     }
   };
 
@@ -62,43 +53,43 @@ export default function ViewersOverTime() {
   // todo - check to see if broadcast active has changed. if so, start polling.
 
   if (!viewerInfo.length) {
-    return "no info";
+    return 'no info';
   }
 
   const columns = [
     {
-      title: "User name",
-      dataIndex: "username",
-      key: "username",
-      render: (username) => username || "-",
+      title: 'User name',
+      dataIndex: 'username',
+      key: 'username',
+      render: username => username || '-',
       sorter: (a, b) => a.username - b.username,
-      sortDirections: ["descend", "ascend"] as SortOrder[],
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
     },
     {
-      title: "Messages sent",
-      dataIndex: "messageCount",
-      key: "messageCount",
+      title: 'Messages sent',
+      dataIndex: 'messageCount',
+      key: 'messageCount',
       sorter: (a, b) => a.messageCount - b.messageCount,
-      sortDirections: ["descend", "ascend"] as SortOrder[],
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
     },
     {
-      title: "Connected Time",
-      dataIndex: "connectedAt",
-      key: "connectedAt",
-      render: (time) => formatDistanceToNow(new Date(time)),
+      title: 'Connected Time',
+      dataIndex: 'connectedAt',
+      key: 'connectedAt',
+      render: time => formatDistanceToNow(new Date(time)),
       sorter: (a, b) => new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
-      sortDirections: ["descend", "ascend"] as SortOrder[],
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
     },
     {
-      title: "User Agent",
-      dataIndex: "userAgent",
-      key: "userAgent",
+      title: 'User Agent',
+      dataIndex: 'userAgent',
+      key: 'userAgent',
     },
     {
-      title: "Location",
-      dataIndex: "geo",
-      key: "geo",
-      render: (geo) => geo ? `${geo.regionName}, ${geo.countryCode}` : '-',
+      title: 'Location',
+      dataIndex: 'geo',
+      key: 'geo',
+      render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
     },
   ];
 
@@ -122,7 +113,7 @@ export default function ViewersOverTime() {
         />
       </Row>
       <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
-      <Table dataSource={clients} columns={columns} rowKey={(row) => row.clientID} />
+      <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />
     </div>
   );
 }