feat: open automatically

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<Player[]>([]);
   const [players, setPlayers] = useState<Player[]>([]);
+  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 (
     <>
       <SelectUser {...{ user, setUser, players, setPlayers }} />