Replace ConnectionBauble Class Component with Functional one

src/GameOptions/ui/ConnectionBauble.tsx

@@ -1,41 +1,21 @@
-import React from "react";
+import React, {useState, useEffect } from "react";
-
-interface baubleState {
-  connection: boolean;
-  callback: () => boolean;
-}
 
 interface baubleProps {
   callback: () => boolean;
 }
 
-export class ConnectionBauble extends React.Component<baubleProps> {
+export const ConnectionBauble = (props: baubleProps): React.ReactElement  => {
-  timerID: NodeJS.Timer;
+  const [connection, setConnection] = useState(props.callback())
-  state: baubleState;
 
-  constructor(props: baubleProps) {
+  useEffect(() => {
-    super(props);
+    setInterval(() => {
-    this.state = {
+      setConnection(props.callback());
-      connection: props.callback(),
+    }, 1000);
-      callback: props.callback,
+  });
-    };
-  }
 
-  componentDidMount(): void {
+  return (
-    this.timerID = setInterval(() => this.tick(), 1000);
+    <div className="ConnectionBauble">
-  }
+      {connection? "Connected" : "Disconnected"}
-
+    </div>
-  componentWillUnmount(): void {
+  );
-    clearInterval(this.timerID);
-  }
-
-  tick(): void {
-    this.setState({
-      connection: this.state.callback(),
-    });
-  }
-
-  render(): string {
-    return this.state.connection ? "Connected" : "Disconnected";
-  }
 }

src/GameOptions/ui/CurrentOptionsPage.tsx

@@ -9,7 +9,7 @@ import { GameOptionsTab } from "../GameOptionsTab";
 import { GameOptionsPage } from "./GameOptionsPage";
 import { OptionsSlider } from "./OptionsSlider";
 import Button from "@mui/material/Button";
-import { ConnectionBauble } from "./ConnectionBauble";
+import { ConnectionBaub, ConnectionBauble } from "./ConnectionBauble";
 
 interface IProps {
   currentTab: GameOptionsTab;