changes

Author: kingdavid0016

Dechat/dex_with_fiat_frontend/src/hooks/useBeneficiaries.ts

@@ -24,11 +24,74 @@ export interface Beneficiary {
 
 const STORAGE_KEY = 'stellar_beneficiaries';
 
+/**
+ * Request deduplication system to prevent duplicate API calls.
+ * Concurrent fetches for the same key share one in-flight promise,
+ * with the result distributed to all waiters.
+ */
+class RequestDeduplicator {
+  private inFlightRequests = new Map<string, Promise<Beneficiary[]>>();
+
+  /**
+   * Get or create a promise for the given key.
+   * If a request is already in-flight, return the existing promise.
+   */
+  async fetch<T>(
+    key: string,
+    fetchFn: () => Promise<T>,
+  ): Promise<T> {
+    // Check if a request is already in-flight
+    if (this.inFlightRequests.has(key)) {
+      return this.inFlightRequests.get(key) as Promise<T>;
+    }
+
+    // Create new promise and track it
+    const promise = (async () => {
+      try {
+        const result = await fetchFn();
+        return result;
+      } finally {
+        // Remove from tracking after completion (success or failure)
+        this.inFlightRequests.delete(key);
+      }
+    })();
+
+    this.inFlightRequests.set(key, promise as Promise<Beneficiary[]>);
+    return promise;
+  }
+}
+
+const deduplicator = new RequestDeduplicator();
+
 function generateId(): string {
   return `ben_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 }
 
-export function useBeneficiaries() {
+/**
+ * Fetch beneficiaries from the API with request deduplication.
+ * All concurrent requests for the same key will share the same in-flight promise.
+ */
+async function fetchBeneficiariesWithDedup(
+  userId: string = 'current',
+): Promise<Beneficiary[]> {
+  return deduplicator.fetch(`beneficiaries:${userId}`, async () => {
+    try {
+      const response = await fetch(`/api/beneficiaries?userId=${encodeURIComponent(userId)}`);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      return Array.isArray(data) ? data : [];
+    } catch (error) {
+      console.error('Failed to fetch beneficiaries:', error);
+      // Return empty array on error to allow graceful fallback
+      return [];
+    }
+  });
+}
+
+export function useBeneficiaries(options?: { fetchFromApi?: boolean; userId?: string }) {
+  const { fetchFromApi = false, userId = 'current' } = options || {};
   const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
   const [isLoaded, setIsLoaded] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState<number>(-1);
@@ -38,8 +101,35 @@ export function useBeneficiaries() {
     setIsMounted(true);
   }, []);
 
+  // Fetch from API with deduplication if enabled
+  useEffect(() => {
+    if (!isMounted || !fetchFromApi || typeof window === 'undefined') return;
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const data = await fetchBeneficiariesWithDedup(userId);
+        if (!cancelled) {
+          setBeneficiaries(Array.isArray(data) ? data : []);
+          setIsLoaded(true);
+        }
+      } catch (error) {
+        console.error('Error loading beneficiaries:', error);
+        if (!cancelled) {
+          setIsLoaded(true);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isMounted, fetchFromApi, userId]);
+
+  // Load from localStorage if not fetching from API
   useEffect(() => {
-    if (!isMounted || typeof window === 'undefined') return;
+    if (!isMounted || fetchFromApi || typeof window === 'undefined') return;
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       if (stored) {
@@ -50,7 +140,7 @@ export function useBeneficiaries() {
       setBeneficiaries([]);
     }
     setIsLoaded(true);
-  }, [isMounted]);
+  }, [isMounted, fetchFromApi]);
 
   useEffect(() => {
     if (!isLoaded || typeof window === 'undefined') return;