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";
+interface AppProps {
-
+    api: MinistreamApiClient
-const ThemeContext = createContext<ThemeContextType>("light");
-
-type AppState = {
-    streamList: string[]
-    selectedStream: string | undefined
-}
-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)
 }
 
-    async componentDidMount(): Promise<void> {
+export function App({ api }: AppProps) {
-        await this.updateStreamList()
+    const [streamList, setStreamList] = useState<string[]>([])
-        setInterval(() => {
+    const [selectedStream, setSelectedStream] = useState<string | null>(null)
-            this.updateStreamList()
+
-        }, 10000)
+    const updateSelect = (item: string) => {
+        setSelectedStream(item)
     }
 
-    async updateStreamList() {
+    const updateStreamList = () => {
-        const streams = await this.apiClient.listStreams()
+        api.listStreams().then((list) => {
-        const sortedStreams = streams.sort((a, b) => {
+            setStreamList(list)
-            if (a > b) {
+            if (list.length != streamList.length) {
-                return -1
+                setStreamList(list)
-            } else if (a < b) {
-                return 1
-            }
-            return 0
-        })
-
-        if (sortedStreams.length != this.state.streamList.length) {
-            this.setStreamList(streams)
             }
 
-        if (!sortedStreams.every((_, idx) => {
+            if (!list.every((_, idx) => {
-            return sortedStreams[idx] === this.state.streamList[idx]
+                return list[idx] === streamList[idx]
             })) {
-            this.setStreamList(streams)
+                setStreamList(list)
             }
-    }
-
-    setStreamList(streamList: string[]) {
-        console.log("stream list updated")
-        this.setState((state) => {
-            return { selectedStream: state.selectedStream, streamList: streamList }
         })
     }
 
-    updateSelect(selected: string): void {
+    setInterval(() => {
-        if (selected !== this.state.selectedStream) {
+        updateStreamList()
-            this.setState((state) => {
+    }, 10000)
-                return { streamList: state.streamList, selectedStream: selected }
+
-            })
+    useEffect(() => {
-        }
+        updateStreamList()
-    }
+    },[])
+
 
-    render() {
     return (
         <>
             <Menu
-                    items={this.state.streamList}
+                items={streamList}
-                    selectedItem={this.state.selectedStream}
+                selectedItem={selectedStream}
-                    selectCallback={this.updateSelect}
+                selectCallback={updateSelect}
             />
-                <MediaContainer selectedStream={this.state.selectedStream} api={this.apiClient} />
+            <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
 }