Refactor: Centralize API config and error handling

Author: Scott Kurtzeborn

web/src/api.js

@@ -0,0 +1,30 @@
+/**
+ * Centralized API configuration
+ */
+
+// API base URL - use environment variable in production, empty string for local dev with proxy
+export const API_BASE = import.meta.env.VITE_API_URL || '';
+
+/**
+ * Parse API response, handling both success and error cases
+ * @param {Response} response - Fetch response
+ * @returns {Promise<{data: any, ok: boolean}>}
+ */
+export async function parseApiResponse(response) {
+  const text = await response.text();
+  const data = text ? JSON.parse(text) : {};
+  return { data, ok: response.ok };
+}
+
+/**
+ * Extract error message from API error response
+ * @param {any} data - Parsed response data
+ * @param {string} fallback - Fallback error message
+ * @returns {string}
+ */
+export function getErrorMessage(data, fallback = 'An error occurred') {
+  if (typeof data.error === 'string') {
+    return data.error;
+  }
+  return data.error?.message || fallback;
+}

web/src/components/CreateUrl.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { useAuth } from '../context/AuthContext';
-
-// API base URL - use environment variable in production
-const API_BASE = import.meta.env.VITE_API_URL || '';
+import { API_BASE, parseApiResponse, getErrorMessage } from '../api';
 
 function CreateUrl({ onSuccess }) {
   const { getAccessToken } = useAuth();
@@ -28,12 +26,11 @@ function CreateUrl({ onSuccess }) {
         body: JSON.stringify({ url }),
       });
 
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to create URL');
-      }
+      const { data, ok } = await parseApiResponse(response);
 
-      const data = await response.json();
+      if (!ok) {
+        throw new Error(getErrorMessage(data, 'Failed to create URL'));
+      }
       setSuccess(`Created: ${data.shortUrl}`);
       setUrl('');
 

web/src/components/Dashboard.jsx

@@ -1,8 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useAuth } from '../context/AuthContext';
-
-// API base URL - use environment variable in production
-const API_BASE = import.meta.env.VITE_API_URL || '';
+import { API_BASE } from '../api';
 
 function Dashboard() {
   const { getAccessToken } = useAuth();
@@ -14,11 +12,7 @@ function Dashboard() {
   const [sortBy, setSortBy] = useState('date');
   const [sortOrder, setSortOrder] = useState('desc');
 
-  useEffect(() => {
-    fetchUrls();
-  }, [page, sortBy, sortOrder]);
-
-  const fetchUrls = async () => {
+  const fetchUrls = useCallback(async () => {
     setLoading(true);
     setError(null);
 
@@ -45,7 +39,11 @@ function Dashboard() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [getAccessToken, page, sortBy, sortOrder]);
+
+  useEffect(() => {
+    fetchUrls();
+  }, [fetchUrls]);
 
   const handleDelete = async (id) => {
     if (!confirm('Are you sure you want to delete this URL?')) {

web/src/components/Settings.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { useAuth } from '../context/AuthContext';
-
-// API base URL - use environment variable in production
-const API_BASE = import.meta.env.VITE_API_URL || '';
+import { API_BASE, parseApiResponse, getErrorMessage } from '../api';
 
 function Settings() {
   const { getAccessToken } = useAuth();
@@ -28,14 +26,10 @@ function Settings() {
         body: JSON.stringify({ email }),
       });
 
-      const text = await response.text();
-      const data = text ? JSON.parse(text) : {};
+      const { data, ok } = await parseApiResponse(response);
 
-      if (!response.ok) {
-        const errorMessage = typeof data.error === 'string' 
-          ? data.error 
-          : data.error?.message || 'Failed to add user';
-        throw new Error(errorMessage);
+      if (!ok) {
+        throw new Error(getErrorMessage(data, 'Failed to add user'));
       }
 
       setSuccess(`User added! Remaining invites today: ${data.remainingInvites}`);

web/src/context/AuthContext.jsx

@@ -1,12 +1,10 @@
 import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
 import { useMsal, useIsAuthenticated } from '@azure/msal-react';
 import { loginRequest } from '../authConfig';
+import { API_BASE } from '../api';
 
 const AuthContext = createContext(null);
 
-// API base URL - use environment variable in production, empty string for local dev with proxy
-const API_BASE_URL = import.meta.env.VITE_API_URL || '';
-
 export function AuthProvider({ children }) {
   const { instance, accounts } = useMsal();
   const isAuthenticated = useIsAuthenticated();
@@ -19,7 +17,7 @@ export function AuthProvider({ children }) {
 
   const checkUserAllowed = useCallback(async (email) => {
     try {
-      const response = await fetch(`${API_BASE_URL}/api/auth/check?email=${encodeURIComponent(email)}`);
+      const response = await fetch(`${API_BASE}/api/auth/check?email=${encodeURIComponent(email)}`);
       if (response.ok) {
         const data = await response.json();
         setIsAllowed(data.allowed);

workers/src/index.js

@@ -119,5 +119,3 @@ async function trackClick(id, env) {
     console.error('Error tracking click:', error);
   }
 }
-
-