Move api client to a hook and allow .env api url config

web/app/util/api.ts

@@ -1,36 +0,0 @@
-import axios from "axios";
-import { useAuth } from "./auth";
-
-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;
-  },
-  async (error) => {
-    const { clearUser } = useAuth();
-    console.log(error.response);
-    if (error.response && error.response.status === 401) {
-      try {
-        const refreshToken = localStorage.getItem("refresh-token");
-        const response = await client.post("/auth/refresh", { refreshToken });
-        const newAccessToken = response.data.access_token;
-
-        localStorage.setItem("token", newAccessToken);
-        error.config.headers.Authorization = `Bearer ${newAccessToken}`;
-        return client(error.config);
-      } catch (err) {
-        clearUser();
-        window.location.href = "/login";
-      }
-    }
-    return Promise.reject(error);
-  }
-);

web/app/util/api.tsx

@@ -0,0 +1,60 @@
+import axios, { AxiosInstance } from "axios";
+import { createContext, useContext } from "react";
+
+const ApiContext = createContext<AxiosInstance | null>(null);
+
+export function ApiProvider({
+  children,
+  apiUrl,
+}: {
+  children: React.ReactNode;
+  apiUrl: string;
+}) {
+  const api = useProvideApi(apiUrl);
+  return <ApiContext.Provider value={api}>{children}</ApiContext.Provider>;
+}
+
+export function useApi(): AxiosInstance {
+  const api = useContext(ApiContext);
+  if (!api) throw new Error("Could not find API provider");
+
+  return api;
+}
+
+function useProvideApi(apiUrl: string) {
+  const client = axios.create({
+    baseURL: apiUrl,
+    headers: { "Access-Control-Allow-Origin": "*" },
+  });
+
+  client.interceptors.request.use(
+    (config) => {
+      const token = localStorage.getItem("token");
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    async (error) => {
+      console.log(error.response);
+      if (error.response && error.response.status === 401) {
+        try {
+          const refreshToken = localStorage.getItem("refresh-token");
+          const response = await client.post("/auth/refresh", { refreshToken });
+          const newAccessToken = response.data.access_token;
+
+          localStorage.setItem("token", newAccessToken);
+          error.config.headers.Authorization = `Bearer ${newAccessToken}`;
+          return client(error.config);
+        } catch (err) {
+          localStorage.removeItem("token");
+          localStorage.removeItem("refresh-token");
+          window.location.href = "/login";
+        }
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  return client;
+}

web/app/util/auth.tsx

@@ -1,4 +1,4 @@
-import { client } from "./api";
+import { useApi } from "./api";
 import { useNavigate } from "@remix-run/react";
 import { createContext, useContext, useEffect, useState } from "react";
 
@@ -37,6 +37,8 @@ function useProvideAuth() {
 
   const navigate = useNavigate();
 
+  const client = useApi();
+
   const handleUser = (rawUser: string | null) => {
     if (rawUser) {
       setUser(rawUser);