src/App.tsx

@@ -8,8 +8,8 @@ function App() {
       <div className="logo">
         <a href={baseUrl}>
           <img alt="logo" height="66%" src="logo.svg" />
-          <h3 className="centered">cutt</h3>
         </a>
+        <h3 className="centered">cutt</h3>
         <span className="grey">cool ultimate team tool</span>
       </div>
       <Rankings />

src/Rankings.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import api, { baseUrl } from "./api";
 
@@ -268,10 +268,33 @@ 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`, {
@@ -281,60 +304,31 @@ export default function Rankings() {
     setPlayers(data as Player[]);
   }
 
-  useMemo(() => {
+  useEffect(() => {
     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 }} />
       {user.length === 1 && (
         <>
           <div className="container navbar">
-            <button
-              className="tablink"
-              id="ChemistryButton"
-              onClick={() => openPage("Chemistry", "aliceblue")}
-            >
-              🧪 Chemistry
-            </button>
-            <button
-              className="tablink"
-              id="MVPButton"
-              onClick={() => openPage("MVP", "aliceblue")}
-            >
-              🏆 MVP
-            </button>
-          </div>
+              <button
+                className="tablink"
+                id="ChemistryButton"
+                onClick={() => openPage("Chemistry", "aliceblue")}
+              >
+                🧪 Chemistry
+              </button>
+              <button
+                className="tablink"
+                id="MVPButton"
+                onClick={() => openPage("MVP", "aliceblue")}
+              >
+                🏆 MVP
+              </button>
+            </div>
 
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />