Updated setup to vite and moved to hooks instead of class

src/HUD/Tournament/Tournament.tsx

@@ -1,62 +1,51 @@
 import React from 'react';
 import './tournament.scss';
-import { actions } from '../../App';
-import * as I from './../../api/interfaces';
-import api from '../../api/api';
+import * as I from './../../API/types';
+import api from './../../API';
 import Ladder from './Ladder';
-interface State {
-    tournament: I.Tournament | null,
-    teams: I.Team[],
-    matches: I.Match[],
-    show: boolean,
-}
-export default class Tournament extends React.Component<{}, State> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            tournament: null,
-            matches: [],
-            teams: [],
-            show: false
-        }
-    }
-    async componentDidMount() {
-        const { tournament } = await api.tournaments.get();
-        if(tournament){
-            actions.on("showTournament", async (show: string) => {
-                if(show !== "show"){
-                    return this.setState({show: false});
-                }
-                
-                this.setState({tournament}, () => {
-                    this.setState({show:true})
+import { useAction } from '../../API/contexts/actions';
+import { useEffect, useState } from 'react';
+
+const Tournament = () => {
+    const [ show, setShow ] = useState(false);
+    const [ teams, setTeams ] = useState<I.Team[]>([]);
+    const [ matches, setMatches ] = useState<I.Match[]>([]);
+    const [ tournament, setTournament ] = useState<I.Tournament | null>(null);
+    
+    useAction("showTournament", (data) => {
+        setShow(data === "show");
+    });
+
+    useEffect(() => {
+        api.tournaments.get().then(({ tournament }) => {
+            if(tournament){
+                setTournament(tournament);
+
+                Promise.allSettled([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
+                    setTeams(teams.status === "fulfilled" ? teams.value : []);
+                    setMatches(matches.status === "fulfilled" ? matches.value : []);
                 });
-            });
-            
-            Promise.all([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
-                this.setState({matches, teams});
-            });
-        }
-    }
-	render() {
-        const { tournament, matches, teams, show } = this.state;
-        if(!tournament) return null;
-		return (
-			<div className={`ladder-container ${show ? 'show':''}`}>
-                <div className="tournament-data">
-                    { tournament.logo ? <img src={`data:image/jpeg;base64,${tournament.logo}`} alt={tournament.name} /> : null }
-                    <div className="tournament-name">
-                        {tournament.name}
-                    </div>
+            }
+        })
+    }, []);
+
+    if(!tournament) return null;
+    return (
+        <div className={`ladder-container ${show ? 'show':''}`}>
+            <div className="tournament-data">
+                { tournament.logo ? <img src={`data:image/jpeg;base64,${tournament.logo}`} alt={tournament.name} /> : null }
+                <div className="tournament-name">
+                    {tournament.name}
                 </div>
-                <Ladder
-                    tournament={tournament}
-                    matches={matches}
-                    teams={teams}
-                />
-
             </div>
-		);
-	}
+            <Ladder
+                tournament={tournament}
+                matches={matches}
+                teams={teams}
+            />
 
+        </div>
+    );
 }
+
+export default React.memo(Tournament);