feat: add player type survey

src/Rankings.tsx

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import { apiAuth, loadPlayers, User } from "./api";
 import { TeamState, useSession } from "./Session";
-import { Chemistry, MVPRanking } from "./types";
+import { Chemistry, MVPRanking, PlayerType } from "./types";
 import TabController from "./TabController";
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
@@ -11,7 +11,12 @@ type PlayerListProps = Partial<ReactSortableProps<any>> & {
 
 function PlayerList(props: PlayerListProps) {
   return (
-    <ReactSortable {...props} animation={200} swapThreshold={0.4}>
+    <ReactSortable
+      {...props}
+      animation={200}
+      swapThreshold={0.2}
+      style={{ minHeight: props.list?.length < 1 ? 64 : 32 }}
+    >
       {props.list?.map((item, index) => (
         <div key={item.id} className="item">
           {props.orderedList
@@ -178,6 +183,144 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
   );
 }
 
+function TypeDnD({ user, teams, players }: PlayerInfoProps) {
+  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
+  const [handlers, setHandlers] = useState<User[]>([]);
+  const [combis, setCombis] = useState<User[]>([]);
+  const [cutters, setCutters] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    handleGet();
+  }, [players]);
+
+  const [dialog, setDialog] = useState("dialog");
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  async function handleSubmit() {
+    if (dialogRef.current) dialogRef.current.showModal();
+    setDialog("sending...");
+    let handlerlist = handlers.map(({ id }) => id);
+    let combilist = combis.map(({ id }) => id);
+    let cutterlist = cutters.map(({ id }) => id);
+    const data = {
+      user: user.id,
+      handlers: handlerlist,
+      combis: combilist,
+      cutters: cutterlist,
+      team: teams.activeTeam,
+    };
+    const response = await apiAuth("playertype", data, "PUT");
+    setDialog(response || "try sending again");
+  }
+
+  async function handleGet() {
+    setLoading(true);
+    const data = await apiAuth(`playertype/${teams.activeTeam}`, null, "GET");
+    if (data.detail) {
+      console.log(data.detail);
+      setAvailablePlayers(players);
+      setHandlers([]);
+      setCombis([]);
+      setCutters([]);
+    } else {
+      const playertype = data as PlayerType;
+      setAvailablePlayers(
+        players.filter(
+          (player) =>
+            !playertype.handlers.includes(player.id) &&
+            !playertype.combis.includes(player.id) &&
+            !playertype.cutters.includes(player.id)
+        )
+      );
+      setHandlers(filterSort(players, playertype.handlers));
+      setCombis(filterSort(players, playertype.combis));
+      setCutters(filterSort(players, playertype.cutters));
+    }
+    setLoading(false);
+  }
+
+  return (
+    <>
+      <HeaderControl
+        onLoad={handleGet}
+        onClear={() => {
+          setAvailablePlayers(players);
+          setHandlers([]);
+          setCombis([]);
+          setCutters([]);
+        }}
+      />
+      <div className="container">
+        <div className="box one">
+          <PlayerList
+            list={availablePlayers}
+            setList={setAvailablePlayers}
+            group={"type-shared"}
+            className="dragbox reservoir"
+          />
+        </div>
+      </div>
+      <div className="container">
+        <div className="box three">
+          <h4>handler</h4>
+          {handlers.length < 1 && (
+            <span className="grey hint">
+              drag people here that you like to see as handlers
+            </span>
+          )}
+          <PlayerList
+            list={handlers}
+            setList={setHandlers}
+            group={"type-shared"}
+            className="dragbox"
+          />
+        </div>
+        <div className="box three">
+          <h4>combi</h4>
+          {combis.length < 1 && (
+            <span className="grey hint">
+              drag people here that switch between handling and cutting
+            </span>
+          )}
+          <PlayerList
+            list={combis}
+            setList={setCombis}
+            group={"type-shared"}
+            className="middle dragbox"
+          />
+        </div>
+        <div className="box three">
+          <h4>cutter</h4>
+          {cutters.length < 1 && (
+            <span className="grey hint">
+              drag people here that you think are the best cutters
+            </span>
+          )}
+          <PlayerList
+            list={cutters}
+            setList={setCutters}
+            group={"type-shared"}
+            className="dragbox"
+          />
+        </div>
+      </div>
+      <button className="submit wavering" onClick={() => handleSubmit()}>
+        💾 <span className="submit_text">submit</span>
+      </button>
+      <dialog
+        ref={dialogRef}
+        id="PlayerTypeDialog"
+        onClick={(event) => {
+          event.currentTarget.close();
+        }}
+      >
+        {dialog}
+      </dialog>
+    </>
+  );
+}
+
 function MVPDnD({ user, teams, players }: PlayerInfoProps) {
   const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
   const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
@@ -319,6 +462,7 @@ export default function Rankings() {
 
   const tabs = [
     { id: "Chemistry", label: "🧪 Chemistry" },
+    { id: "Type", label: "🃏 Type" },
     { id: "MVP", label: "🏆 MVP" },
   ];
 
@@ -327,6 +471,7 @@ export default function Rankings() {
       {user && teams && players ? (
         <TabController tabs={tabs}>
           <ChemistryDnD {...{ user, teams, players }} />
+          <TypeDnD {...{ user, teams, players }} />
           <MVPDnD {...{ user, teams, players }} />
         </TabController>
       ) : (