feat: towards multi-team support

also testing at different points whether team association is correct

src/Rankings.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import { apiAuth, User } from "./api";
-import { useSession } from "./Session";
+import { TeamState, useSession } from "./Session";
 import { Chemistry, MVPRanking } from "./types";
 import TabController from "./TabController";
 
@@ -56,10 +56,11 @@ function filterSort(list: User[], ids: number[]): User[] {
 
 interface PlayerInfoProps {
   user: User;
+  teams: TeamState;
   players: User[];
 }
 
-function ChemistryDnD({ user, players }: PlayerInfoProps) {
+function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
   var otherPlayers = players.filter((player) => player.id !== user.id);
   const [playersLeft, setPlayersLeft] = useState<User[]>([]);
   const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
@@ -68,6 +69,11 @@ function ChemistryDnD({ user, players }: PlayerInfoProps) {
   useEffect(() => {
     setPlayersMiddle(otherPlayers);
   }, [players]);
+  useEffect(() => {
+    setPlayersLeft([]);
+    setPlayersMiddle(otherPlayers);
+    setPlayersRight([]);
+  }, [teams]);
 
   const [dialog, setDialog] = useState("dialog");
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -78,7 +84,13 @@ function ChemistryDnD({ user, players }: PlayerInfoProps) {
     let left = playersLeft.map(({ id }) => id);
     let middle = playersMiddle.map(({ id }) => id);
     let right = playersRight.map(({ id }) => id);
-    const data = { user: user.id, hate: left, undecided: middle, love: right };
+    const data = {
+      user: user.id,
+      hate: left,
+      undecided: middle,
+      love: right,
+      team: teams.activeTeam,
+    };
     const response = await apiAuth("chemistry", data, "PUT");
     setDialog(response || "try sending again");
   }
@@ -163,7 +175,7 @@ function ChemistryDnD({ user, players }: PlayerInfoProps) {
   );
 }
 
-function MVPDnD({ user, players }: PlayerInfoProps) {
+function MVPDnD({ user, teams, players }: PlayerInfoProps) {
   const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
   const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
 
@@ -171,6 +183,11 @@ function MVPDnD({ user, players }: PlayerInfoProps) {
     setAvailablePlayers(players);
   }, [players]);
 
+  useEffect(() => {
+    setAvailablePlayers(players);
+    setRankedPlayers([]);
+  }, [teams]);
+
   const [dialog, setDialog] = useState("dialog");
   const dialogRef = useRef<HTMLDialogElement>(null);
 
@@ -178,7 +195,7 @@ function MVPDnD({ user, players }: PlayerInfoProps) {
     if (dialogRef.current) dialogRef.current.showModal();
     setDialog("sending...");
     let mvps = rankedPlayers.map(({ id }) => id);
-    const data = { user: user.id, mvps: mvps };
+    const data = { user: user.id, mvps: mvps, team: teams.activeTeam };
     const response = await apiAuth("mvps", data, "PUT");
     response ? setDialog(response) : setDialog("try sending again");
   }
@@ -284,7 +301,7 @@ export default function Rankings() {
     if (teams) {
       try {
         const data = await apiAuth(
-          `player/list?team_id=${teams?.activeTeam}`,
+          `player/list/${teams?.activeTeam}`,
           null,
           "GET"
         );
@@ -308,8 +325,8 @@ export default function Rankings() {
     <>
       {user && teams && players ? (
         <TabController tabs={tabs}>
-          <ChemistryDnD {...{ user, players }} />
-          <MVPDnD {...{ user, players }} />
+          <ChemistryDnD {...{ user, teams, players }} />
+          <MVPDnD {...{ user, teams, players }} />
         </TabController>
       ) : (
         <span className="loader" />