@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/contexts/SubscriptionPlanFormatsProvider.tsx

@@ -0,0 +1,217 @@
+import { useAxios } from "dash-axios-hook";
+import { createContext, useContext, useState, useRef, useEffect } from "react";
+import { idbSet, idbGet } from "./SystemRequestsCache";
+
+// Debug flag for logging
+const DEBUG_SUBSCRIPTION_PLAN_FORMATS = true;
+
+/**
+ * SubscriptionPlanFormatsContext
+ * 
+ * Context specifically designed for subscription plan management that fetches
+ * both limit formats and addon formats from the backend API.
+ */
+interface SubscriptionPlanFormatsContextValue {
+    formats: any;           // Limit formats (for backward compatibility)
+    addonFormats: any;      // Add-on formats
+    loading: boolean;
+    fetchFormats: () => Promise<void>;
+}
+
+const SubscriptionPlanFormatsContext = createContext<SubscriptionPlanFormatsContextValue>({
+    formats: null,
+    addonFormats: null,
+    loading: false,
+    fetchFormats: async () => {},
+});
+
+interface SubscriptionPlanFormatsProviderProps {
+    cacheSeconds?: number;
+    children: React.ReactNode;
+}
+
+/**
+ * SubscriptionPlanFormatsProvider
+ * 
+ * Provider that fetches both limit formats and addon formats for subscription plans.
+ * Uses IndexedDB for caching to persist data across sessions.
+ * 
+ * Usage:
+ * <SubscriptionPlanFormatsProvider cacheSeconds={300}>
+ *   ...children...
+ * </SubscriptionPlanFormatsProvider>
+ */
+export const SubscriptionPlanFormatsProvider: React.FC<SubscriptionPlanFormatsProviderProps> = ({
+    cacheSeconds = 300,
+    children
+}) => {
+    const axios = useAxios();
+    const CACHE_KEY_LIMITS = "subscription_plan_limit_formats_cache";
+    const CACHE_KEY_ADDONS = "subscription_plan_addon_formats_cache";
+
+    const GLOBALS = useRef({
+        fetchPromise: null as Promise<any> | null,
+        formats: null as any,
+        addonFormats: null as any,
+        lastFetchTime: 0
+    });
+
+    const [formats, setFormats] = useState<any>(GLOBALS.current.formats);
+    const [addonFormats, setAddonFormats] = useState<any>(GLOBALS.current.addonFormats);
+    const [loading, setLoading] = useState<boolean>(!GLOBALS.current.formats && !GLOBALS.current.fetchPromise);
+
+    const fetchFormats = async () => {
+        if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+            console.log(`[SubscriptionPlanFormats] fetchFormats called`);
+        }
+
+        if (GLOBALS.current.fetchPromise) {
+            if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                console.log(`[SubscriptionPlanFormats] fetchPromise already in progress`);
+            }
+            return GLOBALS.current.fetchPromise;
+        }
+
+        const now = Date.now();
+        
+        // Check if we have cached data and it's still valid
+        if (GLOBALS.current.formats && GLOBALS.current.addonFormats && 
+            now - GLOBALS.current.lastFetchTime < cacheSeconds * 1000) {
+            if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                console.log(`[SubscriptionPlanFormats] Using cached data (age: ${(now - GLOBALS.current.lastFetchTime) / 1000}s)`);
+            }
+            if (!formats) setFormats(GLOBALS.current.formats);
+            if (!addonFormats) setAddonFormats(GLOBALS.current.addonFormats);
+            return;
+        }
+
+        setLoading(true);
+
+        GLOBALS.current.fetchPromise = (async () => {
+            try {
+                if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                    console.log(`[SubscriptionPlanFormats] FETCHING limit formats and addon formats`);
+                }
+
+                // Fetch both endpoints in parallel
+                const [limitsResponse, addonsResponse] = await Promise.all([
+                    axios.get('system/subscription-plan/limitFormats'),
+                    axios.get('system/subscription-plan/addonFormats')
+                ]);
+
+                GLOBALS.current.formats = limitsResponse.data;
+                GLOBALS.current.addonFormats = addonsResponse.data;
+                GLOBALS.current.lastFetchTime = Date.now();
+
+                setFormats(limitsResponse.data);
+                setAddonFormats(addonsResponse.data);
+
+                // Persist to IndexedDB
+                try {
+                    await idbSet(`${CACHE_KEY_LIMITS}_formats`, limitsResponse.data);
+                    await idbSet(`${CACHE_KEY_ADDONS}_formats`, addonsResponse.data);
+                    await idbSet(`subscription_plan_formats_lastFetchTime`, GLOBALS.current.lastFetchTime);
+                    if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                        console.log(`[SubscriptionPlanFormats] Saved to IndexedDB`);
+                    }
+                } catch (error) {
+                    if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                        console.error(`[SubscriptionPlanFormats] Error writing to IndexedDB:`, error);
+                    }
+                }
+            } catch (error) {
+                if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                    console.error(`[SubscriptionPlanFormats] Error fetching formats:`, error);
+                }
+            } finally {
+                setLoading(false);
+                GLOBALS.current.fetchPromise = null;
+                if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                    console.log(`[SubscriptionPlanFormats] fetchPromise cleared`);
+                }
+            }
+        })();
+
+        return GLOBALS.current.fetchPromise;
+    };
+
+    useEffect(() => {
+        const loadCachedFormats = async () => {
+            if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                console.log(`[SubscriptionPlanFormats] loadCachedFormats`);
+            }
+            try {
+                // Try to load from IndexedDB first
+                if (!GLOBALS.current.formats) {
+                    const cachedFormats = await idbGet(`${CACHE_KEY_LIMITS}_formats`);
+                    if (cachedFormats) {
+                        GLOBALS.current.formats = cachedFormats;
+                        setFormats(cachedFormats);
+                        if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                            console.log(`[SubscriptionPlanFormats] Loaded limit formats from IndexedDB`);
+                        }
+                    }
+                }
+                if (!GLOBALS.current.addonFormats) {
+                    const cachedAddonFormats = await idbGet(`${CACHE_KEY_ADDONS}_formats`);
+                    if (cachedAddonFormats) {
+                        GLOBALS.current.addonFormats = cachedAddonFormats;
+                        setAddonFormats(cachedAddonFormats);
+                        if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                            console.log(`[SubscriptionPlanFormats] Loaded addon formats from IndexedDB`);
+                        }
+                    }
+                }
+
+                // Load lastFetchTime
+                const cachedTime = await idbGet(`subscription_plan_formats_lastFetchTime`);
+                if (cachedTime) {
+                    GLOBALS.current.lastFetchTime = cachedTime;
+                }
+
+                // If we have both cached, check if still valid
+                if (GLOBALS.current.formats && GLOBALS.current.addonFormats) {
+                    const now = Date.now();
+                    if (now - GLOBALS.current.lastFetchTime < cacheSeconds * 1000) {
+                        setLoading(false);
+                        return; // Cache is still valid
+                    }
+                }
+
+                // Fetch fresh data
+                await fetchFormats();
+            } catch (error) {
+                if (DEBUG_SUBSCRIPTION_PLAN_FORMATS) {
+                    console.error(`[SubscriptionPlanFormats] Error loading cached formats:`, error);
+                }
+                await fetchFormats();
+            }
+        };
+        loadCachedFormats();
+        // eslint-disable-next-line
+    }, [cacheSeconds]);
+
+    useEffect(() => {
+        if (formats && addonFormats) setLoading(false);
+    }, [formats, addonFormats]);
+
+    return (
+        <SubscriptionPlanFormatsContext.Provider value={{
+            formats: (formats || GLOBALS.current.formats) ?? null,
+            addonFormats: (addonFormats || GLOBALS.current.addonFormats) ?? null,
+            fetchFormats,
+            loading
+        }}>
+            {children}
+        </SubscriptionPlanFormatsContext.Provider>
+    );
+};
+
+/**
+ * Hook to access the subscription plan formats context
+ */
+export function useSubscriptionPlanFormats() {
+    return useContext(SubscriptionPlanFormatsContext);
+}
+
+export default SubscriptionPlanFormatsProvider;

package/src/contexts/SystemRequestsCache.tsx

@@ -0,0 +1,215 @@
+import { useAxios } from "dash-axios-hook";
+import { createContext, useContext, useState, useRef, useEffect } from "react";
+
+// --- IndexedDB Utility ---
+const DB_NAME = "SystemRequestsCacheDB";
+const STORE_NAME = "kvstore";
+const DB_VERSION = 1;
+
+function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      req.result.createObjectStore(STORE_NAME);
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function idbSet(key: string, value: any) {
+  const db = await openDB();
+  return new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    tx.objectStore(STORE_NAME).put(value, key);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+export async function idbGet(key: string) {
+  const db = await openDB();
+  return new Promise<any>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const req = tx.objectStore(STORE_NAME).get(key);
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+// Debug flag for logging
+const DEBUG_SYSTEM_REQUESTS_CACHE = true;
+
+// --- Context for generic system requests cache ---
+interface SystemRequestsCacheContextValue {
+  formats: any;
+  fetchFormats: () => Promise<void>;
+  loading: boolean;
+}
+const SystemRequestsCacheContext = createContext<SystemRequestsCacheContextValue>({
+  formats: null,
+  fetchFormats: async () => {},
+  loading: false,
+});
+
+interface SystemRequestsCacheProviderProps {
+  cacheKey: string;
+  apiUrl: string;
+  cacheSeconds?: number;
+  children: React.ReactNode;
+}
+
+/**
+ * SystemRequestsCacheProvider
+ * 
+ * Usage:
+ * <SystemRequestsCacheProvider
+ *   cacheKey="system_available_permissions_cache"
+ *   apiUrl="system/permission/availablePermissions"
+ *   cacheSeconds={10}
+ * >
+ *   ...children...
+ * </SystemRequestsCacheProvider>
+ */
+export const SystemRequestsCacheProvider: React.FC<SystemRequestsCacheProviderProps> = ({
+  cacheKey,
+  apiUrl,
+  cacheSeconds = 10,
+  children
+}) => {
+  const axios = useAxios();
+  const GLOBALS = useRef({
+    fetchPromise: null as Promise<any> | null,
+    formats: null as any,
+    lastFetchTime: 0
+  });
+
+  const [formats, setFormats] = useState<any>(GLOBALS.current.formats);
+  const [loading, setLoading] = useState<boolean>(!GLOBALS.current.formats && !GLOBALS.current.fetchPromise);
+
+  const fetchFormats = async () => {
+    if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+      console.log(`[SystemRequestsCache] fetchFormats called for key=${cacheKey}, url=${apiUrl}`);
+    }
+    if (GLOBALS.current.fetchPromise) {
+      if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+        console.log(`[SystemRequestsCache] fetchPromise already in progress for key=${cacheKey}`);
+      }
+      return GLOBALS.current.fetchPromise;
+    }
+
+    const now = Date.now();
+    if (!GLOBALS.current.lastFetchTime) {
+      try {
+        GLOBALS.current.lastFetchTime = await idbGet(cacheKey) || 0;
+        if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+          console.log(`[SystemRequestsCache] Loaded lastFetchTime from IndexedDB: ${GLOBALS.current.lastFetchTime}`);
+        }
+      } catch (error) {
+        if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+          console.error(`[SystemRequestsCache] Error reading lastFetchTime from IndexedDB:`, error);
+        }
+      }
+    }
+
+    if (GLOBALS.current.formats && now - GLOBALS.current.lastFetchTime < cacheSeconds * 1000) {
+      if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+        console.log(`[SystemRequestsCache] Using cached formats for key=${cacheKey} (age: ${(now - GLOBALS.current.lastFetchTime) / 1000}s)`);
+      }
+      if (!formats) setFormats(GLOBALS.current.formats);
+      return;
+    }
+
+    setLoading(true);
+
+    GLOBALS.current.fetchPromise = (async () => {
+      try {
+        if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+          console.log(`[SystemRequestsCache] FETCHING ${apiUrl} for key=${cacheKey}`);
+        }
+        const { data } = await axios.get(apiUrl);
+
+        GLOBALS.current.formats = data;
+        GLOBALS.current.lastFetchTime = Date.now();
+
+        setFormats(data);
+
+        try {
+          await idbSet(cacheKey, GLOBALS.current.lastFetchTime);
+          await idbSet(`${cacheKey}_formats`, data);
+          if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+            console.log(`[SystemRequestsCache] Saved formats and lastFetchTime to IndexedDB for key=${cacheKey}`);
+          }
+        } catch (error) {
+          if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+            console.error(`[SystemRequestsCache] Error writing to IndexedDB:`, error);
+          }
+        }
+      } catch (error) {
+        if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+          console.error(`[SystemRequestsCache] Error fetching settings formats:`, error);
+        }
+      } finally {
+        setLoading(false);
+        GLOBALS.current.fetchPromise = null;
+        if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+          console.log(`[SystemRequestsCache] fetchPromise cleared for key=${cacheKey}`);
+        }
+      }
+    })();
+
+    return GLOBALS.current.fetchPromise;
+  };
+
+  useEffect(() => {
+    const loadCachedFormats = async () => {
+      if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+        console.log(`[SystemRequestsCache] loadCachedFormats for key=${cacheKey}`);
+      }
+      try {
+        if (!GLOBALS.current.formats) {
+          const cachedFormats = await idbGet(`${cacheKey}_formats`);
+          if (cachedFormats) {
+            GLOBALS.current.formats = cachedFormats;
+            setFormats(cachedFormats);
+            setLoading(false);
+            if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+              console.log(`[SystemRequestsCache] Loaded formats from IndexedDB for key=${cacheKey}`);
+            }
+          }
+        }
+        if (!GLOBALS.current.formats) setLoading(true);
+        await fetchFormats();
+      } catch (error) {
+        if (DEBUG_SYSTEM_REQUESTS_CACHE) {
+          console.error(`[SystemRequestsCache] Error loading cached formats:`, error);
+        }
+        setLoading(true);
+        await fetchFormats();
+      }
+    };
+    loadCachedFormats();
+    // eslint-disable-next-line
+  }, [cacheKey, apiUrl, cacheSeconds]);
+
+  useEffect(() => {
+    if (formats) setLoading(false);
+  }, [formats]);
+
+  return (
+    <SystemRequestsCacheContext.Provider value={{
+      formats: (formats || GLOBALS.current.formats) ?? null,
+      fetchFormats,
+      loading
+    }}>
+      {children}
+    </SystemRequestsCacheContext.Provider>
+  );
+};
+
+// Hook is now parameterless, just reads from context
+export function useSystemRequestsCache() {
+  return useContext(SystemRequestsCacheContext);
+}
+
+export default SystemRequestsCacheProvider;