prettify some files

web/pages/components/chart.tsx

@@ -1,7 +1,6 @@
 import { LineChart } from 'react-chartkick';
 import 'chart.js';
 import format from 'date-fns/format';
-import styles from '../../styles/styles.module.scss';
 
 interface TimedValue {
   time: Date;
@@ -22,7 +21,7 @@ function createGraphDataset(dataArray) {
     const dateObject = new Date(item.time);
     const dateString = format(dateObject, 'p P');
     dataValues[dateString] = item.value;
-  })
+  });
   return dataValues;
 }
 

web/pages/components/info-tip.tsx

@@ -1,5 +1,5 @@
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { Tooltip } from "antd";
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
 
 interface InfoTipProps {
   tip: string | null;

web/pages/components/key-value-table.tsx

@@ -1,18 +1,18 @@
-import { Table, Typography } from "antd";
+import { Table, Typography } from 'antd';
 
 const { Title } = Typography;
 
 export default function KeyValueTable({ title, data }: KeyValueTableProps) {
   const columns = [
     {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
     },
     {
-      title: "Value",
-      dataIndex: "value",
-      key: "value",
+      title: 'Value',
+      dataIndex: 'value',
+      key: 'value',
     },
   ];
 
@@ -25,6 +25,6 @@ export default function KeyValueTable({ title, data }: KeyValueTableProps) {
 }
 
 interface KeyValueTableProps {
-  title: string, 
-  data: any,
-};
+  title: string;
+  data: any;
+}

web/pages/components/log-table.tsx

@@ -1,32 +1,30 @@
-import React from "react";
-import { Table, Tag, Typography } from "antd";
-import Linkify from "react-linkify";
-import { SortOrder } from "antd/lib/table/interface";
-import format from 'date-fns/format'
+import React from 'react';
+import { Table, Tag, Typography } from 'antd';
+import Linkify from 'react-linkify';
+import { SortOrder } from 'antd/lib/table/interface';
+import format from 'date-fns/format';
 
 const { Title } = Typography;
 
 function renderColumnLevel(text, entry) {
   let color = 'black';
 
-  if (entry.level === "warning") {
-    color = "orange";
+  if (entry.level === 'warning') {
+    color = 'orange';
   } else if (entry.level === 'error') {
-    color = "red";
+    color = 'red';
   }
 
   return <Tag color={color}>{text}</Tag>;
 }
 
 function renderMessage(text) {
-  return (
-    <Linkify>{text}</Linkify>
-  )
+  return <Linkify>{text}</Linkify>;
 }
 
 interface Props {
-  logs: object[],
-  pageSize: number
+  logs: object[];
+  pageSize: number;
 }
 
 export default function LogTable({ logs, pageSize }: Props) {
@@ -35,42 +33,42 @@ export default function LogTable({ logs, pageSize }: Props) {
   }
   const columns = [
     {
-      title: "Level",
-      dataIndex: "level",
-      key: "level",
+      title: 'Level',
+      dataIndex: 'level',
+      key: 'level',
       filters: [
         {
-          text: "Info",
-          value: "info",
+          text: 'Info',
+          value: 'info',
         },
         {
-          text: "Warning",
-          value: "warning",
+          text: 'Warning',
+          value: 'warning',
         },
         {
-          text: "Error",
-          value: "Error",
+          text: 'Error',
+          value: 'Error',
         },
       ],
       onFilter: (level, row) => row.level.indexOf(level) === 0,
       render: renderColumnLevel,
     },
     {
-      title: "Timestamp",
-      dataIndex: "time",
-      key: "time",
-      render: (timestamp) => {
+      title: 'Timestamp',
+      dataIndex: 'time',
+      key: 'time',
+      render: timestamp => {
         const dateObject = new Date(timestamp);
         return format(dateObject, 'p P');
       },
       sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
-      sortDirections: ["descend", "ascend"] as SortOrder[],
-      defaultSortOrder: "descend" as SortOrder,
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+      defaultSortOrder: 'descend' as SortOrder,
     },
     {
-      title: "Message",
-      dataIndex: "message",
-      key: "message",
+      title: 'Message',
+      dataIndex: 'message',
+      key: 'message',
       render: renderMessage,
     },
   ];
@@ -82,10 +80,9 @@ export default function LogTable({ logs, pageSize }: Props) {
         size="middle"
         dataSource={logs}
         columns={columns}
-        rowKey={(row) => row.time}
+        rowKey={row => row.time}
         pagination={{ pageSize: pageSize || 20 }}
       />
     </div>
   );
 }
-

web/pages/components/message-visiblity-toggle.tsx

@@ -1,20 +1,28 @@
-// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon 
-import React, { useState, useEffect } from "react";
-import { Button, Tooltip } from "antd";
-import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
-import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis";
+// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon
+import React, { useState, useEffect } from 'react';
+import { Button, Tooltip } from 'antd';
+import {
+  EyeOutlined,
+  EyeInvisibleOutlined,
+  CheckCircleFilled,
+  ExclamationCircleFilled,
+} from '@ant-design/icons';
+import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
 import { MessageType } from '../../types/chat';
-import { OUTCOME_TIMEOUT } from "../chat";
-import { isEmptyObject } from "../../utils/format";
+import { OUTCOME_TIMEOUT } from '../chat';
+import { isEmptyObject } from '../../utils/format';
 
 interface MessageToggleProps {
   isVisible: boolean;
   message: MessageType;
-  setMessage: (message: MessageType) => void,
-};
+  setMessage: (message: MessageType) => void;
+}
 
-
-export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) {
+export default function MessageVisiblityToggle({
+  isVisible,
+  message,
+  setMessage,
+}: MessageToggleProps) {
   if (!message || isEmptyObject(message)) {
     return null;
   }
@@ -25,16 +33,17 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
   const { id: messageId } = message || {};
 
   const resetOutcome = () => {
-    outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT);
+    outcomeTimeout = setTimeout(() => {
+      setOutcome(0);
+    }, OUTCOME_TIMEOUT);
   };
-  
+
   useEffect(() => {
     return () => {
       clearTimeout(outcomeTimeout);
     };
   });
 
-
   const updateChatMessage = async () => {
     clearTimeout(outcomeTimeout);
     setOutcome(0);
@@ -47,7 +56,7 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
       },
     });
 
-    if (result.success && result.message === "changed") {
+    if (result.success && result.message === 'changed') {
       setMessage({ ...message, visible: !isVisible });
       setOutcome(1);
     } else {
@@ -55,14 +64,16 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
       setOutcome(-1);
     }
     resetOutcome();
-  }
-
+  };
 
   let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />;
   if (outcome) {
-    outcomeIcon = outcome > 0 ? 
-    <CheckCircleFilled style={{ color: 'var(--ant-success)' }} /> :
-    <ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />;
+    outcomeIcon =
+      outcome > 0 ? (
+        <CheckCircleFilled style={{ color: 'var(--ant-success)' }} />
+      ) : (
+        <ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />
+      );
   }
 
   const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`;
@@ -74,10 +85,10 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
           shape="circle"
           size="small"
           type="text"
-          icon={ isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined /> }
+          icon={isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
           onClick={updateChatMessage}
         />
       </Tooltip>
     </div>
   );
-}
+}

web/pages/components/statistic.tsx

@@ -1,18 +1,18 @@
-import { Typography, Statistic, Card, Progress} from "antd";
+import { Typography, Statistic, Card, Progress } from 'antd';
 
 const { Text } = Typography;
 
 interface StatisticItemProps {
-  title?: string, 
-  value?: any,
-  prefix?: JSX.Element,
-  color?: string,
-  progress?: boolean,
-  centered?: boolean,
-  formatter?: any,
-};
+  title?: string;
+  value?: any;
+  prefix?: JSX.Element;
+  color?: string;
+  progress?: boolean;
+  centered?: boolean;
+  formatter?: any;
+}
 const defaultProps = {
-  title: '', 
+  title: '',
   value: 0,
   prefix: null,
   color: '',
@@ -21,16 +21,19 @@ const defaultProps = {
   formatter: null,
 };
 
-
 function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
   const endColor = value > 90 ? 'red' : color;
   const content = (
     <div>
-    {prefix}
-    <div><Text type="secondary">{title}</Text></div>
-    <div><Text type="secondary">{value}%</Text></div>
+      {prefix}
+      <div>
+        <Text type="secondary">{title}</Text>
+      </div>
+      <div>
+        <Text type="secondary">{value}%</Text>
+      </div>
     </div>
-  )
+  );
   return (
     <Progress
       type="dashboard"
@@ -42,19 +45,12 @@ function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
       }}
       format={percent => content}
     />
-  )
+  );
 }
 ProgressView.defaultProps = defaultProps;
 
 function StatisticView({ title, value, prefix, formatter }: StatisticItemProps) {
-  return (
-    <Statistic
-      title={title}
-      value={value}
-      prefix={prefix}
-      formatter={formatter}
-   />
-  );
+  return <Statistic title={title} value={value} prefix={prefix} formatter={formatter} />;
 }
 StatisticView.defaultProps = defaultProps;
 
@@ -62,14 +58,14 @@ export default function StatisticItem(props: StatisticItemProps) {
   const { progress, centered } = props;
   const View = progress ? ProgressView : StatisticView;
 
-  const style = centered ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {};
+  const style = centered ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {};
 
   return (
-      <Card type="inner">
-        <div style={style}>
-          <View {...props} />
-        </div>
-      </Card>
+    <Card type="inner">
+      <div style={style}>
+        <View {...props} />
+      </div>
+    </Card>
   );
 }
 StatisticItem.defaultProps = defaultProps;

web/styles/styles.module.scss

@@ -1,95 +0,0 @@
-
-.owncastTitleContainer {
-  padding: 1rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-
-}
-.logoContainer {
-  background-color: #fff;
-  padding: .35rem;
-  border-radius: 9999px;
-}
-.owncastTitle {
-  display: inline-block;
-  margin-left: 1rem;
-  color: rgba(203,213,224, 1);
-  font-size: 1.15rem;
-  font-weight: 200;
-  text-transform: uppercase;
-  line-height: normal;
-  letter-spacing: .05em;
-}
-
-.contentMain {
-  padding: 3em;
-}
-
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding-right: 1rem;
-}
-
-.sideNav {
-  position: fixed;
-  height: 100vh;
-  overflow: auto;
-  z-index: 10;
-}
-
-.layoutMain {
-  margin-left: 240px;
-}
-
-.statusIndicatorContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-
-}
-.statusIcon {
-  font-size: 1.5rem;
-}
-.statusIcon svg {
-  fill: #999;
-}
-.statusLabel {
-  color: #fff;
-  text-transform: uppercase;
-  font-size: .75rem;
-  display: inline-block;
-  margin-right: .5rem;
-  color: #999;
-}
-.online .statusIcon svg {
-  fill: var(--online-color)
-}
-.online .statusLabel {
-  color: var(--online-color)
-}
-
-
-.lineChartContainer {
-  margin: 2em auto;
-}
-
-.configSection {
-  margin-bottom: 2em;
-}
-
-.onlineCurrentThumb {
-  width: 12.5rem;
-}
-
-.globalStreamTitleContainer {
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  width: 100%;
-  height: 100%;
-}