feat: load previously submitted by default

src/Rankings.tsx

@@ -1,11 +1,4 @@
-import {
-  ButtonHTMLAttributes,
-  Fragment,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { ButtonHTMLAttributes, 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,6 +113,9 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
           setPlayersLeft([]);
         }}
       />
+      {loading ? (
+        <span className="loader" style={{ width: 300 }} />
+      ) : (
         <div className="container">
           <div className="box three">
             <h2>😬</h2>
@@ -162,6 +156,7 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
             />
           </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,6 +218,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
           setRankedPlayers([]);
         }}
       />
+      {loading ? (
+        <span className="loader" style={{ width: 300 }} />
+      ) : (
         <div className="container">
           <div className="box two">
             <h2>🥏🏃</h2>
@@ -265,6 +261,7 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
             />
           </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">