feat: load Chemisty and MVP with fetched players and selected user

src/App.css

@@ -1,5 +1,5 @@
 body {
-  background-color: ghostwhite;
+  background-color: aliceblue;
   position: relative;
   z-index: 0;
   color: black;

src/Rankings.tsx

@@ -24,7 +24,7 @@ function PlayerList(props: PlayerListProps) {
   );
 }
 
-interface PlayerStateProps {
+interface SelectUserProps {
   user: Player[];
   setUser: Dispatch<SetStateAction<Player[]>>;
   players: Player[];
@@ -36,7 +36,7 @@ export function SelectUser({
   setUser,
   players,
   setPlayers,
-}: PlayerStateProps) {
+}: SelectUserProps) {
   return (
     <>
       <div className="box user">
@@ -76,7 +76,7 @@ export function SelectUser({
           <ReactSortable
             list={players}
             setList={setPlayers}
-            group={"user-shared"}
+            group={{ name: "user-shared", pull: "clone" }}
             className="dragbox reservoir"
             animation={200}
           >
@@ -94,9 +94,17 @@ export function SelectUser({
   );
 }
 
-export function Chemistry() {
+interface PlayerInfoProps {
+  user: Player[];
+  players: Player[];
+}
+
+export function Chemistry({ user, players }: PlayerInfoProps) {
+  const index = players.indexOf(user[0]);
+  var otherPlayers = players.slice();
+  otherPlayers.splice(index, 1);
   const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
-  const [playersMiddle, setPlayersMiddle] = useState<Player[]>([]);
+  const [playersMiddle, setPlayersMiddle] = useState<Player[]>(otherPlayers);
   const [playersRight, setPlayersRight] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
@@ -176,25 +184,12 @@ export function Chemistry() {
   );
 }
 
-export function MVP() {
-  const [user, setUser] = useState<Player[]>([]);
-  const [availablePlayers, setAvailablePlayers] = useState<Player[]>([]);
+export function MVP({ user, players }: PlayerInfoProps) {
+  const [availablePlayers, setAvailablePlayers] = useState<Player[]>(players);
   const [rankedPlayers, setRankedPlayers] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
-  async function loadPlayers() {
-    const response = await fetch(`${baseUrl}player/list`, {
-      method: "GET",
-    });
-    const data = await response.json();
-    setAvailablePlayers(data as Player[]);
-  }
-
-  useEffect(() => {
-    loadPlayers();
-  }, []);
-
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='MVPDialog']");
     (dialog as HTMLDialogElement).showModal();
@@ -212,38 +207,6 @@ export function MVP() {
 
   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: "mvp-shared",
-            put: function (to) {
-              return to.el.children.length < 1;
-            },
-            pull: false,
-          }}
-          className="dragbox putclone"
-        />
-      </div>
       <div className="container">
         <div className="box two">
           <h2>🥏🏃</h2>
@@ -366,10 +329,10 @@ export default function Rankings() {
           </div>
 
           <div id="Chemistry" className="tabcontent">
-            <Chemistry />
+            <Chemistry {...{ user, players }} />
           </div>
           <div id="MVP" className="tabcontent">
-            <MVP />
+            <MVP {...{ user, players }} />
           </div>
         </>
       )}