move frontend stuff to its own directory

2025-12-18 16:47:47 +01:00
parent 4d07dde87a
commit 45a842b6fe
34 changed files with 0 additions and 0 deletions
--- a/frontend/src/Session.tsx
+++ b/frontend/src/Session.tsx
@@ -0,0 +1,139 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { apiAuth, currentUser, loadPlayers, logout, User } from "./api";
+import { Login } from "./Login";
+import Header from "./Header";
+import { Team } from "./types";
+
+export interface SessionProviderProps {
+  children: ReactNode;
+}
+
+export interface TeamState {
+  teams: Team[];
+  activeTeam: number;
+}
+
+export interface Session {
+  user: User | null;
+  teams: TeamState | null;
+  setTeams: (teams: TeamState) => void;
+  players: User[] | null;
+  reloadPlayers: () => void;
+  onLogout: () => void;
+}
+
+const sessionContext = createContext<Session>({
+  user: null,
+  teams: null,
+  setTeams: () => {},
+  players: null,
+  reloadPlayers: () => {},
+  onLogout: () => {},
+});
+
+export function SessionProvider(props: SessionProviderProps) {
+  const { children } = props;
+
+  const [user, setUser] = useState<User | null>(null);
+  const [teams, setTeams] = useState<TeamState | null>(null);
+  const [players, setPlayers] = useState<User[] | null>(null);
+  const [err, setErr] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
+
+  function loadUser() {
+    setLoading(true);
+    currentUser()
+      .then((user) => {
+        setUser(user);
+        setErr(null);
+      })
+      .catch((err) => {
+        setUser(null);
+        setErr(err);
+      })
+      .finally(() => setLoading(false));
+  }
+
+  async function loadTeam() {
+    const teams: Team[] = await apiAuth("player/me/teams", null, "GET");
+    if (teams) setTeams({ teams: teams, activeTeam: teams[0].id });
+  }
+
+  async function reloadPlayers() {
+    teams && loadPlayers(teams?.activeTeam).then((data) => setPlayers(data));
+  }
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+  useEffect(() => {
+    loadTeam();
+  }, [user]);
+  useEffect(() => {
+    reloadPlayers();
+  }, [teams]);
+
+  function onLogin(user: User) {
+    setUser(user);
+    setErr(null);
+  }
+
+  async function onLogout() {
+    try {
+      logout();
+      setUser(null);
+      setErr({ message: "Logged out successfully" });
+      console.log("logged out.");
+    } catch (e) {
+      console.error(e);
+      setErr(e);
+    }
+  }
+
+  let content: ReactNode;
+  if (loading || (!err && !user))
+    content = (
+      <>
+        <Header />
+        <span className="loader" />
+      </>
+    );
+  else if (err) {
+    content = (
+      <section className="section is-medium">
+        <div className="container is-max-tablet">
+          <div className="block">
+            <p className="level-item has-text-centered">
+              <img
+                className="image"
+                alt="cool ultimate team tool"
+                src="cutt.svg"
+                style={{ width: 200 }}
+              />
+            </p>
+          </div>
+          <Login onLogin={onLogin} />
+        </div>
+      </section>
+    );
+  } else
+    content = (
+      <sessionContext.Provider
+        value={{ user, teams, setTeams, players, reloadPlayers, onLogout }}
+      >
+        {children}
+      </sessionContext.Provider>
+    );
+
+  return content;
+}
+
+export function useSession() {
+  return useContext(sessionContext);
+}