fix: attempt to fix auth issue (#14)

frontend/src/components/attendant-requests/index.tsx

@@ -5,14 +5,15 @@ import dayjs from "dayjs";
 import { FiCalendar, FiClock, FiGift, FiMapPin } from "react-icons/fi";
 import { IoCheckmarkCircle, IoFileTrayOutline } from "react-icons/io5";
 import formatter from "../../common/formatter";
-import httpService from "../../common/httpservice";
 import {
   useAttendantRequestsQuery,
   useUpcomingMatches,
 } from "../../hooks/useQueries";
 import { MatchSummaryModel } from "../../models";
+import { useApi } from "../../hooks/useApi";
 
 export default function AttendantRequests() {
+  const api = useApi();
   const { user } = useAuth0();
   const { data: attendantRequests, refetch: refetchAttendants } =
     useAttendantRequestsQuery(user?.sub ?? "");
@@ -24,7 +25,7 @@ export default function AttendantRequests() {
   } = useUpcomingMatches();
 
   const toggleAttendantClick = async (match: MatchSummaryModel) => {
-    await httpService.post("api/v1/registrations/attendant-requests", {
+    await api.post("api/v1/registrations/attendant-requests", {
       externalUserId: user?.sub,
       lastName: user?.family_name,
       firstName: user?.given_name,

frontend/src/hooks/useApi.tsx

@@ -0,0 +1,70 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import axios from "axios";
+import { useCallback } from "react";
+
+// Create a single Axios client instance
+const client = axios.create({
+  baseURL: import.meta.env.VITE_API_HOST,
+});
+
+// Utility to get auth headers using useAuth0
+const useAuthHeaders = () => {
+  const { getAccessTokenSilently } = useAuth0();
+
+  const getAuthHeaders = useCallback(async () => {
+    try {
+      const token = await getAccessTokenSilently();
+      return {
+        Authorization: `Bearer ${token}`,
+      };
+    } catch (e) {
+      console.error("Error fetching access token:", e);
+      return {};
+    }
+  }, [getAccessTokenSilently]);
+
+  return getAuthHeaders;
+};
+
+// Generic hook for API requests
+export const useApi = () => {
+  const getAuthHeaders = useAuthHeaders();
+
+  const get = useCallback(
+    async <T = any,>(url: string): Promise<T> => {
+      const headers = await getAuthHeaders();
+      const res = await client.get(url, { headers });
+      return res.data as T;
+    },
+    [getAuthHeaders],
+  );
+
+  const post = useCallback(
+    async <T = any,>(url: string, body: T): Promise<any> => {
+      const headers = await getAuthHeaders();
+      const res = await client.post(url, body, { headers });
+      return res.data;
+    },
+    [getAuthHeaders],
+  );
+
+  const put = useCallback(
+    async <T = any,>(url: string, body: T): Promise<any> => {
+      const headers = await getAuthHeaders();
+      const res = await client.put(url, body, { headers });
+      return res.data;
+    },
+    [getAuthHeaders],
+  );
+
+  const del = useCallback(
+    async (url: string): Promise<any> => {
+      const headers = await getAuthHeaders();
+      const res = await client.delete(url, { headers });
+      return res.data;
+    },
+    [getAuthHeaders],
+  );
+
+  return { get, post, put, del };
+};