fix: handle 401 errors to trigger auth modal (#26)

* feat: enhance error handling in API utilities

- Added a new function to handle unauthorized errors by updating the auth state in the query cache, triggering the AuthModal.
- Updated the existing response handling to incorporate the new unauthorized error handling.
- Improved clarity in the response handling logic for different status codes, including 204 and JSON responses.

* refactor: rename cacheTime to gcTime in queryClient configuration

- Updated the queryClient configuration to rename the cacheTime property to gcTime for clarity, indicating its purpose more accurately as garbage collection time.

Author: atyrode

src/frontend/src/api/apiUtils.ts

@@ -1,25 +1,39 @@
+import { queryClient } from './queryClient';
+
+/**
+ * Handle unauthorized errors by updating the auth state in the query cache
+ * This will trigger the AuthModal to appear
+ */
+export function handleUnauthorized() {
+  // Set auth state to false to trigger the AuthModal
+  queryClient.setQueryData(['auth'], false);
+}
+
 // Common error handling for API responses
 export async function handleResponse(response: Response) {
-    if (!response.ok) {
-      if (response.status === 401) {
-        throw new Error('Unauthorized');
-      }
-      
-      const errorText = await response.text();
-      throw new Error(errorText || `API error: ${response.status}`);
+  if (!response.ok) {
+    if (response.status === 401) {
+      // Update auth state when 401 is encountered
+      handleUnauthorized();
+      throw new Error('Unauthorized');
     }
 
-    // For endpoints that return no content
-    if (response.status === 204) {
-      return null;
-    }
-    
-    // For endpoints that return JSON
-    return response.json();
+    const errorText = await response.text();
+    throw new Error(errorText || `API error: ${response.status}`);
   }
 
-  // Base fetch function with error handling
-  export async function fetchApi(url: string, options?: RequestInit) {
+  // For endpoints that return no content
+  if (response.status === 204) {
+    return null;
+  }
+  
+  // For endpoints that return JSON
+  return response.json();
+}
+
+// Base fetch function with error handling
+export async function fetchApi(url: string, options?: RequestInit) {
+  try {
     const response = await fetch(url, {
       ...options,
       credentials: 'include',
@@ -30,4 +44,8 @@ export async function handleResponse(response: Response) {
     });
 
     return handleResponse(response);
-  }
+  } catch (error) {
+    // Re-throw the error after handling it
+    throw error;
+  }
+}

src/frontend/src/api/hooks.ts

@@ -60,6 +60,7 @@ export const api = {
       // Map backend 'state' property to frontend 'status'
       return { ...result, status: result.state };
     } catch (error) {
+      // Let the error propagate to be handled by the global error handler
       throw error;
     }
   },

src/frontend/src/api/queryClient.ts

@@ -7,7 +7,7 @@ export const queryClient = new QueryClient({
       retry: 1,
       refetchOnWindowFocus: true,
       staleTime: 30000, // 30 seconds
-      cacheTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 5, // 5 minutes (formerly cacheTime)
       refetchOnMount: true,
     },
   },