feat: unify API requests by introducing ApiService; update AuthService and AccountPage to use the new service for API calls; standardize ThemeProvider storageKey

src/services/api.ts

@@ -0,0 +1,150 @@
+/**
+ * API service with automatic token refresh functionality
+ */
+
+interface ApiRequestInit extends RequestInit {
+  skipRetry?: boolean // Flag to prevent infinite retry loops
+}
+
+class ApiService {
+  private baseURL = 'http://localhost:5000'
+  private isRefreshing = false
+  private refreshPromise: Promise<boolean> | null = null
+
+  /**
+   * Main API request method with automatic token refresh
+   */
+  async request(endpoint: string, options: ApiRequestInit = {}): Promise<Response> {
+    const url = `${this.baseURL}${endpoint}`
+    const config: RequestInit = {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      ...options,
+    }
+
+    try {
+      const response = await fetch(url, config)
+
+      // If request succeeds or it's not a 401, return response
+      if (response.ok || response.status !== 401 || options.skipRetry) {
+        return response
+      }
+
+      // Handle 401 - try to refresh token
+      const refreshed = await this.handleTokenRefresh()
+      
+      if (refreshed) {
+        // Retry the original request once
+        return this.request(endpoint, { ...options, skipRetry: true })
+      } else {
+        // Refresh failed, return the original 401 response
+        return response
+      }
+    } catch (error) {
+      console.error('API request failed:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Handle token refresh with deduplication
+   */
+  private async handleTokenRefresh(): Promise<boolean> {
+    // If already refreshing, wait for the current refresh to complete
+    if (this.isRefreshing && this.refreshPromise) {
+      return this.refreshPromise
+    }
+
+    // Start new refresh process
+    this.isRefreshing = true
+    this.refreshPromise = this.performTokenRefresh()
+
+    try {
+      const result = await this.refreshPromise
+      return result
+    } finally {
+      this.isRefreshing = false
+      this.refreshPromise = null
+    }
+  }
+
+  /**
+   * Perform the actual token refresh
+   */
+  private async performTokenRefresh(): Promise<boolean> {
+    try {
+      const response = await fetch(`${this.baseURL}/api/auth/refresh`, {
+        method: 'POST',
+        credentials: 'include',
+      })
+
+      if (response.ok) {
+        console.log('Token refreshed successfully')
+        return true
+      } else {
+        console.log('Token refresh failed:', response.status)
+        
+        // If refresh token is also expired (401), trigger logout
+        if (response.status === 401) {
+          this.handleLogout()
+        }
+        return false
+      }
+    } catch (error) {
+      console.error('Token refresh error:', error)
+      return false
+    }
+  }
+
+  /**
+   * Handle logout when refresh token expires
+   */
+  private handleLogout() {
+    // Clear any local storage or state if needed
+    console.log('Refresh token expired, user needs to login again')
+    
+    // Dispatch a custom event that the AuthContext can listen to
+    window.dispatchEvent(new CustomEvent('auth:refresh-token-expired'))
+  }
+
+  /**
+   * Convenience methods for common HTTP verbs
+   */
+  async get(endpoint: string, options: ApiRequestInit = {}) {
+    return this.request(endpoint, { ...options, method: 'GET' })
+  }
+
+  async post(endpoint: string, data?: unknown, options: ApiRequestInit = {}) {
+    return this.request(endpoint, {
+      ...options,
+      method: 'POST',
+      body: data ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  async patch(endpoint: string, data?: unknown, options: ApiRequestInit = {}) {
+    return this.request(endpoint, {
+      ...options,
+      method: 'PATCH',
+      body: data ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  async put(endpoint: string, data?: unknown, options: ApiRequestInit = {}) {
+    return this.request(endpoint, {
+      ...options,
+      method: 'PUT',
+      body: data ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  async delete(endpoint: string, options: ApiRequestInit = {}) {
+    return this.request(endpoint, { ...options, method: 'DELETE' })
+  }
+}
+
+// Export singleton instance
+export const apiService = new ApiService()

src/services/auth.ts

@@ -31,17 +31,16 @@ interface ErrorResponse {
   error: string
 }
 
+import { apiService } from './api'
+
 const API_BASE = 'http://localhost:5000/api'
 
 class AuthService {
   async register(email: string, password: string, name: string): Promise<User> {
-    const response = await fetch(`${API_BASE}/auth/register`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'include',
-      body: JSON.stringify({ email, password, name }),
+    const response = await apiService.post('/api/auth/register', {
+      email,
+      password,
+      name,
     })
 
     const data = await response.json()
@@ -54,13 +53,9 @@ class AuthService {
   }
 
   async login(email: string, password: string): Promise<User> {
-    const response = await fetch(`${API_BASE}/auth/login`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'include',
-      body: JSON.stringify({ email, password }),
+    const response = await apiService.post('/api/auth/login', {
+      email,
+      password,
     })
 
     const data = await response.json()
@@ -73,9 +68,7 @@ class AuthService {
   }
 
   async logout(): Promise<void> {
-    const response = await fetch(`${API_BASE}/auth/logout`, {
-      credentials: 'include',
-    })
+    const response = await apiService.get('/api/auth/logout')
 
     if (!response.ok) {
       throw new Error('Logout failed')
@@ -84,9 +77,7 @@ class AuthService {
 
   async getCurrentUser(): Promise<User | null> {
     try {
-      const response = await fetch(`${API_BASE}/auth/me`, {
-        credentials: 'include',
-      })
+      const response = await apiService.get('/api/auth/me')
 
       if (!response.ok) {
         return null
@@ -105,7 +96,7 @@ class AuthService {
     { name: string; display_name: string }
   > | null> {
     try {
-      const response = await fetch(`${API_BASE}/auth/providers`)
+      const response = await apiService.get('/api/auth/providers')
 
       if (!response.ok) {
         throw new Error('Failed to get OAuth providers')
@@ -124,10 +115,7 @@ class AuthService {
   }
 
   async refreshToken(): Promise<void> {
-    const response = await fetch(`${API_BASE}/auth/refresh`, {
-      method: 'POST',
-      credentials: 'include',
-    })
+    const response = await apiService.post('/api/auth/refresh')
 
     if (!response.ok) {
       throw new Error('Token refresh failed')