src/App.css

@@ -29,6 +29,7 @@ footer {
   left: 8px;
 }
 
+
 /*=========Network Controls=========*/
 
 .infobutton {
@@ -366,11 +367,7 @@ button,
   position: relative;
   text-align: center;
   height: 140px;
-
-  span {
-    display: block;
-    margin: 2px;
-  }
+  margin-bottom: 20px;
 
   img {
     display: block;
@@ -393,15 +390,8 @@ button,
   }
 }
 
-.avatar {
-  background-color: lightsteelblue;
-  padding: 2px 8px;
-  width: fit-content;
-  margin: auto;
-}
-
 .networkroute {
-  z-index: 3;
+  z-index: 10;
   position: absolute;
   top: 24px;
   left: 48px;

src/App.tsx

@@ -7,21 +7,34 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
 import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
-import Avatar from "./Avatar";
 
 function App() {
   return (
     <BrowserRouter>
-      <SessionProvider>
-        <Header />
-        <Routes>
-          <Route index element={<Rankings />} />
-          <Route path="/network" element={<GraphComponent />} />
-          <Route path="/analysis" element={<Analysis />} />
-          <Route path="/mvp" element={<MVPChart />} />
-        </Routes>
-        <Footer />
-      </SessionProvider>
+      <Header />
+      <Routes>
+        <Route index element={<Rankings />} />
+
+        <Route path="/network" element={
+          <SessionProvider>
+            <GraphComponent />
+          </SessionProvider>
+        } />
+
+        <Route path="/analysis" element={
+          <SessionProvider>
+            <Analysis />
+          </SessionProvider>
+        } />
+
+        <Route path="/mvp" element={
+          <SessionProvider>
+            <MVPChart />
+          </SessionProvider>
+        } />
+
+      </Routes>
+      <Footer />
     </BrowserRouter>
   );
 }

src/Avatar.tsx

@@ -1,99 +0,0 @@
-import { MouseEventHandler, useEffect, useState } from "react";
-import { useSession } from "./Session";
-import { logout } from "./api";
-
-interface ContextMenuItem {
-  label: string;
-  onClick: () => void;
-}
-
-export default function Avatar() {
-  const { user, onLogout } = useSession();
-  const [contextMenu, setContextMenu] = useState<{
-    open: boolean;
-    mouseX: number;
-    mouseY: number;
-  }>({ open: false, mouseX: 0, mouseY: 0 });
-
-  const contextMenuItems: ContextMenuItem[] = [
-    { label: "View Profile", onClick: () => console.log("View Profile") },
-    { label: "Edit Profile", onClick: () => console.log("Edit Profile") },
-    { label: "Logout", onClick: onLogout },
-  ];
-
-  const handleMenuClick: MouseEventHandler<HTMLDivElement> = (event) => {
-    event.preventDefault();
-    setContextMenu({
-      open: !contextMenu.open,
-      mouseX: event.clientX + 4,
-      mouseY: event.clientY + 2,
-    });
-  };
-  useEffect(() => {
-    if (contextMenu.open) {
-      document.addEventListener("click", handleCloseContextMenuOutside);
-    }
-    return () => {
-      document.removeEventListener("click", handleCloseContextMenuOutside);
-    };
-  }, [contextMenu.open]);
-
-  const handleMenuClose = () => {
-    setContextMenu({ ...contextMenu, open: false });
-  };
-  const handleCloseContextMenuOutside: MouseEventHandler<Document> = (
-    event
-  ) => {
-    if (
-      !event.target ||
-      (!(event.target as Element).closest(".context-menu") &&
-        !(event.target as Element).closest(".avatar"))
-    ) {
-      handleMenuClose();
-    }
-  };
-
-  return (
-    <div
-      className="avatar"
-      onContextMenu={handleMenuClick}
-      style={{ display: user ? "block" : "none" }}
-      onClick={handleMenuClick}
-    >
-      {user?.username}
-      {contextMenu.open && (
-        <ul
-          className="context-menu"
-          style={{
-            zIndex: 3,
-            position: "absolute",
-            top: contextMenu.mouseY,
-            left: contextMenu.mouseX,
-            background: "white",
-            border: "1px solid #ddd",
-            padding: 0,
-            margin: 0,
-            listStyle: "none",
-          }}
-        >
-          {contextMenuItems.map((item, index) => (
-            <li
-              key={index}
-              style={{
-                padding: "10px",
-                borderBottom: "1px solid #ddd",
-                cursor: "pointer",
-              }}
-              onClick={() => {
-                item.onClick();
-                handleMenuClose();
-              }}
-            >
-              {item.label}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

src/Footer.tsx

@@ -1,22 +1,20 @@
-import { useLocation } from "react-router";
 import { Link } from "react-router";
 
 export default function Footer() {
-  const location = useLocation();
   return (
-    <footer className={location.pathname === "/network" ? "fixed-footer" : ""}>
+    <footer>
       <div className="navbar">
-        <Link to="/">
+        <a href="/">
           <span>Form</span>
-        </Link>
+        </a>
         <span>|</span>
-        <Link to="/network">
+        <a href="/network">
           <span>Trainer Analysis</span>
-        </Link>
+        </a>
         <span>|</span>
-        <Link to="/mvp">
+        <a href="/mvp">
           <span>MVP</span>
-        </Link>
+        </a>
       </div>
       <p className="grey extra-margin">
         something not working?

src/Header.tsx

@@ -1,18 +1,9 @@
-import { Link, useLocation } from "react-router";
-import Avatar from "./Avatar";
-
 export default function Header() {
-  const location = useLocation();
-  return (
-    <div className={location.pathname === "/network" ? "networkroute" : ""}>
-      <div className="logo">
-        <Link to="/">
-          <img alt="logo" height="66%" src="logo.svg" />
-          <h3 className="centered">cutt</h3>
-        </Link>
-        <span className="grey">cool ultimate team tool</span>
-      </div>
-      <Avatar />
-    </div>
-  );
+  return <div className="logo" id="logo">
+    <a href={"/"}>
+      <img alt="logo" height="66%" src="logo.svg" />
+      <h3 className="centered">cutt</h3>
+    </a>
+    <span className="grey">cool ultimate team tool</span>
+  </div>
 }

src/Login.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { currentUser, login, User } from "./api";
-import Header from "./Header";
+import { FormEvent, useContext, useState } from "react";
+import { useNavigate } from "react-router";
+import { currentUser, login, LoginRequest, User } from "./api";
 
 export interface LoginProps {
   onLogin: (user: User) => void;
@@ -15,58 +15,72 @@ export const Login = ({ onLogin }: LoginProps) => {
   async function doLogin() {
     setLoading(true);
     setError(null);
-    const timeout = new Promise((r) => setTimeout(r, 1000));
+    const timeout = new Promise((r) => setTimeout(r, 1500));
     let user: User;
     try {
-      await login({ username, password });
+      login({ username, password });
       user = await currentUser();
     } catch (e) {
       await timeout;
       setError(e);
       setLoading(false);
-      return;
+      return
     }
+
     await timeout;
     onLogin(user);
   }
 
+  function handleClick() {
+    doLogin();
+  }
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     doLogin();
   }
 
   return (
-    <>
-      <Header />
-      <form onSubmit={handleSubmit}>
-        <div>
-          <input
-            type="text"
-            id="username"
-            name="username"
-            placeholder="username"
-            required
-            value={username}
-            onChange={(evt) => setUsername(evt.target.value)}
-          />
-        </div>
-        <div>
-          <input
-            type="password"
-            id="password"
-            name="password"
-            placeholder="password"
-            minLength={8}
-            value={password}
-            required
-            onChange={(evt) => setPassword(evt.target.value)}
-          />
-        </div>
-        <button type="submit" value="login" style={{ fontSize: "small" }}>
-          login
-        </button>
-        {loading && <span className="loader" />}
-      </form>
-    </>
-  );
-};
+    <form onSubmit={handleSubmit}>
+      <div>
+        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
+      </div>
+      <div>
+        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
+      </div>
+      <button type="submit" value="login" style={{ fontSize: "small" }} onClick={handleClick} >login</button>
+      {loading && <span className="loader" />}
+    </form>
+  )
+}
+
+/*
+export default function Login(props: { onLogin: (user: User) => void }) {
+  const { onLogin } = props;
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  async function handleLogin(e: FormEvent) {
+    e.preventDefault()
+    const timeout = new Promise((r) => setTimeout(r, 1500));
+    let user: User;
+    try {
+      login({ username, password })
+      user = await currentUser()
+    } catch (e) { await timeout; return }
+    await timeout;
+    onLogin(user);
+  }
+
+  return <div>
+    <form onSubmit={handleLogin}>
+      <div>
+        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
+      </div>
+      <div>
+        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
+      </div>
+      <input className="button" type="submit" value="login" onSubmit={handleLogin} />
+    </form>
+  </div>
+} */

src/Network.tsx

@@ -43,6 +43,15 @@ export const GraphComponent = () => {
   const [popularity, setPopularity] = useState(false);
   const [mutuality, setMutuality] = useState(false);
 
+  const logo = document.getElementById("logo");
+  if (logo) {
+    logo.className = "logo networkroute";
+  }
+  const footer = document.getElementsByTagName("footer");
+  if (footer) {
+    (footer.item(0) as HTMLElement).className = "fixed-footer";
+  }
+
   async function loadData() {
     setLoading(true);
     await apiAuth("analysis/graph_json", null)

src/RaceChart.tsx

@@ -1,6 +1,5 @@
 import { FC, useEffect, useState } from "react";
 import { PlayerRanking } from "./types";
-import { useSession } from "./Session";
 
 interface RaceChartProps {
   players: PlayerRanking[];
@@ -35,13 +34,13 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   const gap = 8;
   const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
   const barHeight = (height - 2 * padding) / players.length;
-  const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
+  const fontSize = Math.min(barHeight - 1.5 * gap, width / 20);
 
   return (
-    <svg width={width} height={height} id="RaceChartSVG">
+    <svg width={width} height={height}>
       {players.map((player, index) => (
         <rect
-          key={String(index)}
+          key={index}
           x={0}
           y={index * barHeight + padding}
           width={(1 - player.rank / maxValue) * width}
@@ -51,7 +50,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
       ))}
 
       {players.map((player, index) => (
-        <g key={"group" + index}>
+        <g>
           <text
             key={index + "_name"}
             x={4}

src/Session.tsx

@@ -1,94 +1,36 @@
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-import { currentUser, logout, User } from "./api";
+import { createContext, ReactNode, useContext, useLayoutEffect, useState } from "react";
+import { currentUser, User } from "./api";
 import { Login } from "./Login";
-import Header from "./Header";
 
 export interface SessionProviderProps {
   children: ReactNode;
 }
 
-export interface Session {
-  user: User | null;
-  onLogout: () => void;
-}
-
-const sessionContext = createContext<Session>({
-  user: null,
-  onLogout: () => {},
-});
+const sessionContext = createContext<User | null>(null);
 
 export function SessionProvider(props: SessionProviderProps) {
   const { children } = props;
 
   const [user, setUser] = 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));
+      .then((user) => { setUser(user); setErr(null); })
+      .catch((err) => { setUser(null); setErr(err); });
   }
 
-  useEffect(() => {
-    loadUser();
-  }, []);
+  useLayoutEffect(() => { loadUser(); }, [err]);
 
   function onLogin(user: User) {
     setUser(user);
     setErr(null);
   }
 
-  async function onLogout() {
-    try {
-      logout();
-      setUser(null);
-      setErr({ message: "Logged out successfully" });
-      console.log("logged out.");
-      setLoading(true); // Set loading to true
-      loadUser();
-    } catch (e) {
-      console.error(e);
-      setErr(e); // Update the error state if logout fails
-    }
-  }
-  console.log("sanity", user);
-
   let content: ReactNode;
-  if (loading || (!err && !user))
-    content = (
-      <>
-        <Header />
-        <span className="loader" />
-      </>
-    );
-  else if (err) {
-    if ((err as any).message === "Logged out successfully") {
-      setTimeout(() => setErr(null), 1000);
-      content = <Login onLogin={onLogin} />;
-    } else {
-      content = <Login onLogin={onLogin} />;
-    }
-  } else
-    content = (
-      <sessionContext.Provider value={{ user, onLogout }}>
-        {children}
-      </sessionContext.Provider>
-    );
+  if (!err && !user) content = <span className="loader" />;
+  else if (err) content = <Login onLogin={onLogin} />;
+  else content = <sessionContext.Provider value={user}>{children}</sessionContext.Provider>;
 
   return content;
 }

src/api.ts

@@ -88,29 +88,22 @@ export type Token = {
   token_type: string;
 };
 
-// api.js
-export const login = async (req: LoginRequest): Promise<void> => {
-  try {
-    const response = await fetch(`${baseUrl}api/token`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-      },
-      body: new URLSearchParams(req).toString(),
-    });
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const token = (await response.json()) as Token;
-    if (token && token.access_token) {
-      localStorage.setItem("access_token", token.access_token);
-    } else {
-      console.log("Token not acquired");
-    }
-  } catch (e) {
-    console.error(e);
-    throw e; // rethrow the error so it can be caught by the caller
-  }
+export const login = (req: LoginRequest) => {
+  fetch(`${baseUrl}api/token`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams(req).toString(),
+  })
+    .then((resp) => resp.json() as Promise<Token>)
+    .then((token) =>
+      token
+        ? localStorage.setItem("access_token", token.access_token)
+        : console.log("token not acquired")
+    )
+    .catch((e) => console.log("catch error " + e + " in login"));
+  return Promise<void>;
 };
 
 export const logout = () => localStorage.removeItem("access_token");