feat: bundle frontend with API executable

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route, useParams } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import "./App.css";
 import Container from "./lib/Container";
 import Navigation from "./lib/Navigation";
@@ -15,8 +15,8 @@ function App() {
       <Container>
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/@:username" element={<User />} />
-          <Route path="/@:username/:member" element={<User />} />
+          <Route path="/u/:username" element={<User />} />
+          <Route path="/u/:username/:member" element={<User />} />
           <Route path="/edit" element={<EditMe />} />
           <Route path="/edit/:member" element={<EditMe />} />
           <Route path="/login" element={<Login />} />

frontend/src/lib/Navigation.tsx

@@ -7,7 +7,7 @@ import Logo from "./logo";
 import { useRecoilState } from "recoil";
 import { userState } from "./store";
 import fetchAPI from "./fetch";
-import { MeUser } from "./types";
+import { APIError, ErrorCode, MeUser } from "./types";
 
 function Navigation() {
   const [user, setUser] = useRecoilState(userState);
@@ -17,7 +17,15 @@ function Navigation() {
 
     fetchAPI<MeUser>("/users/@me").then(
       (res) => setUser(res),
-      (err) => console.log("fetching /users/@me", err)
+      (err) => {
+        console.log("fetching /users/@me", err);
+        if (
+          (err as APIError).code == ErrorCode.InvalidToken ||
+          (err as APIError).code == ErrorCode.Forbidden
+        ) {
+          localStorage.removeItem("pronouns-token");
+        }
+      }
     );
   }, []);
 
@@ -45,7 +53,7 @@ function Navigation() {
 
   const nav = user ? (
     <>
-      <NavItem to={`/@${user.username}`}>@{user.username}</NavItem>
+      <NavItem to={`/u/${user.username}`}>@{user.username}</NavItem>
       <NavItem to="/settings">Settings</NavItem>
       <NavItem to="/logout">Log out</NavItem>
     </>

frontend/src/lib/fetch.ts

@@ -6,10 +6,18 @@ export default async function fetchAPI<T>(
   method = "GET",
   body = null
 ) {
+  let headers = {};
+  const token = localStorage.getItem("pronouns-token");
+  if (token) {
+    headers = {
+      Authorization: token,
+    };
+  }
+
   const resp = await fetch(`/api/v1${path}`, {
     method,
     headers: {
-      Authorization: localStorage.getItem("pronouns-token"),
+      ...headers,
       "Content-Type": "application/json",
     },
     body: body ? JSON.stringify(body) : null,

frontend/src/lib/store.ts

@@ -15,7 +15,10 @@ async function getCurrentUser() {
   try {
     return await fetchAPI<MeUser>("/users/@me");
   } catch (e) {
-    if ((e as APIError).code === ErrorCode.Forbidden) {
+    if (
+      (e as APIError).code === ErrorCode.Forbidden ||
+      (e as APIError).code === ErrorCode.InvalidToken
+    ) {
       localStorage.removeItem("pronouns-token");
     }
 

frontend/src/lib/types.ts

@@ -43,6 +43,7 @@ export enum ErrorCode {
 
   InvalidState = 1001,
   InvalidOAuthCode = 1002,
+  InvalidToken = 1003,
 
   UserNotFound = 2001,
 }

frontend/src/pages/login/Discord.tsx

@@ -55,7 +55,7 @@ export default function Discord() {
         console.log("token:", resp.token);
         localStorage.setItem("pronouns-token", resp.token);
 
-        if (resp.user) setUser(resp.user as MeUser);
+        setUser(resp.user);
       },
       (err) => {
         console.log(err);