Only update selected if different from current

README.md

@@ -2,6 +2,11 @@
 
 Frontend for [ministream](https://git.t-juice.club/torjus/ministream).
 
+## Development
+
+While developing, you should run the backend on localhost:8080. Then run parcel src/index.html.
+The development server should do api-requests to the backend, while frontend will reload on changes.
+
 ## About
 
 Made with TypeScript and React.

src/js/app.tsx

@@ -28,16 +28,47 @@ 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 }
         })
     }
 
     updateSelect(selected: string): void {
-        this.setState((state) => {
-            return { streamList: state.streamList, selectedStream: selected }
-        })
+        if (selected !== this.state.selectedStream) {
+            this.setState((state) => {
+                return { streamList: state.streamList, selectedStream: selected }
+            })
+        }
     }
 
     render() {