@plugable-io/react 0.0.5 → 0.0.7

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;
@@ -599,21 +601,47 @@ function FileImage({
           return;
         }
         if (file.download_url) {
-          const response = await fetch(file.download_url, {
-            headers: {
-              "Cache-Control": "private, max-age=31536000",
-              "If-None-Match": file.checksum
+          let response = null;
+          try {
+            response = await fetch(file.download_url, {
+              headers: {
+                "Cache-Control": "private, max-age=31536000",
+                "If-None-Match": file.checksum
+              }
+            });
+            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}`);
             }
-          });
-          if (!response.ok) {
-            throw new Error(`Failed to fetch image: ${response.statusText}`);
-          }
-          const blob = await response.blob();
-          objectUrl = URL.createObjectURL(blob);
-          imageCache.set(cacheKey, objectUrl);
-          if (isMounted) {
-            setImageSrc(objectUrl);
-            setIsLoading(false);
+            const blob = await response.blob();
+            objectUrl = URL.createObjectURL(blob);
+            imageCache.set(cacheKey, objectUrl);
+            if (isMounted) {
+              setImageSrc(objectUrl);
+              setIsLoading(false);
+              refetchAttemptedRef.current = null;
+            }
+          } catch (fetchError) {
+            const downloadUrlKey = `${file.id}-${file.download_url}`;
+            const isNetworkError = !response && (fetchError.message?.includes("Failed to fetch") || fetchError.message?.includes("CORS") || fetchError.name === "TypeError" || fetchError.message?.includes("network") || fetchError.message?.includes("ERR_FAILED"));
+            const is403Error = response?.status === 403;
+            if ((isNetworkError || is403Error) && onRefetchNeeded && refetchAttemptedRef.current !== downloadUrlKey) {
+              refetchAttemptedRef.current = downloadUrlKey;
+              imageCache.delete(cacheKey);
+              try {
+                await onRefetchNeeded();
+                return;
+              } catch (refetchError) {
+                console.error("Failed to refetch file:", refetchError);
+              }
+            }
+            throw fetchError;
           }
         } else {
           throw new Error("No download URL available for file");
@@ -632,7 +660,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 +750,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 +762,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 +803,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;
@@ -556,21 +558,47 @@ function FileImage({
           return;
         }
         if (file.download_url) {
-          const response = await fetch(file.download_url, {
-            headers: {
-              "Cache-Control": "private, max-age=31536000",
-              "If-None-Match": file.checksum
+          let response = null;
+          try {
+            response = await fetch(file.download_url, {
+              headers: {
+                "Cache-Control": "private, max-age=31536000",
+                "If-None-Match": file.checksum
+              }
+            });
+            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}`);
             }
-          });
-          if (!response.ok) {
-            throw new Error(`Failed to fetch image: ${response.statusText}`);
-          }
-          const blob = await response.blob();
-          objectUrl = URL.createObjectURL(blob);
-          imageCache.set(cacheKey, objectUrl);
-          if (isMounted) {
-            setImageSrc(objectUrl);
-            setIsLoading(false);
+            const blob = await response.blob();
+            objectUrl = URL.createObjectURL(blob);
+            imageCache.set(cacheKey, objectUrl);
+            if (isMounted) {
+              setImageSrc(objectUrl);
+              setIsLoading(false);
+              refetchAttemptedRef.current = null;
+            }
+          } catch (fetchError) {
+            const downloadUrlKey = `${file.id}-${file.download_url}`;
+            const isNetworkError = !response && (fetchError.message?.includes("Failed to fetch") || fetchError.message?.includes("CORS") || fetchError.name === "TypeError" || fetchError.message?.includes("network") || fetchError.message?.includes("ERR_FAILED"));
+            const is403Error = response?.status === 403;
+            if ((isNetworkError || is403Error) && onRefetchNeeded && refetchAttemptedRef.current !== downloadUrlKey) {
+              refetchAttemptedRef.current = downloadUrlKey;
+              imageCache.delete(cacheKey);
+              try {
+                await onRefetchNeeded();
+                return;
+              } catch (refetchError) {
+                console.error("Failed to refetch file:", refetchError);
+              }
+            }
+            throw fetchError;
           }
         } else {
           throw new Error("No download URL available for file");
@@ -589,7 +617,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 +707,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 +719,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 +760,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.7",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",