feat: load previously submitted by default

src/Rankings.tsx

@@ -1,11 +1,4 @@
-import {
+import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
-  ButtonHTMLAttributes,
-  Fragment,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import { apiAuth, loadPlayers, User } from "./api";
 import { TeamState, useSession } from "./Session";
@@ -65,15 +58,11 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
   const [playersLeft, setPlayersLeft] = useState<User[]>([]);
   const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
   const [playersRight, setPlayersRight] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    setPlayersMiddle(otherPlayers);
+    handleGet();
   }, [players]);
-  useEffect(() => {
-    setPlayersLeft([]);
-    setPlayersMiddle(otherPlayers);
-    setPlayersRight([]);
-  }, [teams]);
 
   const [dialog, setDialog] = useState("dialog");
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -96,6 +85,7 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
   }
 
   async function handleGet() {
+    setLoading(true);
     const data = await apiAuth(`chemistry/${teams.activeTeam}`, null, "GET");
     if (data.detail) alert(data.detail);
     else {
@@ -110,6 +100,7 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
       );
       setPlayersRight(filterSort(otherPlayers, chemistry.love));
     }
+    setLoading(false);
   }
 
   return (
@@ -122,46 +113,50 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
           setPlayersLeft([]);
         }}
       />
-      <div className="container">
+      {loading ? (
-        <div className="box three">
+        <span className="loader" style={{ width: 300 }} />
-          <h2>😬</h2>
+      ) : (
-          {playersLeft.length < 1 && (
+        <div className="container">
-            <span className="grey hint">
+          <div className="box three">
-              drag people here that you'd rather not play with
+            <h2>😬</h2>
-            </span>
+            {playersLeft.length < 1 && (
-          )}
+              <span className="grey hint">
-          <PlayerList
+                drag people here that you'd rather not play with
-            list={playersLeft}
+              </span>
-            setList={setPlayersLeft}
+            )}
-            group={"shared"}
+            <PlayerList
-            className="dragbox"
+              list={playersLeft}
-          />
+              setList={setPlayersLeft}
+              group={"shared"}
+              className="dragbox"
+            />
+          </div>
+          <div className="box three">
+            <h2>🤷</h2>
+            <PlayerList
+              list={playersMiddle}
+              setList={setPlayersMiddle}
+              group={"shared"}
+              className="middle dragbox"
+            />
+          </div>
+          <div className="box three">
+            <h2>😍</h2>
+            {playersRight.length < 1 && (
+              <span className="grey hint">
+                drag people here that you love playing with from best to ... ok
+              </span>
+            )}
+            <PlayerList
+              list={playersRight}
+              setList={setPlayersRight}
+              group={"shared"}
+              className="dragbox"
+              orderedList
+            />
+          </div>
         </div>
-        <div className="box three">
+      )}
-          <h2>🤷</h2>
-          <PlayerList
-            list={playersMiddle}
-            setList={setPlayersMiddle}
-            group={"shared"}
-            className="middle dragbox"
-          />
-        </div>
-        <div className="box three">
-          <h2>😍</h2>
-          {playersRight.length < 1 && (
-            <span className="grey hint">
-              drag people here that you love playing with from best to ... ok
-            </span>
-          )}
-          <PlayerList
-            list={playersRight}
-            setList={setPlayersRight}
-            group={"shared"}
-            className="dragbox"
-            orderedList
-          />
-        </div>
-      </div>
 
       <button className="submit wavering" onClick={() => handleSubmit()}>
         💾 <span className="submit_text">submit</span>
@@ -182,16 +177,12 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
 function MVPDnD({ user, teams, players }: PlayerInfoProps) {
   const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
   const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    setAvailablePlayers(players);
+    handleGet();
   }, [players]);
 
-  useEffect(() => {
-    setAvailablePlayers(players);
-    setRankedPlayers([]);
-  }, [teams]);
-
   const [dialog, setDialog] = useState("dialog");
   const dialogRef = useRef<HTMLDialogElement>(null);
 
@@ -205,6 +196,7 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
   }
 
   async function handleGet() {
+    setLoading(true);
     const data = await apiAuth(`mvps/${teams.activeTeam}`, null, "GET");
     if (data.detail) alert(data.detail);
     else {
@@ -214,6 +206,7 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
         players.filter((user) => !mvps.mvps.includes(user.id))
       );
     }
+    setLoading(false);
   }
 
   return (
@@ -225,46 +218,50 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
           setRankedPlayers([]);
         }}
       />
-      <div className="container">
+      {loading ? (
-        <div className="box two">
+        <span className="loader" style={{ width: 300 }} />
-          <h2>🥏🏃</h2>
+      ) : (
-          {availablePlayers.length < 1 && (
+        <div className="container">
-            <span className="grey hint">all sorted 👍</span>
+          <div className="box two">
-          )}
+            <h2>🥏🏃</h2>
-          <PlayerList
+            {availablePlayers.length < 1 && (
-            list={availablePlayers}
+              <span className="grey hint">all sorted 👍</span>
-            setList={setAvailablePlayers}
+            )}
-            group={{
+            <PlayerList
-              name: "mvp-shared",
+              list={availablePlayers}
-              pull: function (to) {
+              setList={setAvailablePlayers}
-                return to.el.classList.contains("putclone") ? "clone" : true;
+              group={{
-              },
+                name: "mvp-shared",
-            }}
+                pull: function (to) {
-            className="dragbox"
+                  return to.el.classList.contains("putclone") ? "clone" : true;
-          />
+                },
+              }}
+              className="dragbox"
+            />
+          </div>
+          <div className="box two">
+            <h1>🏆</h1>
+            {rankedPlayers.length < 1 && (
+              <span className="grey hint">
+                carefully place as many of the <i>Most Valuable Players</i>{" "}
+                (according to your humble opinion) in this box
+              </span>
+            )}
+            <PlayerList
+              list={rankedPlayers}
+              setList={setRankedPlayers}
+              group={{
+                name: "mvp-shared",
+                pull: function (to) {
+                  return to.el.classList.contains("putclone") ? "clone" : true;
+                },
+              }}
+              className="dragbox"
+              orderedList
+            />
+          </div>
         </div>
-        <div className="box two">
+      )}
-          <h1>🏆</h1>
-          {rankedPlayers.length < 1 && (
-            <span className="grey hint">
-              carefully place as many of the <i>Most Valuable Players</i>{" "}
-              (according to your humble opinion) in this box
-            </span>
-          )}
-          <PlayerList
-            list={rankedPlayers}
-            setList={setRankedPlayers}
-            group={{
-              name: "mvp-shared",
-              pull: function (to) {
-                return to.el.classList.contains("putclone") ? "clone" : true;
-              },
-            }}
-            className="dragbox"
-            orderedList
-          />
-        </div>
-      </div>
 
       <button className="submit wavering" onClick={() => handleSubmit()}>
         💾 <span className="submit_text">submit</span>
@@ -290,8 +287,8 @@ function HeaderControl({ onLoad, onClear }: HeaderControlProps) {
   return (
     <>
       <div>
-        <LoadButton onClick={onLoad} />
         <ClearButton onClick={onClear} />
+        <LoadButton onClick={onLoad} />
       </div>
       <div>
         <span className="grey">