feat: load players in session

src/Footer.tsx

@@ -15,7 +15,7 @@ export default function Footer() {
           </Link>
           <span>|</span>
           <Link to="/network">
-            <span>Trainer Analysis</span>
+            <span>Sociogram</span>
           </Link>
           <span>|</span>
           <Link to="/mvp">

src/Rankings.tsx

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
-import { apiAuth, loadPlayers, User } from "./api";
+import { apiAuth, User } from "./api";
 import { TeamState, useSession } from "./Session";
 import { Chemistry, MVPRanking, PlayerType } from "./types";
 import TabController from "./TabController";
@@ -451,14 +451,7 @@ function HeaderControl({ onLoad, onClear }: HeaderControlProps) {
 }
 
 export default function Rankings() {
-  const { user, teams } = useSession();
+  const { user, teams, players } = useSession();
-  const [players, setPlayers] = useState<User[] | null>(null);
-
-  useEffect(() => {
-    if (teams) {
-      loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
-    }
-  }, [user, teams]);
 
   const tabs = [
     { id: "Chemistry", label: "🧪 Chemistry" },

src/Session.tsx

@@ -24,6 +24,7 @@ export interface Session {
   teams: TeamState | null;
   setTeams: (teams: TeamState) => void;
   players: User[] | null;
+  reloadPlayers: () => void;
   onLogout: () => void;
 }
 
@@ -32,6 +33,7 @@ const sessionContext = createContext<Session>({
   teams: null,
   setTeams: () => {},
   players: null,
+  reloadPlayers: () => {},
   onLogout: () => {},
 });
 
@@ -63,6 +65,10 @@ export function SessionProvider(props: SessionProviderProps) {
     if (teams) setTeams({ teams: teams, activeTeam: teams[0].id });
   }
 
+  async function reloadPlayers() {
+    teams && loadPlayers(teams?.activeTeam).then((data) => setPlayers(data));
+  }
+
   useEffect(() => {
     loadUser();
   }, []);
@@ -70,7 +76,7 @@ export function SessionProvider(props: SessionProviderProps) {
     loadTeam();
   }, [user]);
   useEffect(() => {
-    teams && loadPlayers(teams?.activeTeam).then((data) => setPlayers(data));
+    reloadPlayers();
   }, [teams]);
 
   function onLogin(user: User) {
@@ -103,7 +109,7 @@ export function SessionProvider(props: SessionProviderProps) {
   } else
     content = (
       <sessionContext.Provider
-        value={{ user, teams, setTeams, players, onLogout }}
+        value={{ user, teams, setTeams, players, reloadPlayers, onLogout }}
       >
         {children}
       </sessionContext.Provider>

src/TeamPanel.tsx

@@ -1,12 +1,12 @@
 import { FormEvent, useEffect, useState } from "react";
-import { apiAuth, Gender, loadPlayers, User } from "./api";
+import { apiAuth, Gender, User } from "./api";
 import { useSession } from "./Session";
 import { ErrorState } from "./types";
 import { useNavigate } from "react-router";
 import Calendar from "./Calendar";
 
 const TeamPanel = () => {
-  const { user, teams, players } = useSession();
+  const { user, teams, players, reloadPlayers } = useSession();
   const navigate = useNavigate();
   useEffect(() => {
     user?.scopes.includes(`team:${teams?.activeTeam}`) ||
@@ -32,14 +32,14 @@ const TeamPanel = () => {
         if (r.detail) setError({ ok: false, message: r.detail });
         else {
           setError({ ok: true, message: r });
-          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+          reloadPlayers();
         }
       } else {
         const r = await apiAuth(`player/${teams?.activeTeam}`, player, "PUT");
         if (r.detail) setError({ ok: false, message: r.detail });
         else {
           setError({ ok: true, message: r });
-          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+          reloadPlayers();
         }
       }
     }
@@ -59,7 +59,7 @@ const TeamPanel = () => {
         else {
           setError({ ok: true, message: r });
           setPlayer(newPlayerTemplate);
-          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+          reloadPlayers();
         }
       }
     }