move frontend stuff to its own directory

frontend/src/MVPChart.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { apiAuth } from "./api";
+import { PlayerRanking } from "./types";
+import RaceChart from "./RaceChart";
+import { useSession } from "./Session";
+import { useNavigate } from "react-router";
+
+const MVPChart = () => {
+  let initialData = {} as PlayerRanking[][];
+  const [data, setData] = useState(initialData);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [showStd, setShowStd] = useState(false);
+  const { user, teams } = useSession();
+  const [mixed, setMixed] = useState(false);
+  const navigate = useNavigate();
+  useEffect(() => {
+    user?.scopes.includes(`team:${teams?.activeTeam}`) ||
+      teams?.activeTeam === 42 ||
+      navigate("/", { replace: true });
+  }, [user]);
+
+  useEffect(() => {
+    if (teams) {
+      const activeTeam = teams.teams.find(
+        (team) => team.id == teams.activeTeam
+      );
+      activeTeam && setMixed(activeTeam.mixed);
+    }
+  }, [teams]);
+
+  async function loadData() {
+    setLoading(true);
+    if (teams) {
+      await apiAuth(`analysis/mvp/${teams?.activeTeam}?mixed=${mixed}`, null)
+        .then((data) => {
+          if (data.detail) {
+            setError(data.detail);
+            return initialData;
+          } else {
+            setError("");
+            return data as Promise<PlayerRanking[][]>;
+          }
+        })
+        .then((data) => {
+          setData(data.map((_data) => _data.sort((a, b) => a.rank - b.rank)));
+        })
+        .catch(() => setError("no access"));
+      setLoading(false);
+    } else setError("team unknown");
+  }
+
+  useEffect(() => {
+    loadData();
+  }, [teams]);
+
+  if (loading) return <span className="loader" />;
+  else if (error) return <span>{error}</span>;
+  else
+    return data.map((_data) => <RaceChart std={showStd} playerRanks={_data} />);
+};
+
+export default MVPChart;