Implement basic API interaction

web/app/util/api.ts

@@ -0,0 +1,45 @@
+import axios from "axios";
+
+export const client = axios.create({
+  baseURL: "http://localhost:8081",
+  headers: { "Access-Control-Allow-Origin": "*" },
+});
+
+client.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+client.interceptors.request.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response.status == 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      const refreshToken = localStorage.getItem("refresh-token");
+      if (refreshToken) {
+        try {
+          const { data } = await client.post("/auth/refresh", {
+            refresh: refreshToken,
+          });
+          localStorage.setItem("token", data.refreshToken);
+          client.defaults.headers.common[
+            "Authorization"
+          ] = `Bearer ${data.refreshToken}`;
+          return client(originalRequest);
+        } catch (_error) {
+          return Promise.reject(_error);
+        }
+      }
+    }
+    return Promise.reject(error);
+  }
+);

web/app/util/hooks.ts

@@ -0,0 +1,52 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { client } from "./api";
+import { useNavigate } from "@remix-run/react";
+
+type User = {
+  username: string;
+  level: number;
+};
+
+export function useMe() {
+  return useQuery<User, Error>({
+    queryKey: ["me"],
+    queryFn: () => client.get(`/users/me`).then((res) => res.data),
+  });
+}
+
+export function useSignOut() {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  const onSignOut = async () => {
+    queryClient.setQueryData(["user"], null);
+    const res = await client.post("/auth/logout");
+    if (res.status == 200) {
+      navigate("/login");
+    } else {
+      console.error("Failed to log out");
+    }
+  };
+
+  return onSignOut;
+}
+
+export function useLogin() {
+  const navigate = useNavigate();
+
+  const { mutate: signInMutation } = useMutation({
+    mutationFn: async (values) => {
+      return await client.postForm("/auth/login", values);
+    },
+    onSuccess: (data) => {
+      localStorage.setItem("token", data.data.access_token);
+      localStorage.setItem("refresh-token", data.data.refresh_token);
+      navigate("/logbook");
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  return signInMutation;
+}