Remove+Fix all lint suppressions

Author: Sean-Der

web/eslint.config.js

@@ -1,44 +1,29 @@
 import js from "@eslint/js";
 import tseslint from "@typescript-eslint/eslint-plugin";
-import tsParser from "@typescript-eslint/parser";
 import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import globals from "globals";
 
 export default [
   js.configs.recommended,
+  ...tseslint.configs["flat/recommended"],
+  react.configs.flat.recommended,
+  react.configs.flat["jsx-runtime"],
+  reactHooks.configs.flat.recommended,
   {
     files: ["**/*.ts", "**/*.tsx"],
     languageOptions: {
-      parser: tsParser,
       parserOptions: {
         ecmaVersion: "latest",
-        sourceType: "module",
         ecmaFeatures: { jsx: true },
       },
       globals: {
         ...globals.browser,
         ...globals.node,
       },
     },
-    plugins: {
-      react,
-      "react-hooks": reactHooks,
-      "@typescript-eslint": tseslint,
-    },
-    rules: {
-      // React rules
-      "react/react-in-jsx-scope": "off",
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "warn",
-
-      // TypeScript rules
-      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-      "@typescript-eslint/explicit-function-return-type": "off",
-    },
     settings: {
       react: { version: "detect" },
     },
   },
 ];
-

web/src/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Routes, Route } from "react-router-dom";
 
 import BrowserBroadcaster from "./components/broadcast/Broadcast";

web/src/components/admin/Frontpage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Card from "../shared/Card";
 import Button from "../shared/Button";

web/src/components/admin/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import TextInputDialog from "../shared/TextInputDialog";
 import ErrorMessagePanel from "../shared/ErrorMessagePanel";
 import AdminFrontpage from "./Frontpage";

web/src/components/admin/menus/ApiPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import { useContext, useState } from "react";
 import { LocaleContext } from "../../../providers/LocaleProvider";
 
 interface ApiSettingsResult {

web/src/components/admin/menus/LoggingPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { LocaleContext } from "../../../providers/LocaleProvider";
 import {
   clearAdminToken,

web/src/components/admin/menus/ProfilesPage.tsx

@@ -1,5 +1,5 @@
 import { ArrowPathIcon, XMarkIcon } from "@heroicons/react/16/solid";
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import Button from "../../shared/Button";
 import ModalTextInput from "../../shared/ModalTextInput";
 import ModalMessageBox from "../../shared/ModalMessageBox";
@@ -25,10 +25,6 @@ const ProfilesPage = () => {
   const [isRemoveProfileModalOpen, setIsRemoveProfileModalOpen] = useState<string>("");
   const [errorMessage, setErrorMessage] = useState<string>();
 
-  useEffect(() => {
-    refreshProfiles();
-  }, []);
-
   const copyTokenToClipboard = (token: string) => navigator.clipboard.writeText(token)
 
   const refreshProfiles = () => {
@@ -113,6 +109,10 @@ const ProfilesPage = () => {
     });
   };
 
+  useEffect(() => {
+    refreshProfiles();
+  }, []);
+
 
   return (
     <div className="p-6 w-full h-full max-w-6xl mx-auto flex flex-col justify-between">

web/src/components/admin/menus/StatusPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { LocaleContext } from "../../../providers/LocaleProvider";
 import {
   clearAdminToken,

web/src/components/broadcast/Broadcast.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 import PlayerHeader from '../playerHeader/PlayerHeader';
@@ -45,25 +45,30 @@ function BrowserBroadcaster() {
 
 	const endStream = () => navigate('/')
 	const requestMedia = (source: MediaSource) => {
+		if (!navigator.mediaDevices) {
+			setMediaAccessError(() => ErrorMessageEnum.NoMediaDevices);
+			return
+		}
+
 		setUseDisplayMedia(source)
 		setMediaRequestCount(prev => prev + 1)
 	}
 
-	const stopLocalMediaStream = (localMediaStream: MediaStream | null) => {
+	const stopLocalMediaStream = useCallback((localMediaStream: MediaStream | null) => {
 		if (!localMediaStream) {
 			return
 		}
 
 		localMediaStream
 			.getTracks()
 			.forEach((streamTrack: MediaStreamTrack) => streamTrack.stop())
-	}
+	}, [])
 
-	const getSenderByKind = (peerConnection: RTCPeerConnection, kind: "audio" | "video") => {
+	const getSenderByKind = useCallback((peerConnection: RTCPeerConnection, kind: "audio" | "video") => {
 		return peerConnection.getTransceivers().find(transceiver => transceiver.sender.track?.kind === kind)?.sender ??
 			peerConnection.getTransceivers().find(transceiver => transceiver.receiver.track.kind === kind)?.sender ??
 			null
-	}
+	}, [])
 
 	useEffect(() => {
 		return () => {
@@ -73,20 +78,14 @@ function BrowserBroadcaster() {
 			peerConnectionRef.current?.close()
 			peerConnectionRef.current = null
 		}
-	}, [])
+	}, [stopLocalMediaStream])
 
 	useEffect(() => {
 		if (useDisplayMedia === "None") {
 			return;
 		}
 
-		if (!navigator.mediaDevices) {
-			setMediaAccessError(() => ErrorMessageEnum.NoMediaDevices);
-			setUseDisplayMedia(() => "None")
-			return
-		}
-
-		let cancelled = false
+			let cancelled = false
 
 		const mediaPromise = useDisplayMedia == "Screen" ?
 			navigator.mediaDevices.getDisplayMedia(mediaOptions) :
@@ -230,8 +229,7 @@ function BrowserBroadcaster() {
 		return () => {
 			cancelled = true
 		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [videoRef, useDisplayMedia, mediaRequestCount, location.pathname])
+		}, [getSenderByKind, mediaRequestCount, stopLocalMediaStream, streamKey, useDisplayMedia])
 
 	useEffect(() => {
 		hasSignalRef.current = hasSignal;

web/src/components/broadcast/ProfileSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect, useState } from "react";
+import { useCallback, useContext, useLayoutEffect, useState } from "react";
 import Card from "../shared/Card";
 import Input from "../shared/Input";
 import Toggle from "../shared/Toggle";
@@ -14,38 +14,20 @@ interface Profile {
 }
 
 interface ProfileSettingsProps {
-  // eslint-disable-next-line no-unused-vars
   stateHasChanged: (isActive: boolean, streamKey: string) => void;
 }
 
 export default function ProfileSettings(props: ProfileSettingsProps) {
   const { locale } = useContext(LocaleContext)
+  const { stateHasChanged } = props
   const streamKey = location.pathname.split('/').pop()
 
   const [profileType, setProfileType] = useState<"Public" | "Reserved">("Public")
   const [isPublic, setIsPublic] = useState<"Public" | "Private">("Public")
   const [motd, setMotd] = useState<string>("")
 
-  const updateSettings = () => {
-    fetch(`/api/whip/profile`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${toBase64Utf8(streamKey)}`,
-      },
-      body: JSON.stringify({
-        motd: motd,
-        isPublic: isPublic === "Public"
-      }),
-    }).then((result) => {
-      if (result.status > 400 && result.status < 500) {
-        return;
-      }
-
-      getSettings();
-    });
-  };
-  const getSettings = () => {
-    fetch(`/api/whip/profile`, {
+  const getSettings = useCallback(() => {
+    return fetch(`/api/whip/profile`, {
       method: "GET",
       headers: {
         Authorization: `Bearer ${toBase64Utf8(streamKey)}`,
@@ -56,7 +38,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
       }
 
       return result.json()
-    }).then((result: Profile) => {
+    }).then((result: Profile | undefined) => {
 
       if (result === undefined) {
         setProfileType(() => "Public")
@@ -66,14 +48,32 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
       setProfileType(() => "Reserved")
       setIsPublic(() => result.isPublic ? "Public" : "Private")
       setMotd(() => result.motd)
-      props.stateHasChanged?.(result.isActive, result.streamKey)
+      stateHasChanged?.(result.isActive, result.streamKey)
+    });
+  }, [stateHasChanged, streamKey])
+
+  const updateSettings = useCallback(() => {
+    fetch(`/api/whip/profile`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${toBase64Utf8(streamKey)}`,
+      },
+      body: JSON.stringify({
+        motd: motd,
+        isPublic: isPublic === "Public"
+      }),
+    }).then((result) => {
+      if (result.status > 400 && result.status < 500) {
+        return;
+      }
+
+      void getSettings();
     });
-  };
+  }, [getSettings, isPublic, motd, streamKey]);
 
   useLayoutEffect(() => {
-    getSettings()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    void getSettings()
+  }, [getSettings])
 
   if (profileType === "Public") {
     return <></>