lint for passing builds

web/components/statistic.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable react/no-unused-prop-types */
+// TODO: This component should be cleaned up and usage should be re-examined. The types should be reconsidered as well.
+
 import { Typography, Statistic, Card, Progress } from 'antd';
 
 const { Text } = Typography;
@@ -5,7 +8,7 @@ const { Text } = Typography;
 interface StatisticItemProps {
   title?: string;
   value?: any;
-  prefix?: JSX.Element;
+  prefix?: any;
   color?: string;
   progress?: boolean;
   centered?: boolean;
@@ -43,7 +46,7 @@ function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
         '0%': color,
         '90%': endColor,
       }}
-      format={percent => content}
+      format={() => content}
     />
   );
 }

web/pages/access-tokens.tsx

@@ -40,11 +40,17 @@ function convertScopeStringToTag(scopeString) {
   );
 }
 
-function NewTokenModal(props) {
+interface Props {
+  onCancel: () => void;
+  onOk: any; // todo: make better type
+  visible: boolean;
+}
+function NewTokenModal(props: Props) {
+  const { onOk, onCancel, visible } = props;
   const [selectedScopes, setSelectedScopes] = useState([]);
   const [name, setName] = useState('');
 
-  const scopes = Object.keys(availableScopes).map(function (key) {
+  const scopes = Object.keys(availableScopes).map(key => {
     return { value: key, label: availableScopes[key].description };
   });
 
@@ -53,7 +59,7 @@ function NewTokenModal(props) {
   }
 
   function saveToken() {
-    props.onOk(name, selectedScopes);
+    onOk(name, selectedScopes);
 
     // Clear the modal
     setSelectedScopes([]);
@@ -71,9 +77,9 @@ function NewTokenModal(props) {
   return (
     <Modal
       title="Create New Access token"
-      visible={props.visible}
+      visible={visible}
       onOk={saveToken}
-      onCancel={props.onCancel}
+      onCancel={onCancel}
       okButtonProps={okButtonProps}
     >
       <p>
@@ -85,7 +91,8 @@ function NewTokenModal(props) {
       </p>
 
       <p>
-        Select the permissions this access token will have. It cannot be edited after it's created.
+        Select the permissions this access token will have. It cannot be edited after it&apos;s
+        created.
       </p>
       <Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} />
 
@@ -102,6 +109,47 @@ export default function AccessTokens() {
   const [tokens, setTokens] = useState([]);
   const [isTokenModalVisible, setIsTokenModalVisible] = useState(false);
 
+  function handleError(error) {
+    console.error('error', error);
+    alert(error);
+  }
+
+  async function getAccessTokens() {
+    try {
+      const result = await fetchData(ACCESS_TOKENS);
+      setTokens(result);
+    } catch (error) {
+      handleError(error);
+    }
+  }
+  useEffect(() => {
+    getAccessTokens();
+  }, []);
+
+  async function handleDeleteToken(token) {
+    try {
+      await fetchData(DELETE_ACCESS_TOKEN, {
+        method: 'POST',
+        data: { token },
+      });
+      getAccessTokens();
+    } catch (error) {
+      handleError(error);
+    }
+  }
+
+  async function handleSaveToken(name: string, scopes: string[]) {
+    try {
+      const newToken = await fetchData(CREATE_ACCESS_TOKEN, {
+        method: 'POST',
+        data: { name, scopes },
+      });
+      setTokens(tokens.concat(newToken));
+    } catch (error) {
+      handleError(error);
+    }
+  }
+
   const columns = [
     {
       title: '',
@@ -121,7 +169,7 @@ export default function AccessTokens() {
       title: 'Token',
       dataIndex: 'token',
       key: 'token',
-      render: (text, record) => <Input.Password size="small" bordered={false} value={text} />,
+      render: text => <Input.Password size="small" bordered={false} value={text} />,
     },
     {
       title: 'Scopes',
@@ -149,48 +197,6 @@ export default function AccessTokens() {
     },
   ];
 
-  const getAccessTokens = async () => {
-    try {
-      const result = await fetchData(ACCESS_TOKENS);
-      setTokens(result);
-    } catch (error) {
-      handleError(error);
-    }
-  };
-
-  useEffect(() => {
-    getAccessTokens();
-  }, []);
-
-  async function handleDeleteToken(token) {
-    try {
-      const result = await fetchData(DELETE_ACCESS_TOKEN, {
-        method: 'POST',
-        data: { token },
-      });
-      getAccessTokens();
-    } catch (error) {
-      handleError(error);
-    }
-  }
-
-  async function handleSaveToken(name: string, scopes: string[]) {
-    try {
-      const newToken = await fetchData(CREATE_ACCESS_TOKEN, {
-        method: 'POST',
-        data: { name, scopes },
-      });
-      setTokens(tokens.concat(newToken));
-    } catch (error) {
-      handleError(error);
-    }
-  }
-
-  function handleError(error) {
-    console.error('error', error);
-    alert(error);
-  }
-
   const showCreateTokenModal = () => {
     setIsTokenModalVisible(true);
   };

web/pages/broadcast-info.tsx

@@ -1,18 +0,0 @@
-import React, { useContext } from 'react';
-import { ServerStatusContext } from '../utils/server-status-context';
-
-
-export default function BroadcastInfo() {
-  const context = useContext(ServerStatusContext);
-  const { broadcaster } = context || {};
-  const { remoteAddr, time, streamDetails } = broadcaster || {};
- 
-  return (
-    <div style={{border: '1px solid green', width: '100%'}}>
-      <h2>Broadcast Info</h2>
-      <p>Remote Address: {remoteAddr}</p>  
-      <p>Time: {(new Date(time)).toLocaleTimeString()}</p>  
-      <p>Stream Details: {JSON.stringify(streamDetails)}</p>  
-    </div>
-  );
-}

web/pages/hardware-info.tsx

@@ -5,16 +5,17 @@ import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../utils/apis';
 import Chart from '../components/chart';
 import StatisticItem from '../components/statistic';
 
-interface TimedValue {
-  time: Date;
-  value: Number;
-}
+// TODO: FIX TS WARNING FROM THIS.
+// interface TimedValue {
+//   time: Date;
+//   value: Number;
+// }
 
 export default function HardwareInfo() {
   const [hardwareStatus, setHardwareStatus] = useState({
-    cpu: Array<TimedValue>(),
-    memory: Array<TimedValue>(),
-    disk: Array<TimedValue>(),
+    cpu: [], // Array<TimedValue>(),
+    memory: [], // Array<TimedValue>(),
+    disk: [], // Array<TimedValue>(),
     message: '',
   });
 

web/pages/help.tsx

@@ -15,9 +15,6 @@ import {
 } from '@ant-design/icons';
 import React from 'react';
 
-
-
-
 export default function Help() {
   const questions = [
     {

web/pages/webhooks.tsx

@@ -37,12 +37,19 @@ function convertEventStringToTag(eventString) {
     </Tooltip>
   );
 }
+interface Props {
+  onCancel: () => void;
+  onOk: any; // todo: make better type
+  visible: boolean;
+}
+
+function NewWebhookModal(props: Props) {
+  const { onOk, onCancel, visible } = props;
 
-function NewWebhookModal(props) {
   const [selectedEvents, setSelectedEvents] = useState([]);
   const [webhookUrl, setWebhookUrl] = useState('');
 
-  const events = Object.keys(availableEvents).map(function (key) {
+  const events = Object.keys(availableEvents).map(key => {
     return { value: key, label: availableEvents[key].description };
   });
 
@@ -55,7 +62,7 @@ function NewWebhookModal(props) {
   }
 
   function save() {
-    props.onOk(webhookUrl, selectedEvents);
+    onOk(webhookUrl, selectedEvents);
 
     // Reset the modal
     setWebhookUrl('');
@@ -69,9 +76,9 @@ function NewWebhookModal(props) {
   return (
     <Modal
       title="Create New Webhook"
-      visible={props.visible}
+      visible={visible}
       onOk={save}
-      onCancel={props.onCancel}
+      onCancel={onCancel}
       okButtonProps={okButtonProps}
     >
       <div>
@@ -127,14 +134,19 @@ export default function Webhooks() {
     },
   ];
 
-  const getWebhooks = async () => {
+  function handleError(error) {
+    console.error('error', error);
+    alert(error);
+  }
+
+  async function getWebhooks() {
     try {
       const result = await fetchData(WEBHOOKS);
       setWebhooks(result);
     } catch (error) {
       handleError(error);
     }
-  };
+  }
 
   useEffect(() => {
     getWebhooks();
@@ -142,7 +154,7 @@ export default function Webhooks() {
 
   async function handleDelete(id) {
     try {
-      const result = await fetchData(DELETE_WEBHOOK, { method: 'POST', data: { id: id } });
+      await fetchData(DELETE_WEBHOOK, { method: 'POST', data: { id } });
       getWebhooks();
     } catch (error) {
       handleError(error);
@@ -153,7 +165,7 @@ export default function Webhooks() {
     try {
       const newHook = await fetchData(CREATE_WEBHOOK, {
         method: 'POST',
-        data: { url: url, events: events },
+        data: { url, events },
       });
       setWebhooks(webhooks.concat(newHook));
     } catch (error) {
@@ -161,11 +173,6 @@ export default function Webhooks() {
     }
   }
 
-  function handleError(error) {
-    console.error('error', error);
-    alert(error);
-  }
-
   const showCreateModal = () => {
     setIsModalVisible(true);
   };
@@ -185,7 +192,7 @@ export default function Webhooks() {
       <Paragraph>
         A webhook is a callback made to an external API in response to an event that takes place
         within Owncast. This can be used to build chat bots or sending automatic notifications that
-        you've started streaming.
+        you&apos;ve started streaming.
       </Paragraph>
       <Paragraph>
         Read more about how to use webhooks, with examples, at{' '}

web/styles/pages.scss

@@ -1,15 +1,15 @@
 // misc styling for various /pages
 
 
-.help-page {
-  .ant-result-image {
-    height: 100px;
-    svg {
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
+// .help-page {
+//   .ant-result-image {
+//     height: 100px;
+//     svg {
+//       height: 100%;
+//       width: 100%;
+//     }
+//   }
+// }
 
 
 .upgrade-page {