From c193e5da2dfe97370ae82626e62660d399e54069 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torjus=20H=C3=A5kestad?= <torjus@usit.uio.no>
Date: Tue, 5 Dec 2023 02:21:38 +0100
Subject: [PATCH] Replace menu with functional component

---
 src/js/menu.tsx | 42 ++++++++++++++++++------------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/js/menu.tsx b/src/js/menu.tsx
index bc947e3..59d5dc0 100644
--- a/src/js/menu.tsx
+++ b/src/js/menu.tsx
@@ -3,43 +3,37 @@ import React from "react";
 
 type StreamSelectCallback = (selected: string) => void
 
-type MenuProps = {
+interface MenuProps {
     items: string[]
-    selectedItem: string | undefined
+    selectedItem: string | null
     selectCallback: StreamSelectCallback
 }
 
-export class Menu extends React.Component<MenuProps> {
-    constructor(props: MenuProps) {
-        super(props)
-    }
-
-    render() {
-        return (
-            <div id="menu">
-                <aside>
-                    <a className="menu-heading" href="#">stream.t-juice.club</a>
-                    <ul className="menu-list">
-                        {this.menuitems()}
-                    </ul>
-                </aside>
-            </div>
-        )
-    }
-
-    private menuitems() {
+export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
+    const menuitems = () => {
         return (
             <>
-                {this.props.items.map((value, idx) => {
-                    if (this.props.selectedItem == value) {
+                {items.map((value, idx) => {
+                    if (selectedItem == value) {
                         return <li key={idx} className="menu-item menu-selected"><a href={"#" + value} className="menu-link">{value}</a></li>
                     } else {
                         return <li key={idx} onClick={() => {
-                            this.props.selectCallback(value)
+                            selectCallback(value)
                         }} className="menu-item"><a href={"#" + value} className="menu-link">{value}</a></li>
                     }
                 })}
             </>
         )
     }
+    return (
+        <div id="menu">
+            <aside>
+                <a className="menu-heading" href="#">stream.t-juice.club</a>
+                <ul className="menu-list">
+                    {menuitems()}
+                </ul>
+            </aside>
+        </div>
+    )
+
 }