@messenger-box/platform-mobile 10.0.3-alpha.34 → 10.0.3-alpha.37

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "10.0.3-alpha.34",
+    "version": "10.0.3-alpha.37",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -22,8 +22,8 @@
         "watch-ts": "tsc --watch"
     },
     "dependencies": {
-        "@messenger-box/core": "10.0.3-alpha.34",
-        "@messenger-box/platform-client": "10.0.3-alpha.34",
+        "@messenger-box/core": "10.0.3-alpha.36",
+        "@messenger-box/platform-client": "10.0.3-alpha.37",
         "base-64": "1.0.0",
         "react-native-gifted-chat": "1.0.4"
     },
@@ -43,5 +43,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "33c7bdb4f36c40b6368a5c96fe6312de009188a1"
+    "gitHead": "4a360a1be756050ed8c3c1cd61a037c6109f8866"
 }

package/src/screens/inbox/components/CachedImage/index.tsx

@@ -1,20 +1,25 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
 import { Image, View, Text } from 'react-native';
 // import { Image } from "react-native"
 import * as FileSystem from 'expo-file-system';
 
 import * as CONST from './consts';
 
+// Global download tracking to prevent duplicate downloads
+const downloadTracker = new Map();
+
 // Ensure the cache directory exists
 const ensureCacheDirectory = async () => {
     try {
         const dirInfo = await FileSystem.getInfoAsync(CONST.IMAGE_CACHE_FOLDER);
         if (!dirInfo.exists) {
-            console.log('Creating cache directory:', CONST.IMAGE_CACHE_FOLDER);
+            // console.log('Creating cache directory:', CONST.IMAGE_CACHE_FOLDER);
             await FileSystem.makeDirectoryAsync(CONST.IMAGE_CACHE_FOLDER, { intermediates: true });
         }
+        return true;
     } catch (error) {
-        console.error('Failed to create cache directory:', error);
+        // console.error('Failed to create cache directory:', error);
+        return false;
     }
 };
 
@@ -29,7 +34,7 @@ const validateImageUri = (uri: string): string | null => {
     try {
         new URL(uri);
     } catch (e) {
-        console.log('Invalid URL format:', uri);
+        // console.log('Invalid URL format:', uri);
         return null;
     }
 
@@ -37,175 +42,211 @@ const validateImageUri = (uri: string): string | null => {
     return uri;
 };
 
-const CachedImage = (props: any) => {
-    const { source, cacheKey, placeholderContent } = props;
-    const { uri: originalUri, headers, expiresIn } = source;
-
-    // Validate and sanitize the URI
-    const uri = validateImageUri(originalUri);
-
-    const fileURI = `${CONST.IMAGE_CACHE_FOLDER}${cacheKey}`;
-
-    const [imgUri, setImgUri] = useState<any>(fileURI);
-    const [loadError, setLoadError] = useState<boolean>(false);
-    const [useFallbackUri, setUseFallbackUri] = useState<boolean>(false);
-
-    const componentIsMounted = useRef(true);
-    const requestOption = headers ? { headers } : {};
-
-    const _callback = (downloadProgress: any) => {
-        if (componentIsMounted.current === false) {
-            downloadResumableRef.current?.pauseAsync();
-            FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
-        }
-    };
-
-    const downloadResumableRef = useRef(
-        uri ? FileSystem.createDownloadResumable(uri, fileURI, requestOption, _callback) : null,
-    );
-
-    useEffect(() => {
-        const initCache = async () => {
-            await ensureCacheDirectory();
-            if (uri) {
-                loadImage();
-            } else {
-                console.log('Image URI is invalid, not loading');
-                setLoadError(true);
-            }
-        };
-
-        // console.log('CachedImage loading with URI:', uri);
-        console.log('Cache key:', cacheKey);
-
-        initCache();
-
-        return () => {
-            componentIsMounted.current = false;
-        };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const loadImage = async () => {
-        try {
-            // Use the cached image if it exists
-            const metadata: any = await FileSystem.getInfoAsync(fileURI);
-            const expired = expiresIn && new Date().getTime() / 1000 - metadata?.modificationTime > expiresIn;
-            console.log({ expiresIn, expired });
+const CachedImage = React.memo(
+    (props: any) => {
+        const { source, cacheKey, placeholderContent, style, resizeMode, alt, ...restProps } = props;
+        const { uri: originalUri, headers, expiresIn = 86400 } = source;
+
+        // Validate and sanitize the URI
+        const uri = validateImageUri(originalUri);
+        const fileURI = `${CONST.IMAGE_CACHE_FOLDER}${cacheKey}`;
+
+        const [imgUri, setImgUri] = useState<string | null>(null);
+        const [loadError, setLoadError] = useState<boolean>(false);
+        const [useFallbackUri, setUseFallbackUri] = useState<boolean>(false);
+        const [isLoading, setIsLoading] = useState<boolean>(true);
+
+        const componentIsMounted = useRef(true);
+        const hasAttemptedLoad = useRef(false);
+        const requestOption = headers ? { headers } : {};
+
+        // Create a memoized download callback
+        const downloadCallback = useCallback(
+            (downloadProgress: any) => {
+                if (componentIsMounted.current === false) {
+                    downloadTracker.delete(cacheKey);
+                    downloadResumableRef.current?.pauseAsync();
+                    FileSystem.deleteAsync(fileURI, { idempotent: true });
+                }
+            },
+            [fileURI, cacheKey],
+        );
+
+        // Create a memoized download resumable
+        const downloadResumableRef = useRef(
+            uri ? FileSystem.createDownloadResumable(uri, fileURI, requestOption, downloadCallback) : null,
+        );
+
+        // Memoized load image function to avoid recreating on every render
+        const loadImage = useCallback(async () => {
+            if (!uri || hasAttemptedLoad.current) return;
+
+            hasAttemptedLoad.current = true;
+            setIsLoading(true);
+
+            try {
+                // Check if this image is already being downloaded
+                if (downloadTracker.has(cacheKey)) {
+                    // Wait for the existing download to complete
+                    await downloadTracker.get(cacheKey);
+                    if (componentIsMounted.current) {
+                        setImgUri(fileURI);
+                        setIsLoading(false);
+                    }
+                    return;
+                }
 
-            // console.log({ modificationTime: metadata.modificationTime, currentTime: new Date().getTime() / 1000 });
-            // console.log({ metadata });
+                // Use the cached image if it exists
+                const metadata: any = await FileSystem.getInfoAsync(fileURI);
+                const expired = expiresIn && new Date().getTime() / 1000 - metadata?.modificationTime > expiresIn;
 
-            if (!metadata.exists || metadata?.size === 0 || expired) {
-                if (componentIsMounted.current) {
-                    setImgUri(null);
+                if (!metadata.exists || metadata?.size === 0 || expired) {
+                    if (!componentIsMounted.current) return;
 
-                    if (expired) {
+                    if (expired && metadata.exists) {
                         await FileSystem.deleteAsync(fileURI, { idempotent: true });
                     }
-                    // download to cache
-                    setImgUri(null);
 
-                    // console.log('Downloading image from URI:', uri);
                     if (!uri) {
-                        // console.log('Image URI is undefined or null');
                         setLoadError(true);
+                        setIsLoading(false);
                         return;
                     }
 
                     if (!downloadResumableRef.current) {
-                        console.log('Download resumable is null');
                         setUseFallbackUri(true);
                         setImgUri(uri);
+                        setIsLoading(false);
                         return;
                     }
 
                     try {
-                        const response: any = await downloadResumableRef.current.downloadAsync();
-                        // console.log('Download response:', response);
-
-                        if (componentIsMounted.current && response && response.status === 200) {
-                            setImgUri(`${fileURI}?`); // deep clone to force re-render
-                            // console.log('Image cached successfully, new URI:', `${fileURI}?`);
-                        } else {
-                            console.log('Failed to download image, status:', response?.status);
-                            console.log('Falling back to original URI');
+                        // Record this download in the global tracker
+                        const downloadPromise = downloadResumableRef.current.downloadAsync();
+                        downloadTracker.set(cacheKey, downloadPromise);
+
+                        const response: any = await downloadPromise;
+
+                        // Remove from tracker when done
+                        downloadTracker.delete(cacheKey);
+
+                        if (componentIsMounted.current) {
+                            if (response && response.status === 200) {
+                                setImgUri(fileURI);
+                            } else {
+                                setUseFallbackUri(true);
+                                setImgUri(uri);
+                                FileSystem.deleteAsync(fileURI, { idempotent: true });
+                            }
+                            setIsLoading(false);
+                        }
+                    } catch (downloadError) {
+                        downloadTracker.delete(cacheKey);
+                        if (componentIsMounted.current) {
                             setUseFallbackUri(true);
                             setImgUri(uri);
-                            FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
+                            setIsLoading(false);
                         }
-                    } catch (downloadError) {
-                        console.log('Error downloading image:', downloadError);
-                        console.log('Falling back to original URI');
-                        setUseFallbackUri(true);
-                        setImgUri(uri);
                     }
-                }
-            } else {
-                //console.log('Using cached image at:', fileURI);
-            }
-        } catch (err) {
-            console.log({ err });
-            console.log('Falling back to original URI');
-            setUseFallbackUri(true);
-            setImgUri(uri);
-        }
-    };
-
-    //console.log({ placeholderContent, imgUri, loadError, useFallbackUri });
-
-    // Default placeholder if none is provided
-    const defaultPlaceholder = (
-        <View
-            style={{
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#e1e1e1',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderRadius: 3,
-            }}
-        >
-            <Text>Image not available</Text>
-        </View>
-    );
-
-    if (!imgUri) {
-        return placeholderContent || defaultPlaceholder;
-    }
-
-    return (
-        <Image
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            source={{
-                ...source,
-                uri: useFallbackUri ? uri : imgUri,
-            }}
-            onError={(e) => {
-                console.log('Image loading error:', e.nativeEvent.error);
-                // If we're already using the fallback URI and still getting an error,
-                // then show the placeholder
-                if (useFallbackUri) {
-                    setLoadError(true);
-                    setImgUri(null);
                 } else {
-                    console.log('Falling back to original URI after onError');
+                    // Use cached version
+                    setImgUri(fileURI);
+                    setIsLoading(false);
+                }
+            } catch (err) {
+                if (componentIsMounted.current) {
                     setUseFallbackUri(true);
                     setImgUri(uri);
+                    setIsLoading(false);
                 }
-            }}
-        />
-    );
-};
+            }
+        }, [uri, fileURI, cacheKey, expiresIn]);
+
+        // Setup effect
+        useEffect(() => {
+            const setup = async () => {
+                const directoryExists = await ensureCacheDirectory();
+                if (directoryExists && uri) {
+                    loadImage();
+                } else {
+                    setLoadError(true);
+                    setIsLoading(false);
+                }
+            };
+
+            setup();
+
+            return () => {
+                componentIsMounted.current = false;
+            };
+        }, [uri, loadImage]);
+
+        // Default placeholder
+        const defaultPlaceholder = useMemo(
+            () => (
+                <View
+                    style={[
+                        {
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: '#e1e1e1',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            borderRadius: 3,
+                        },
+                        style,
+                    ]}
+                >
+                    <Text>Image not available</Text>
+                </View>
+            ),
+            [style],
+        );
+
+        // Show placeholder while loading or if there's an error
+        if (isLoading || loadError || !imgUri) {
+            return placeholderContent || defaultPlaceholder;
+        }
+
+        // Actual image component
+        return (
+            <Image
+                {...restProps}
+                style={style}
+                source={{
+                    ...source,
+                    uri: useFallbackUri ? uri : imgUri,
+                }}
+                resizeMode={resizeMode}
+                onError={(e) => {
+                    if (useFallbackUri) {
+                        setLoadError(true);
+                        setImgUri(null);
+                    } else {
+                        setUseFallbackUri(true);
+                        setImgUri(uri);
+                    }
+                }}
+            />
+        );
+    },
+    (prevProps, nextProps) => {
+        // Custom comparison function for memoization
+        return (
+            prevProps.cacheKey === nextProps.cacheKey &&
+            prevProps.source.uri === nextProps.source.uri &&
+            prevProps.style === nextProps.style
+        );
+    },
+);
 
 export const CacheManager = {
     addToCache: async ({ file, key }: any) => {
+        await ensureCacheDirectory();
         await FileSystem.copyAsync({
             from: file,
             to: `${CONST.IMAGE_CACHE_FOLDER}${key}`,
         });
-        // const uri = await FileSystem.getContentUriAsync(`${CONST.IMAGE_CACHE_FOLDER}${key}`)
-        // return uri
         const uri = await CacheManager.getCachedUri({ key });
         return uri;
     },
@@ -216,8 +257,18 @@ export const CacheManager = {
     },
 
     downloadAsync: async ({ uri, key, options }: any) => {
+        await ensureCacheDirectory();
         return await FileSystem.downloadAsync(uri, `${CONST.IMAGE_CACHE_FOLDER}${key}`, options);
     },
+
+    clearCache: async () => {
+        try {
+            await FileSystem.deleteAsync(CONST.IMAGE_CACHE_FOLDER, { idempotent: true });
+            await ensureCacheDirectory();
+        } catch (error) {
+            console.error('Error clearing cache:', error);
+        }
+    },
 };
 
 export default CachedImage;