@messenger-box/platform-mobile 10.0.3-alpha.16 → 10.0.3-alpha.18

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

@@ -1,31 +1,85 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Image } from 'react-native';
+import { Image, View, Text } from 'react-native';
 // import { Image } from "react-native"
 import * as FileSystem from 'expo-file-system';
 
 import * as CONST from './consts';
 
+// 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);
+            await FileSystem.makeDirectoryAsync(CONST.IMAGE_CACHE_FOLDER, { intermediates: true });
+        }
+    } catch (error) {
+        console.error('Failed to create cache directory:', error);
+    }
+};
+
+// Validate and sanitize the image URL
+const validateImageUri = (uri: string): string | null => {
+    if (!uri) return null;
+
+    // Trim whitespace
+    uri = uri.trim();
+
+    // Check if it's a valid URL format
+    try {
+        new URL(uri);
+    } catch (e) {
+        console.log('Invalid URL format:', uri);
+        return null;
+    }
+
+    // Add more validation as needed for your specific case
+    return uri;
+};
+
 const CachedImage = (props: any) => {
     const { source, cacheKey, placeholderContent } = props;
-    const { uri, headers, expiresIn } = source;
+    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();
+            downloadResumableRef.current?.pauseAsync();
             FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
         }
     };
 
-    const downloadResumableRef = useRef(FileSystem.createDownloadResumable(uri, fileURI, requestOption, _callback));
+    const downloadResumableRef = useRef(
+        uri ? FileSystem.createDownloadResumable(uri, fileURI, requestOption, _callback) : null,
+    );
 
     useEffect(() => {
-        loadImage();
+        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;
         };
@@ -36,10 +90,11 @@ const CachedImage = (props: any) => {
             // 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})
+            console.log({ expiresIn, expired });
+
+            console.log({ modificationTime: metadata.modificationTime, currentTime: new Date().getTime() / 1000 });
+            console.log({ metadata });
 
-            // console.log({modificationTime: metadata.modificationTime, currentTime: new Date().getTime() / 1000})
-            // console.log({metadata})
             if (!metadata.exists || metadata?.size === 0 || expired) {
                 if (componentIsMounted.current) {
                     setImgUri(null);
@@ -50,21 +105,73 @@ const CachedImage = (props: any) => {
                     // download to cache
                     setImgUri(null);
 
-                    const response: any = await downloadResumableRef.current.downloadAsync();
-                    if (componentIsMounted.current && response.status === 200) {
-                        setImgUri(`${fileURI}?`); // deep clone to force re-render
+                    console.log('Downloading image from URI:', uri);
+                    if (!uri) {
+                        console.log('Image URI is undefined or null');
+                        setLoadError(true);
+                        return;
                     }
-                    if (response.status !== 200) {
-                        FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
+
+                    if (!downloadResumableRef.current) {
+                        console.log('Download resumable is null');
+                        setUseFallbackUri(true);
+                        setImgUri(uri);
+                        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');
+                            setUseFallbackUri(true);
+                            setImgUri(uri);
+                            FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
+                        }
+                    } 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({ err });
+            console.log('Falling back to original URI');
+            setUseFallbackUri(true);
+            setImgUri(uri);
         }
     };
-    // console.log({placeholderContent})
-    if (!imgUri) return placeholderContent || null;
+
+    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
@@ -72,7 +179,20 @@ const CachedImage = (props: any) => {
             {...props}
             source={{
                 ...source,
-                uri: imgUri,
+                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');
+                    setUseFallbackUri(true);
+                    setImgUri(uri);
+                }
             }}
         />
     );

package/src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx

@@ -63,33 +63,59 @@ export default class Bubble extends React.Component<any> {
             }
             const { image, _id } = messageImageProps?.currentMessage;
 
+            // Add validation for image URL
+            if (!image || typeof image !== 'string') {
+                console.log('Invalid image URL:', image);
+                return null;
+            }
+
+            // Log the image URL for debugging
+            console.log('Rendering message image:', image);
+
             return (
                 <TouchableHighlight
-                    // underlayColor={'#c0c0c0'}
                     underlayColor={'transparent'}
-                    style={{ width: '100%' }}
+                    style={{ width: '100%', marginVertical: 5 }}
                     onPress={() => this.props.setImageViewer(messageImageProps?.currentMessage, true)}
                 >
                     <View
                         style={{
-                            width: windowWidth - (windowWidth - 150),
-                            height: windowHeight - (windowHeight - 100),
+                            width: windowWidth * 0.6, // 60% of screen width
+                            height: windowWidth * 0.4, // Maintain aspect ratio
+                            maxHeight: 200,
+                            borderRadius: 8,
+                            overflow: 'hidden',
+                            borderWidth: 1,
+                            borderColor: '#e0e0e0',
+                            backgroundColor: '#f7f7f7',
                         }}
                     >
-                        {/* <MessageImage
-                            {...messageImageProps}
-                            imageStyle={[styles.slackImage, messageImageProps.imageStyle]}
-                        /> */}
                         <CachedImage
                             style={[styles.slackImage, { width: '100%', height: '100%' }]}
                             cacheKey={`${_id}-slack-bubble-imageKey`}
                             source={{
                                 uri: image,
-                                //headers: `Authorization: Bearer ${token}`,
                                 expiresIn: 86400,
                             }}
                             resizeMode={'cover'}
                             alt={'image'}
+                            placeholderContent={
+                                <View
+                                    style={[
+                                        styles.slackImage,
+                                        {
+                                            width: '100%',
+                                            height: '100%',
+                                            backgroundColor: '#e1e1e1',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            borderRadius: 8,
+                                        },
+                                    ]}
+                                >
+                                    <Text>Loading...</Text>
+                                </View>
+                            }
                         />
                     </View>
                 </TouchableHighlight>