feat: keep states between tab switches

src/Rankings.tsx

@@ -1,8 +1,16 @@
-import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
+import {
+  ButtonHTMLAttributes,
+  Fragment,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import { apiAuth, User } from "./api";
 import { useSession } from "./Session";
 import { Chemistry, MVPRanking } from "./types";
+import TabController from "./TabController";
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
   orderedList?: boolean;
@@ -271,7 +279,6 @@ function HeaderControl({ onLoad, onClear }: HeaderControlProps) {
 export default function Rankings() {
   const { user } = useSession();
   const [players, setPlayers] = useState<User[] | null>(null);
-  const [openTab, setOpenTab] = useState("Chemistry");
 
   async function loadPlayers() {
     try {
@@ -294,32 +301,10 @@ export default function Rankings() {
   return (
     <>
       {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>
-          {tabs.map((tab) => {
-            if (openTab !== tab.id) return null;
-            switch (tab.id) {
-              case "Chemistry":
-                return <ChemistryDnD key={tab.id} {...{ user, players }} />;
-              case "MVP":
-                return <MVPDnD key={tab.id} {...{ user, players }} />;
-              default:
-                return null;
-            }
-          })}
-        </div>
+        <TabController tabs={tabs}>
+          <ChemistryDnD {...{ user, players }} />
+          <MVPDnD {...{ user, players }} />
+        </TabController>
       ) : (
         <span className="loader" />
       )}

src/TabController.tsx

@@ -0,0 +1,45 @@
+import { Fragment, ReactNode, useState } from "react";
+
+interface TabProps {
+  id: string;
+  label: string;
+}
+
+interface TabControllerProps {
+  tabs: TabProps[];
+  children: ReactNode[];
+}
+
+export default function TabController({ tabs, children }: TabControllerProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const handleTabClick = (index: number) => {
+    setCurrentIndex(index);
+  };
+
+  return (
+    <div>
+      <div>
+        <div className="container navbar">
+          {tabs.map((tab, index) => (
+            <button
+              key={tab.id}
+              className={
+                currentIndex === index ? "tab-button active" : "tab-button"
+              }
+              onClick={() => handleTabClick(index)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      {children.map((child, index) => (
+        <Fragment key={index}>
+          <div style={{ display: currentIndex === index ? "block" : "none" }}>
+            {child}
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}