SkyArtShop/website/public/assets/js/api-cache.js

/**
 * API Cache and Request Deduplication Manager
 * Optimizes frontend-backend communication by:
 * - Caching API responses
 * - Deduplicating simultaneous requests
 * - Reducing unnecessary network traffic
 */

class APICache {
  constructor() {
    this.cache = new Map();
    this.pendingRequests = new Map();
    this.defaultTTL = 5 * 60 * 1000; // 5 minutes default
    
    // Custom TTL for different endpoints
    this.ttlConfig = {
      '/api/products': 5 * 60 * 1000,          // 5 min
      '/api/products/featured': 10 * 60 * 1000, // 10 min
      '/api/categories': 30 * 60 * 1000,        // 30 min
      '/api/portfolio/projects': 10 * 60 * 1000, // 10 min
      '/api/blog/posts': 5 * 60 * 1000,         // 5 min
      '/api/pages': 10 * 60 * 1000,             // 10 min
    };
    
    // Start periodic cleanup
    this.startCleanup();
  }
  
  /**
   * Get cache key from URL
   */
  getCacheKey(url) {
    return url;
  }
  
  /**
   * Get TTL for specific endpoint
   */
  getTTL(url) {
    // Match base endpoint
    for (const [endpoint, ttl] of Object.entries(this.ttlConfig)) {
      if (url.startsWith(endpoint)) {
        return ttl;
      }
    }
    return this.defaultTTL;
  }
  
  /**
   * Check if cache entry is valid
   */
  isValid(entry) {
    return entry && Date.now() - entry.timestamp < entry.ttl;
  }
  
  /**
   * Get from cache
   */
  get(url) {
    const key = this.getCacheKey(url);
    const entry = this.cache.get(key);
    
    if (this.isValid(entry)) {
      console.log(`[Cache] HIT: ${url}`);
      return entry.data;
    }
    
    console.log(`[Cache] MISS: ${url}`);
    return null;
  }
  
  /**
   * Set cache entry
   */
  set(url, data) {
    const key = this.getCacheKey(url);
    const ttl = this.getTTL(url);
    
    this.cache.set(key, {
      data,
      timestamp: Date.now(),
      ttl
    });
    
    console.log(`[Cache] SET: ${url} (TTL: ${ttl}ms)`);
  }
  
  /**
   * Clear specific cache entry
   */
  clear(url) {
    const key = this.getCacheKey(url);
    this.cache.delete(key);
    console.log(`[Cache] CLEAR: ${url}`);
  }
  
  /**
   * Clear all cache
   */
  clearAll() {
    this.cache.clear();
    console.log('[Cache] CLEARED ALL');
  }
  
  /**
   * Fetch with caching and deduplication
   */
  async fetch(url, options = {}) {
    // Only cache GET requests
    if (options.method && options.method !== 'GET') {
      return fetch(url, options);
    }
    
    // Check cache first
    const cached = this.get(url);
    if (cached) {
      return {
        json: async () => cached,
        ok: true,
        status: 200,
        fromCache: true
      };
    }
    
    // Check if request is already pending
    if (this.pendingRequests.has(url)) {
      console.log(`[Cache] DEDUP: ${url} - Waiting for pending request`);
      return this.pendingRequests.get(url);
    }
    
    // Make new request
    console.log(`[Cache] FETCH: ${url}`);
    const requestPromise = fetch(url, options)
      .then(async response => {
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }
        
        const data = await response.json();
        
        // Cache successful response
        this.set(url, data);
        
        // Remove from pending
        this.pendingRequests.delete(url);
        
        return {
          json: async () => data,
          ok: true,
          status: response.status,
          fromCache: false
        };
      })
      .catch(error => {
        // Remove from pending on error
        this.pendingRequests.delete(url);
        throw error;
      });
    
    // Store as pending
    this.pendingRequests.set(url, requestPromise);
    
    return requestPromise;
  }
  
  /**
   * Periodic cleanup of expired entries
   */
  startCleanup() {
    setInterval(() => {
      let removed = 0;
      for (const [key, entry] of this.cache.entries()) {
        if (!this.isValid(entry)) {
          this.cache.delete(key);
          removed++;
        }
      }
      if (removed > 0) {
        console.log(`[Cache] Cleanup: Removed ${removed} expired entries`);
      }
    }, 60000); // Run every minute
  }
  
  /**
   * Get cache statistics
   */
  getStats() {
    return {
      size: this.cache.size,
      pending: this.pendingRequests.size,
      entries: Array.from(this.cache.entries()).map(([key, entry]) => ({
        url: key,
        age: Date.now() - entry.timestamp,
        ttl: entry.ttl,
        valid: this.isValid(entry)
      }))
    };
  }
}

// Create global instance
window.apiCache = new APICache();

// Expose cache clearing for manual control
window.clearAPICache = () => window.apiCache.clearAll();