diff --git a/src/Rankings.tsx b/src/Rankings.tsx index 913429b..1744379 100644 --- a/src/Rankings.tsx +++ b/src/Rankings.tsx @@ -1,4 +1,4 @@ -import { Dispatch, SetStateAction, useMemo, useState } from "react"; +import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react"; import { ReactSortable, ReactSortableProps } from "react-sortablejs"; import api, { baseUrl } from "./api"; @@ -268,33 +268,10 @@ export function MVP({ user, players }: PlayerInfoProps) { ); } -function openPage(pageName: string, color: string) { - // Hide all elements with class="tabcontent" by default */ - var i, tabcontent, tablinks; - tabcontent = document.getElementsByClassName("tabcontent"); - for (i = 0; i < tabcontent.length; i++) { - (tabcontent[i] as HTMLElement).style.display = "none"; - } - // Remove the background color of all tablinks/buttons - tablinks = document.getElementsByClassName("tablink"); - for (i = 0; i < tablinks.length; i++) { - let button = tablinks[i] as HTMLElement; - button.style.opacity = "50%"; - } - // Show the specific tab content - (document.getElementById(pageName) as HTMLElement).style.display = "block"; - // Add the specific color to the button used to open the tab content - let activeButton = document.getElementById( - pageName + "Button" - ) as HTMLElement; - activeButton.style.fontWeight = "bold"; - activeButton.style.opacity = "100%"; - document.body.style.backgroundColor = color; -} - export default function Rankings() { const [user, setUser] = useState([]); const [players, setPlayers] = useState([]); + const [openTab, setOpenTab] = useState("Chemistry"); async function loadPlayers() { const response = await fetch(`${baseUrl}player/list`, { @@ -308,6 +285,35 @@ export default function Rankings() { loadPlayers(); }, []); + useEffect(() => { + user.length === 1 && openPage(openTab, "aliceblue"); + }, [user]); + + function openPage(pageName: string, color: string) { + // Hide all elements with class="tabcontent" by default */ + var i, tabcontent, tablinks; + tabcontent = document.getElementsByClassName("tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + (tabcontent[i] as HTMLElement).style.display = "none"; + } + // Remove the background color of all tablinks/buttons + tablinks = document.getElementsByClassName("tablink"); + for (i = 0; i < tablinks.length; i++) { + let button = tablinks[i] as HTMLElement; + button.style.opacity = "50%"; + } + // Show the specific tab content + (document.getElementById(pageName) as HTMLElement).style.display = "block"; + // Add the specific color to the button used to open the tab content + let activeButton = document.getElementById( + pageName + "Button" + ) as HTMLElement; + activeButton.style.fontWeight = "bold"; + activeButton.style.opacity = "100%"; + document.body.style.backgroundColor = color; + setOpenTab(pageName); + } + return ( <>