Refresh stream list periodically

src/js/app.tsx

@@ -28,9 +28,38 @@ export class App extends React.Component<AppProps, AppState> {
     }
 
     async componentDidMount(): Promise<void> {
+        await this.updateStreamList()
+        setInterval(() => {
+            this.updateStreamList()
+        }, 10000)
+    }
+
+    async updateStreamList() {
         const streams = await this.apiClient.listStreams()
+        const sortedStreams = streams.sort((a, b) => {
+            if (a > b) {
+                return -1
+            } else if (a < b) {
+                return 1
+            }
+            return 0
+        })
+
+        if (sortedStreams.length != this.state.streamList.length) {
+            this.setStreamList(streams)
+        }
+
+        if (!sortedStreams.every((_, idx) => {
+            return sortedStreams[idx] === this.state.streamList[idx]
+        })) {
+            this.setStreamList(streams)
+        }
+    }
+
+    setStreamList(streamList: string[]) {
+        console.log("stream list updated")
         this.setState((state) => {
-            return { selectedStream: state.selectedStream, streamList: streams }
+            return { selectedStream: state.selectedStream, streamList: streamList }
         })
     }