Replace ConnectionBauble Class Component with Functional one

This commit is contained in:
Zoë Hoekstra 2022-08-11 19:14:35 +02:00
parent 88d8f13847
commit 725fb05bb3
No known key found for this signature in database
GPG Key ID: F9B7B7D8130F3323
2 changed files with 14 additions and 34 deletions

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

@ -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;