Replace app with functional component

src/js/app.tsx

@@ -1,92 +1,61 @@
 import { createRoot } from "react-dom/client";
-import React from "react";
 import { Menu } from "./menu";
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import { MediaContainer } from "./media";
 import { MinistreamApiClient } from "./api";
+import React from "react";
 
-type ThemeContextType = "light" | "dark";
-
-const ThemeContext = createContext<ThemeContextType>("light");
-
-type AppState = {
-    streamList: string[]
-    selectedStream: string | undefined
+interface AppProps {
+    api: MinistreamApiClient
 }
-type AppProps = {}
 
-export class App extends React.Component<AppProps, AppState> {
-    apiClient: MinistreamApiClient
-    constructor(props: AppProps) {
-        super(props)
-        this.state = {
-            streamList: [],
-            selectedStream: undefined
-        }
-        this.apiClient = new MinistreamApiClient()
-        this.updateSelect = this.updateSelect.bind(this)
+export function App({ api }: AppProps) {
+    const [streamList, setStreamList] = useState<string[]>([])
+    const [selectedStream, setSelectedStream] = useState<string | null>(null)
+
+    const updateSelect = (item: string) => {
+        setSelectedStream(item)
     }
 
-    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
+    const updateStreamList = () => {
+        api.listStreams().then((list) => {
+            setStreamList(list)
+            if (list.length != streamList.length) {
+                setStreamList(list)
             }
-            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: streamList }
+            if (!list.every((_, idx) => {
+                return list[idx] === streamList[idx]
+            })) {
+                setStreamList(list)
+            }
         })
     }
 
-    updateSelect(selected: string): void {
-        if (selected !== this.state.selectedStream) {
-            this.setState((state) => {
-                return { streamList: state.streamList, selectedStream: selected }
-            })
-        }
-    }
+    setInterval(() => {
+        updateStreamList()
+    }, 10000)
 
-    render() {
-        return (
-            <>
-                <Menu
-                    items={this.state.streamList}
-                    selectedItem={this.state.selectedStream}
-                    selectCallback={this.updateSelect}
-                />
-                <MediaContainer selectedStream={this.state.selectedStream} api={this.apiClient} />
-            </>
-        )
-    }
+    useEffect(() => {
+        updateStreamList()
+    },[])
+
+
+    return (
+        <>
+            <Menu
+                items={streamList}
+                selectedItem={selectedStream}
+                selectCallback={updateSelect}
+            />
+            <MediaContainer selectedStream={selectedStream} api={api} />
+        </>
+    )
 }
 
 const rootElement = document.getElementById("app");
 if (rootElement) {
     const root = createRoot(rootElement);
-    root.render(<App />)
+    const api = new MinistreamApiClient()
+    root.render(<App api={api}/>)
 }

src/js/media.tsx

@@ -1,9 +1,10 @@
-import React, { ComponentProps, useRef, useEffect, useState } from "react"
+import { ComponentProps, useRef, useEffect, useState } from "react"
 import { MinistreamApiClient } from "./api"
 import { resolve } from "path"
+import React from "react"
 
 type MediaContainerProps = {
-    selectedStream: string | undefined
+    selectedStream: string | null
     api: MinistreamApiClient
 }