feat: choose user once at the beginning

src/Rankings.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import api, { baseUrl } from "./api";
 
 interface Player {
@@ -24,26 +24,83 @@ function PlayerList(props: PlayerListProps) {
   );
 }
 
+interface PlayerStateProps {
+  user: Player[];
+  setUser: Dispatch<SetStateAction<Player[]>>;
+  players: Player[];
+  setPlayers: Dispatch<SetStateAction<Player[]>>;
+}
+
+export function SelectUser({
+  user,
+  setUser,
+  players,
+  setPlayers,
+}: PlayerStateProps) {
+  return (
+    <>
+      <div className="box user">
+        <span>your name?</span>
+        {user.length < 1 ? (
+          <>
+            <br /> <span className="grey hint">drag your name here</span>
+          </>
+        ) : (
+          <>
+            <span
+              className="renew"
+              onClick={() => {
+                setUser([]);
+              }}
+            >
+              {" ✕"}
+            </span>
+            <br />
+          </>
+        )}
+        <PlayerList
+          list={user}
+          setList={setUser}
+          group={{
+            name: "user-shared",
+            put: function (to) {
+              return to.el.children.length < 1;
+            },
+          }}
+          className="dragbox"
+        />
+      </div>
+      {user.length < 1 && (
+        <div className="box one">
+          <h2>🥏🏃</h2>
+          <ReactSortable
+            list={players}
+            setList={setPlayers}
+            group={"user-shared"}
+            className="dragbox reservoir"
+            animation={200}
+          >
+            {players.map((item, _) => (
+              <div className="extra-margin">
+                <div key={item.id} className="item">
+                  {item.name}
+                </div>
+              </div>
+            ))}
+          </ReactSortable>
+        </div>
+      )}
+    </>
+  );
+}
+
 export function Chemistry() {
-  const [user, setUser] = useState<Player[]>([]);
   const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
   const [playersMiddle, setPlayersMiddle] = useState<Player[]>([]);
   const [playersRight, setPlayersRight] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
-  async function loadPlayers() {
-    const response = await fetch(`${baseUrl}player/list`, {
-      method: "GET",
-    });
-    const data = await response.json();
-    setPlayersMiddle(data as Player[]);
-  }
-
-  useEffect(() => {
-    loadPlayers();
-  }, []);
-
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='ChemistryDialog']");
     (dialog as HTMLDialogElement).showModal();
@@ -63,39 +120,6 @@ export function Chemistry() {
 
   return (
     <>
-      <div className="box user">
-        <span>your name?</span>
-        {user.length < 1 ? (
-          <>
-            <br /> <span className="grey hint">drag your name here</span>
-          </>
-        ) : (
-          <>
-            <span
-              className="renew"
-              onClick={() => {
-                let newMiddle = user.concat(playersMiddle);
-                setPlayersMiddle(newMiddle);
-                setUser([]);
-              }}
-            >
-              {" ✕"}
-            </span>
-            <br />
-          </>
-        )}
-        <PlayerList
-          list={user}
-          setList={setUser}
-          group={{
-            name: "shared",
-            put: function (to) {
-              return to.el.children.length < 1;
-            },
-          }}
-          className="dragbox"
-        />
-      </div>
       <div className="container">
         <div className="box three">
           <h2>😬</h2>
@@ -273,3 +297,82 @@ export function MVP() {
     </>
   );
 }
+
+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.backgroundColor = "unset";
+    button.style.textDecoration = "unset";
+    button.style.fontWeight = "unset";
+    button.style.color = "unset";
+  }
+  // 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.textDecoration = "underline";
+  activeButton.style.fontWeight = "bold";
+  activeButton.style.backgroundColor = "#3366cc";
+  activeButton.style.color = "white";
+  document.body.style.backgroundColor = color;
+}
+
+export default function Rankings() {
+  const [user, setUser] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<Player[]>([]);
+
+  async function loadPlayers() {
+    const response = await fetch(`${baseUrl}player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setPlayers(data as Player[]);
+  }
+
+  useEffect(() => {
+    loadPlayers();
+  }, []);
+
+  return (
+    <>
+      <SelectUser {...{ user, setUser, players, setPlayers }} />
+      {user.length === 1 && (
+        <>
+          <div className="container">
+            <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 />
+          </div>
+          <div id="MVP" className="tabcontent">
+            <MVP />
+          </div>
+        </>
+      )}
+    </>
+  );
+}