@plugable-io/react 0.0.11 → 0.0.12

package/dist/index.js

@@ -575,6 +575,10 @@ function Dropzone({
 
 // src/hooks/useFiles.ts
 var import_react3 = require("react");
+var DEBUG = true;
+function log(msg, ...args) {
+  if (DEBUG) console.log(`[useFiles] ${msg}`, ...args);
+}
 function useFiles({
   metadata,
   startPage = 1,
@@ -590,8 +594,7 @@ function useFiles({
   const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
   const [page, setPage] = (0, import_react3.useState)(startPage);
   const [hasNext, setHasNext] = (0, import_react3.useState)(false);
-  const previousParamsRef = (0, import_react3.useRef)(null);
-  const isInitialMountRef = (0, import_react3.useRef)(true);
+  const hasInitializedRef = (0, import_react3.useRef)(false);
   const effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = (0, import_react3.useMemo)(() => metadata, [metadataKey]);
@@ -604,24 +607,29 @@ function useFiles({
     page
   }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page]);
   const fetchFiles = (0, import_react3.useCallback)(async (pageNum, skipCache = false) => {
+    const currentParamsKey = JSON.stringify({
+      metadata: stableMetadata,
+      mediaType,
+      perPage,
+      orderBy,
+      orderDirection,
+      page: pageNum
+    });
+    log("fetchFiles called", { pageNum, skipCache, currentParamsKey });
     if (!skipCache) {
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      const cachedEntry = getCache(cacheKey);
+      const cachedEntry = getCache(currentParamsKey);
       if (cachedEntry) {
         const age = Date.now() - cachedEntry.timestamp;
         const isStale = age > effectiveStaleTime;
+        log("Cache check", { exists: true, age, isStale });
         if (!isStale) {
+          log("Serving from cache");
           setFiles(cachedEntry.files);
           setHasNext(cachedEntry.paging.has_next_page);
           return;
         }
+      } else {
+        log("Cache miss");
       }
     }
     setIsLoading(true);
@@ -635,16 +643,10 @@ function useFiles({
         ...orderBy && { order_by: orderBy },
         ...orderDirection && { order_direction: orderDirection }
       };
+      log("Sending API Request", options);
       const response = await client.list(options);
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      setCache(cacheKey, {
+      log("API Response received", response);
+      setCache(currentParamsKey, {
         files: response.files,
         paging: response.paging,
         timestamp: Date.now()
@@ -652,7 +654,7 @@ function useFiles({
       setFiles(response.files);
       setHasNext(response.paging.has_next_page);
     } catch (err) {
-      console.error("Failed to load files:", err);
+      console.error("[useFiles] Failed to load files:", err);
       setFiles([]);
       setHasNext(false);
     } finally {
@@ -660,41 +662,42 @@ function useFiles({
     }
   }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
   (0, import_react3.useEffect)(() => {
-    const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
-    const isInitialMount = isInitialMountRef.current;
-    previousParamsRef.current = paramsKeyWithPage;
-    if (isInitialMount) {
-      isInitialMountRef.current = false;
+    log("Effect triggered", { paramsKeyWithPage, autoLoad, initialized: hasInitializedRef.current });
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      if (!autoLoad) {
+        log("Skipping initial load because autoLoad is false");
+        return;
+      }
     }
     const cachedEntry = getCache(paramsKeyWithPage);
-    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
+    const isStale = cachedEntry ? Date.now() - cachedEntry.timestamp > effectiveStaleTime : true;
     if (cachedEntry) {
-      const age = Date.now() - cachedEntry.timestamp;
-      const isStale = age > effectiveStaleTime;
+      log("Immediate cache hit in Effect", { isStale });
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (paramsChanged || isStale && shouldFetch) {
-        fetchFiles(page, true);
+      if (!isStale) {
+        return;
       }
-    } else if (shouldFetch) {
-      fetchFiles(page, true);
     }
+    log("Proceeding to fetch");
+    fetchFiles(page, true);
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);
   (0, import_react3.useEffect)(() => {
     const unsubscribe = on("file.uploaded", () => {
+      log("Event file.uploaded received, refreshing...");
       fetchFiles(page, true);
     });
     return unsubscribe;
   }, [on, fetchFiles, page]);
   const loadNextPage = (0, import_react3.useCallback)(() => {
-    if (hasNext) {
-      setPage((p) => p + 1);
-    }
+    if (hasNext) setPage((p) => p + 1);
   }, [hasNext]);
   const loadPreviousPage = (0, import_react3.useCallback)(() => {
     setPage((p) => Math.max(1, p - 1));
   }, []);
   const refresh = (0, import_react3.useCallback)(async () => {
+    log("Manual refresh triggered");
     await fetchFiles(page, true);
   }, [fetchFiles, page]);
   return {

package/dist/index.mjs

@@ -529,6 +529,10 @@ function Dropzone({
 
 // src/hooks/useFiles.ts
 import { useState as useState3, useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+var DEBUG = true;
+function log(msg, ...args) {
+  if (DEBUG) console.log(`[useFiles] ${msg}`, ...args);
+}
 function useFiles({
   metadata,
   startPage = 1,
@@ -544,8 +548,7 @@ function useFiles({
   const [isLoading, setIsLoading] = useState3(false);
   const [page, setPage] = useState3(startPage);
   const [hasNext, setHasNext] = useState3(false);
-  const previousParamsRef = useRef2(null);
-  const isInitialMountRef = useRef2(true);
+  const hasInitializedRef = useRef2(false);
   const effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = useMemo2(() => metadata, [metadataKey]);
@@ -558,24 +561,29 @@ function useFiles({
     page
   }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page]);
   const fetchFiles = useCallback3(async (pageNum, skipCache = false) => {
+    const currentParamsKey = JSON.stringify({
+      metadata: stableMetadata,
+      mediaType,
+      perPage,
+      orderBy,
+      orderDirection,
+      page: pageNum
+    });
+    log("fetchFiles called", { pageNum, skipCache, currentParamsKey });
     if (!skipCache) {
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      const cachedEntry = getCache(cacheKey);
+      const cachedEntry = getCache(currentParamsKey);
       if (cachedEntry) {
         const age = Date.now() - cachedEntry.timestamp;
         const isStale = age > effectiveStaleTime;
+        log("Cache check", { exists: true, age, isStale });
         if (!isStale) {
+          log("Serving from cache");
           setFiles(cachedEntry.files);
           setHasNext(cachedEntry.paging.has_next_page);
           return;
         }
+      } else {
+        log("Cache miss");
       }
     }
     setIsLoading(true);
@@ -589,16 +597,10 @@ function useFiles({
         ...orderBy && { order_by: orderBy },
         ...orderDirection && { order_direction: orderDirection }
       };
+      log("Sending API Request", options);
       const response = await client.list(options);
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      setCache(cacheKey, {
+      log("API Response received", response);
+      setCache(currentParamsKey, {
         files: response.files,
         paging: response.paging,
         timestamp: Date.now()
@@ -606,7 +608,7 @@ function useFiles({
       setFiles(response.files);
       setHasNext(response.paging.has_next_page);
     } catch (err) {
-      console.error("Failed to load files:", err);
+      console.error("[useFiles] Failed to load files:", err);
       setFiles([]);
       setHasNext(false);
     } finally {
@@ -614,41 +616,42 @@ function useFiles({
     }
   }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
   useEffect2(() => {
-    const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
-    const isInitialMount = isInitialMountRef.current;
-    previousParamsRef.current = paramsKeyWithPage;
-    if (isInitialMount) {
-      isInitialMountRef.current = false;
+    log("Effect triggered", { paramsKeyWithPage, autoLoad, initialized: hasInitializedRef.current });
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      if (!autoLoad) {
+        log("Skipping initial load because autoLoad is false");
+        return;
+      }
     }
     const cachedEntry = getCache(paramsKeyWithPage);
-    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
+    const isStale = cachedEntry ? Date.now() - cachedEntry.timestamp > effectiveStaleTime : true;
     if (cachedEntry) {
-      const age = Date.now() - cachedEntry.timestamp;
-      const isStale = age > effectiveStaleTime;
+      log("Immediate cache hit in Effect", { isStale });
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (paramsChanged || isStale && shouldFetch) {
-        fetchFiles(page, true);
+      if (!isStale) {
+        return;
       }
-    } else if (shouldFetch) {
-      fetchFiles(page, true);
     }
+    log("Proceeding to fetch");
+    fetchFiles(page, true);
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);
   useEffect2(() => {
     const unsubscribe = on("file.uploaded", () => {
+      log("Event file.uploaded received, refreshing...");
       fetchFiles(page, true);
     });
     return unsubscribe;
   }, [on, fetchFiles, page]);
   const loadNextPage = useCallback3(() => {
-    if (hasNext) {
-      setPage((p) => p + 1);
-    }
+    if (hasNext) setPage((p) => p + 1);
   }, [hasNext]);
   const loadPreviousPage = useCallback3(() => {
     setPage((p) => Math.max(1, p - 1));
   }, []);
   const refresh = useCallback3(async () => {
+    log("Manual refresh triggered");
     await fetchFiles(page, true);
   }, [fetchFiles, page]);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plugable-io/react",
-    "version": "0.0.11",
+    "version": "0.0.12",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -43,7 +43,7 @@
         "react-dom": ">=16.8.0"
     },
     "dependencies": {
-        "@plugable-io/js": "^0.0.10"
+        "@plugable-io/js": "^0.0.11"
     },
     "devDependencies": {
         "@types/node": "^20.0.0",