@plugable-io/react 0.0.4 → 0.0.6

package/dist/index.d.mts

@@ -92,8 +92,9 @@ interface FileImageProps {
     style?: CSSProperties;
     onLoad?: () => void;
     onError?: (error: Error) => void;
+    onRefetchNeeded?: () => Promise<void>;
 }
-declare function FileImage({ file, width, height, objectFit, borderRadius, alt, className, style, onLoad, onError, }: FileImageProps): react_jsx_runtime.JSX.Element;
+declare function FileImage({ file, width, height, objectFit, borderRadius, alt, className, style, onLoad, onError, onRefetchNeeded, }: FileImageProps): react_jsx_runtime.JSX.Element;
 declare function clearImageCache(): void;
 
 interface FilePreviewProps {
@@ -106,7 +107,7 @@ interface FilePreviewProps {
     showExtension?: boolean;
     renderNonImage?: (file: FileObject) => React.ReactNode;
 }
-declare function FilePreview({ file, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ file: initialFile, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
 
 interface UseFilesOptions {
     metadata?: Record<string, any>;

package/dist/index.d.ts

@@ -92,8 +92,9 @@ interface FileImageProps {
     style?: CSSProperties;
     onLoad?: () => void;
     onError?: (error: Error) => void;
+    onRefetchNeeded?: () => Promise<void>;
 }
-declare function FileImage({ file, width, height, objectFit, borderRadius, alt, className, style, onLoad, onError, }: FileImageProps): react_jsx_runtime.JSX.Element;
+declare function FileImage({ file, width, height, objectFit, borderRadius, alt, className, style, onLoad, onError, onRefetchNeeded, }: FileImageProps): react_jsx_runtime.JSX.Element;
 declare function clearImageCache(): void;
 
 interface FilePreviewProps {
@@ -106,7 +107,7 @@ interface FilePreviewProps {
     showExtension?: boolean;
     renderNonImage?: (file: FileObject) => React.ReactNode;
 }
-declare function FilePreview({ file, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ file: initialFile, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
 
 interface UseFilesOptions {
     metadata?: Record<string, any>;

package/dist/index.js

@@ -414,6 +414,8 @@ 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 effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = (0, import_react3.useMemo)(() => metadata, [metadataKey]);
@@ -482,16 +484,23 @@ 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;
+    }
     const cachedEntry = getCache(paramsKeyWithPage);
+    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
     if (cachedEntry) {
       const age = Date.now() - cachedEntry.timestamp;
       const isStale = age > effectiveStaleTime;
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (isStale && autoLoad) {
+      if (paramsChanged || isStale && shouldFetch) {
         fetchFiles(page, true);
       }
-    } else if (autoLoad) {
+    } else if (shouldFetch) {
       fetchFiles(page, true);
     }
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);
@@ -570,11 +579,13 @@ function FileImage({
   className,
   style,
   onLoad,
-  onError
+  onError,
+  onRefetchNeeded
 }) {
   const [imageSrc, setImageSrc] = (0, import_react4.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
   const [error, setError] = (0, import_react4.useState)(null);
+  const refetchAttemptedRef = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
     let isMounted = true;
     let objectUrl = null;
@@ -597,6 +608,13 @@ function FileImage({
             }
           });
           if (!response.ok) {
+            const downloadUrlKey = `${file.id}-${file.download_url}`;
+            if (response.status === 403 && onRefetchNeeded && refetchAttemptedRef.current !== downloadUrlKey) {
+              refetchAttemptedRef.current = downloadUrlKey;
+              imageCache.delete(cacheKey);
+              await onRefetchNeeded();
+              return;
+            }
             throw new Error(`Failed to fetch image: ${response.statusText}`);
           }
           const blob = await response.blob();
@@ -605,6 +623,7 @@ function FileImage({
           if (isMounted) {
             setImageSrc(objectUrl);
             setIsLoading(false);
+            refetchAttemptedRef.current = null;
           }
         } else {
           throw new Error("No download URL available for file");
@@ -623,7 +642,7 @@ function FileImage({
     return () => {
       isMounted = false;
     };
-  }, [file.id, file.checksum, file.download_url, onError]);
+  }, [file.id, file.checksum, file.download_url, onError, onRefetchNeeded]);
   const handleLoad = () => {
     setIsLoading(false);
     onLoad?.();
@@ -713,9 +732,10 @@ function clearImageCache() {
 }
 
 // src/components/FilePreview.tsx
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function FilePreview({
-  file,
+  file: initialFile,
   width = 80,
   height = 80,
   className,
@@ -724,6 +744,24 @@ function FilePreview({
   showExtension = true,
   renderNonImage
 }) {
+  const { client } = usePlugable();
+  const [file, setFile] = (0, import_react5.useState)(initialFile);
+  const [isRefetching, setIsRefetching] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    setFile(initialFile);
+  }, [initialFile.id, initialFile.download_url]);
+  const handleRefetch = (0, import_react5.useCallback)(async () => {
+    if (isRefetching) return;
+    try {
+      setIsRefetching(true);
+      const refreshedFile = await client.get(file.id);
+      setFile(refreshedFile);
+    } catch (err) {
+      console.error("Failed to refetch file:", err);
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [file.id, client]);
   const isImage = file.content_type.startsWith("image/");
   const containerStyle = {
     width,
@@ -747,7 +785,8 @@ function FilePreview({
         objectFit,
         className,
         style,
-        borderRadius: 4
+        borderRadius: 4,
+        onRefetchNeeded: handleRefetch
       }
     );
   }

package/dist/index.mjs

@@ -355,7 +355,7 @@ function Dropzone({
 }
 
 // src/hooks/useFiles.ts
-import { useState as useState3, useCallback as useCallback3, useEffect, useMemo as useMemo2 } from "react";
+import { useState as useState3, useCallback as useCallback3, useEffect, useMemo as useMemo2, useRef as useRef2 } from "react";
 function useFiles({
   metadata,
   startPage = 1,
@@ -371,6 +371,8 @@ 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 effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = useMemo2(() => metadata, [metadataKey]);
@@ -439,16 +441,23 @@ function useFiles({
     }
   }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
   useEffect(() => {
+    const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
+    const isInitialMount = isInitialMountRef.current;
+    previousParamsRef.current = paramsKeyWithPage;
+    if (isInitialMount) {
+      isInitialMountRef.current = false;
+    }
     const cachedEntry = getCache(paramsKeyWithPage);
+    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
     if (cachedEntry) {
       const age = Date.now() - cachedEntry.timestamp;
       const isStale = age > effectiveStaleTime;
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (isStale && autoLoad) {
+      if (paramsChanged || isStale && shouldFetch) {
         fetchFiles(page, true);
       }
-    } else if (autoLoad) {
+    } else if (shouldFetch) {
       fetchFiles(page, true);
     }
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);
@@ -514,7 +523,7 @@ function FileList({
 }
 
 // src/components/FileImage.tsx
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useEffect as useEffect2, useState as useState4, useRef as useRef3 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var imageCache = /* @__PURE__ */ new Map();
 function FileImage({
@@ -527,11 +536,13 @@ function FileImage({
   className,
   style,
   onLoad,
-  onError
+  onError,
+  onRefetchNeeded
 }) {
   const [imageSrc, setImageSrc] = useState4(null);
   const [isLoading, setIsLoading] = useState4(true);
   const [error, setError] = useState4(null);
+  const refetchAttemptedRef = useRef3(null);
   useEffect2(() => {
     let isMounted = true;
     let objectUrl = null;
@@ -554,6 +565,13 @@ function FileImage({
             }
           });
           if (!response.ok) {
+            const downloadUrlKey = `${file.id}-${file.download_url}`;
+            if (response.status === 403 && onRefetchNeeded && refetchAttemptedRef.current !== downloadUrlKey) {
+              refetchAttemptedRef.current = downloadUrlKey;
+              imageCache.delete(cacheKey);
+              await onRefetchNeeded();
+              return;
+            }
             throw new Error(`Failed to fetch image: ${response.statusText}`);
           }
           const blob = await response.blob();
@@ -562,6 +580,7 @@ function FileImage({
           if (isMounted) {
             setImageSrc(objectUrl);
             setIsLoading(false);
+            refetchAttemptedRef.current = null;
           }
         } else {
           throw new Error("No download URL available for file");
@@ -580,7 +599,7 @@ function FileImage({
     return () => {
       isMounted = false;
     };
-  }, [file.id, file.checksum, file.download_url, onError]);
+  }, [file.id, file.checksum, file.download_url, onError, onRefetchNeeded]);
   const handleLoad = () => {
     setIsLoading(false);
     onLoad?.();
@@ -670,9 +689,10 @@ function clearImageCache() {
 }
 
 // src/components/FilePreview.tsx
+import { useState as useState5, useCallback as useCallback4, useEffect as useEffect3 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function FilePreview({
-  file,
+  file: initialFile,
   width = 80,
   height = 80,
   className,
@@ -681,6 +701,24 @@ function FilePreview({
   showExtension = true,
   renderNonImage
 }) {
+  const { client } = usePlugable();
+  const [file, setFile] = useState5(initialFile);
+  const [isRefetching, setIsRefetching] = useState5(false);
+  useEffect3(() => {
+    setFile(initialFile);
+  }, [initialFile.id, initialFile.download_url]);
+  const handleRefetch = useCallback4(async () => {
+    if (isRefetching) return;
+    try {
+      setIsRefetching(true);
+      const refreshedFile = await client.get(file.id);
+      setFile(refreshedFile);
+    } catch (err) {
+      console.error("Failed to refetch file:", err);
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [file.id, client]);
   const isImage = file.content_type.startsWith("image/");
   const containerStyle = {
     width,
@@ -704,7 +742,8 @@ function FilePreview({
         objectFit,
         className,
         style,
-        borderRadius: 4
+        borderRadius: 4,
+        onRefetchNeeded: handleRefetch
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plugable-io/react",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",