Fix streamList updating

src/js/app.tsx

@@ -4,6 +4,7 @@ import { createContext, useEffect, useState } from "react";
 import { MediaContainer } from "./media";
 import { MinistreamApiClient, StreamInfo } from "./api";
 import React from "react";
+import { Log } from "./log";
 
 interface AppProps {
     api: MinistreamApiClient
@@ -33,21 +34,7 @@ export function App({ api }: AppProps) {
         setSelectedStream(item)
     }
 
-    const updateStreamList = () => {
-        api.listStreams().then((list) => {
-            setStreamList(list)
-            if (list.length != streamList.length) {
-                setStreamList(list)
-                return
-            }
 
-            if (!list.every((_, idx) => {
-                return list[idx].streamKey === streamList[idx].streamKey
-            })) {
-                setStreamList(list)
-            }
-        })
-    }
 
     const updateTitle = () => {
         api.siteInfo().then((info) => {
@@ -59,12 +46,32 @@ export function App({ api }: AppProps) {
         return
     }
 
-    setInterval(() => {
-        updateStreamList()
-    }, 10000)
 
     useEffect(() => {
+        const updateStreamList = () => {
+            api.listStreams().then((list) => {
+                setStreamList((current) => {
+                    if (list.length != current.length) {
+                        Log.Debug("Updated streamList!")
+                        return list
+                    }
+                    if (!list.every((_, idx) => {
+                        return list[idx].streamKey === current[idx].streamKey
+                    })) {
+                        Log.Debug("Updated streamList..")
+                        return list
+                    }
+                    return current
+                })
+            })
+
+        }
+
         updateStreamList()
+        const updateInterval = setInterval(() => {
+            updateStreamList()
+        }, 10000)
+        return () => clearInterval(updateInterval)
     }, [])
 
     useEffect(() => {