@plugable-io/react 0.0.5 → 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

@@ -579,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;
@@ -606,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();
@@ -614,6 +623,7 @@ function FileImage({
           if (isMounted) {
             setImageSrc(objectUrl);
             setIsLoading(false);
+            refetchAttemptedRef.current = null;
           }
         } else {
           throw new Error("No download URL available for file");
@@ -632,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?.();
@@ -722,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,
@@ -733,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,
@@ -756,7 +785,8 @@ function FilePreview({
         objectFit,
         className,
         style,
-        borderRadius: 4
+        borderRadius: 4,
+        onRefetchNeeded: handleRefetch
       }
     );
   }

package/dist/index.mjs

@@ -523,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({
@@ -536,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;
@@ -563,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();
@@ -571,6 +580,7 @@ function FileImage({
           if (isMounted) {
             setImageSrc(objectUrl);
             setIsLoading(false);
+            refetchAttemptedRef.current = null;
           }
         } else {
           throw new Error("No download URL available for file");
@@ -589,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?.();
@@ -679,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,
@@ -690,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,
@@ -713,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.5",
+    "version": "0.0.6",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",