Add ESLint and fix all linting errors

.eslintrc.cjs

@@ -0,0 +1,7 @@
+/* eslint-env node */
+module.exports = {
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    root: true,
+  };

package.json

@@ -13,6 +13,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "eslint": "^8.55.0",
     "parcel": "^2.10.3",
     "process": "^0.11.10",
     "ts-loader": "^9.5.1",

src/js/api.ts

@@ -20,21 +20,16 @@ export class MinistreamApiClient {
     }
 
     async listStreams(): Promise<StreamInfo[]> {
-        var data: StreamInfo[] = [];
-        var url = "/whip"
+        let data: StreamInfo[] = [];
+        let url = "/whip"
         if (this.ENV !== "production") {
             url = "http://localhost:8080/whip"
         }
 
-        try {
         const resp = await fetch(
             url,
         );
         data = await resp.json() as unknown as StreamInfo[];
-        }
-        catch (e) {
-            throw e;
-        }
 
         const sortedStreams = data.sort((a, b) => {
             if (a.streamKey > b.streamKey) {
@@ -49,7 +44,7 @@ export class MinistreamApiClient {
     }
 
     async postOffer(streamKey: string, offer_sdp: RTCSessionDescription): Promise<RTCSessionDescription> {
-        var url = "/whip/" + streamKey
+        let url = "/whip/" + streamKey
         if (this.ENV !== "production") {
             url = "http://localhost:8080/whip/" + streamKey
         }
@@ -66,7 +61,7 @@ export class MinistreamApiClient {
     }
 
     async siteInfo(): Promise<SiteInfo> {
-        var url = "/api/siteinfo"
+        let url = "/api/siteinfo"
         if (this.ENV !== "production") {
             url = "http://localhost:8080/api/siteinfo"
         }

src/js/app.tsx

@@ -1,10 +1,10 @@
 import { createRoot } from "react-dom/client";
 import { Menu } from "./menu";
-import { createContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { MediaContainer } from "./media";
 import { MinistreamApiClient, StreamInfo } from "./api";
 import React from "react";
-import { Log } from "./log";
+import * as Log from "./log";
 
 interface AppProps {
     api: MinistreamApiClient
@@ -13,7 +13,7 @@ interface AppProps {
 const titleKey = "ministream.title"
 
 function setTitleFromLocalstorage() {
-    var title = localStorage.getItem(titleKey)
+    const title = localStorage.getItem(titleKey)
     if (title) {
         setTitle(title)
     }

src/js/log.ts

@@ -1,8 +1,20 @@
 
 
 
-export namespace Log {
-    var currentLevel: Level = "INFO"
+function levelToNumber(level: Level): number {
+    switch (level) {
+        case "DEBUG":
+            return 0
+        case "INFO":
+            return 1
+        case "ERROR":
+            return 2
+        case "WARN":
+            return 3
+    }
+}
+
+let currentLevel: Level = "INFO"
 
 if (process.env.NODE_ENV !== 'production') {
     currentLevel = "DEBUG"
@@ -14,11 +26,24 @@ export namespace Log {
     currentLevel = level
 }
 
-
 export interface LogArgs {
     [key: string]: string
 }
 
+const doLog = (level: Level, message: string, extras?: LogArgs) => {
+    let logLine = `[${level}] ${message}`
+
+    if (extras) {
+        Object.keys(extras).forEach((key) => {
+            logLine = logLine + ` ${key}=${extras[key]}`
+        })
+    }
+
+    if (levelToNumber(level) >= levelToNumber(currentLevel)) {
+        console.log(logLine)
+    }
+}
+
 export function Error(message: string, extras?: LogArgs) {
     doLog("ERROR", message, extras)
 }
@@ -31,31 +56,3 @@ export namespace Log {
 export function Debug(message: string, extras?: LogArgs) {
     doLog("DEBUG", message, extras)
 }
-
-    function doLog(level: Level, message: string, extras?: LogArgs) {
-        var logLine = `[${level}] ${message}`
-
-        if (extras) {
-            Object.keys(extras).forEach((key) => {
-                logLine = logLine + ` ${key}=${extras[key]}`
-            })
-        }
-
-        if (levelToNumber(level) >= levelToNumber(currentLevel)) {
-            console.log(logLine)
-        }
-    }
-
-    function levelToNumber(level: Level): number {
-        switch (level) {
-            case "DEBUG":
-                return 0
-            case "INFO":
-                return 1
-            case "ERROR":
-                return 2
-            case "WARN":
-                return 3
-        }
-    }
-}

src/js/media.tsx

@@ -1,8 +1,7 @@
-import { ComponentProps, useRef, useEffect, useState } from "react"
+import { useRef, useEffect, useState } from "react"
 import { MinistreamApiClient } from "./api"
-import { resolve } from "path"
 import React from "react"
-import { Log } from "./log"
+import * as Log from "./log";
 
 type MediaContainerProps = {
     selectedStream: string | null
@@ -151,7 +150,7 @@ interface LoadingText {
 }
 
 export function LoadingText({ text, spinner = false }: LoadingText) {
-    var spinnerElement = (<></>)
+    let spinnerElement = (<></>)
     if (spinner) {
         spinnerElement = (<Spinner />)
     }

src/js/menu.tsx

@@ -1,4 +1,3 @@
-import { createRoot } from "react-dom/client";
 import React from "react";
 import { StreamInfo } from "./api";