feat: rewrite of tabs component

src/App.css

@@ -321,11 +321,20 @@ button,
   opacity: 0.75;
 }
 
-.tablink {
-  color: white;
-  cursor: pointer;
+.tab-button {
   flex: 1;
+  background-color: grey;
+  border: none;
   margin: 4px auto;
+  cursor: pointer;
+  opacity: 50%;
+}
+
+.tab-button.active {
+  opacity: unset;
+  font-weight: bold;
+  background-color: black;
+  color: white;
 }
 
 .navbar {

src/Rankings.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { createRef, useEffect, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import { apiAuth, User } from "./api";
 import { useSession } from "./Session";
@@ -190,7 +190,7 @@ export function MVP({ user, players }: PlayerInfoProps) {
 
 export default function Rankings() {
   const { user } = useSession();
-  const [players, setPlayers] = useState<User[]>([]);
+  const [players, setPlayers] = useState<User[] | null>(null);
   const [openTab, setOpenTab] = useState("Chemistry");
 
   async function loadPlayers() {
@@ -205,67 +205,46 @@ export default function Rankings() {
   useEffect(() => {
     loadPlayers();
   }, []);
-
-  useEffect(() => {
-    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);
-  }
+  const tabs = [
+    { id: "Chemistry", label: "🧪 Chemistry" },
+    { id: "MVP", label: "🏆 MVP" },
+  ];
 
   return (
     <>
-      <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>
-
-      <span className="grey">
-        assign as many or as few players as you want
-        <br />
-        and don't forget to <b>submit</b> (💾) when you're done :)
-      </span>
-
-      <div id="Chemistry" className="tabcontent">
-        {user && <Chemistry {...{ user, players }} />}
-      </div>
-      <div id="MVP" className="tabcontent">
-        {user && <MVP {...{ user, players }} />}
-      </div>
+      {user && players && (
+        <div>
+          <div className="container navbar">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                className={
+                  openTab === tab.id ? "tab-button active" : "tab-button"
+                }
+                onClick={() => setOpenTab(tab.id)}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+          <span className="grey">
+            assign as many or as few players as you want
+            <br />
+            and don't forget to <b>submit</b> 💾 when you're done :)
+          </span>
+          {tabs.map((tab) => {
+            if (openTab !== tab.id) return null;
+            switch (tab.id) {
+              case "Chemistry":
+                return <Chemistry key={tab.id} {...{ user, players }} />;
+              case "MVP":
+                return <MVP key={tab.id} {...{ user, players }} />;
+              default:
+                return null;
+            }
+          })}
+        </div>
+      )}
     </>
   );
 }