@messenger-box/platform-mobile 10.0.3-alpha.5 → 10.0.3-alpha.54

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

@@ -1,91 +1,252 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Image } from 'react-native';
+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';
 
-const CachedImage = (props: any) => {
-    const { source, cacheKey, placeholderContent } = props;
-    const { uri, headers, expiresIn } = source;
-    const fileURI = `${CONST.IMAGE_CACHE_FOLDER}${cacheKey}`;
+// Global download tracking to prevent duplicate downloads
+const downloadTracker = new Map();
 
-    const [imgUri, setImgUri] = useState<any>(fileURI);
+// 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 });
+        }
+        return true;
+    } catch (error) {
+        // console.error('Failed to create cache directory:', error);
+        return false;
+    }
+};
 
-    const componentIsMounted = useRef(true);
-    const requestOption = headers ? { headers } : {};
+// Validate and sanitize the image URL
+const validateImageUri = (uri: string): string | null => {
+    if (!uri) return null;
 
-    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
-        }
-    };
+    // Trim whitespace
+    uri = uri.trim();
 
-    const downloadResumableRef = useRef(FileSystem.createDownloadResumable(uri, fileURI, requestOption, _callback));
+    // Check if it's a valid URL format
+    try {
+        new URL(uri);
+    } catch (e) {
+        // console.log('Invalid URL format:', uri);
+        return null;
+    }
 
-    useEffect(() => {
-        loadImage();
-        return () => {
-            componentIsMounted.current = false;
-        };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // Add more validation as needed for your specific case
+    return uri;
+};
 
-    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})
-
-            // 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);
+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],
+        );
 
-                    if (expired) {
+        // 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;
+                }
+
+                // 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) return;
+
+                    if (expired && metadata.exists) {
                         await FileSystem.deleteAsync(fileURI, { idempotent: true });
                     }
-                    // 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
+                    if (!uri) {
+                        setLoadError(true);
+                        setIsLoading(false);
+                        return;
+                    }
+
+                    if (!downloadResumableRef.current) {
+                        setUseFallbackUri(true);
+                        setImgUri(uri);
+                        setIsLoading(false);
+                        return;
                     }
-                    if (response.status !== 200) {
-                        FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
+
+                    try {
+                        // 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);
+                            setIsLoading(false);
+                        }
                     }
+                } else {
+                    // Use cached version
+                    setImgUri(fileURI);
+                    setIsLoading(false);
+                }
+            } catch (err) {
+                if (componentIsMounted.current) {
+                    setUseFallbackUri(true);
+                    setImgUri(uri);
+                    setIsLoading(false);
                 }
             }
-        } catch (err) {
-            // console.log({ err })
+        }, [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;
         }
-    };
-    // console.log({placeholderContent})
-    if (!imgUri) return placeholderContent || null;
-
-    return (
-        <Image
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            source={{
-                ...source,
-                uri: imgUri,
-            }}
-        />
-    );
-};
+
+        // 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;
     },
@@ -96,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;

package/src/screens/inbox/components/DialogItem.tsx

@@ -0,0 +1,306 @@
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import {
+    Text,
+    Pressable,
+    HStack,
+    Box,
+    AvatarGroup,
+    Avatar,
+    AvatarFallbackText,
+    AvatarImage,
+    AvatarBadge,
+} from '@admin-layout/gluestack-ui-mobile';
+import { format, isToday, isYesterday } from 'date-fns';
+import { useFocusEffect } from '@react-navigation/native';
+import { IChannel, IUserAccount, RoomType } from 'common';
+import { startCase } from 'lodash-es';
+import colors from 'tailwindcss/colors';
+
+// Helper function to safely create a Date object
+const safeDate = (dateValue: any): Date | null => {
+    if (!dateValue) return null;
+
+    try {
+        const date = new Date(dateValue);
+        if (isNaN(date.getTime())) {
+            console.warn('Invalid date value detected:', dateValue);
+            return null;
+        }
+        return date;
+    } catch (error) {
+        console.warn('Error creating date from value:', dateValue, error);
+        return null;
+    }
+};
+
+const createdAtText = (value: string): string => {
+    if (!value) return '';
+    const date = safeDate(value);
+    if (!date) return '';
+
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(date, 'MMM dd, yyyy');
+};
+
+export interface IDialogListChannel extends IChannel {
+    users: IUserAccount[];
+}
+
+export interface IDialogItemProps {
+    currentUser?: any;
+    channel?: any;
+    onOpen: (id: any, title: any, postParentId?: any) => void;
+}
+
+interface LastMessageComponentProps {
+    title: string;
+    lastMessage: any;
+    isServiceChannel?: boolean;
+}
+
+// LastMessage component that works for both direct and service channels
+const LastMessageComponent: React.FC<LastMessageComponentProps> = ({
+    title,
+    lastMessage,
+    isServiceChannel = false,
+}) => {
+    const count = 30;
+    const channelTitle = title?.slice(0, count) + (title?.length > count ? '...' : '') || '';
+
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        const hasFileAttachments = lastMessage.files?.data?.length > 0;
+        const isImageMessage =
+            lastMessage.message?.includes('<img') ||
+            lastMessage.message?.includes('[Image]') ||
+            lastMessage.message?.includes('![') ||
+            (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(lastMessage.message || '') &&
+                ((lastMessage.message || '').includes('http') || (lastMessage.message || '').includes('/images/')));
+
+        if (hasFileAttachments) {
+            displayMessage = '📎 File attachment';
+        } else if (isImageMessage) {
+            displayMessage = '[Image]';
+        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
+            displayMessage = lastMessage.message;
+        } else {
+            displayMessage = '(Empty message)';
+        }
+    }
+
+    const displayDate = lastMessage?.createdAt
+        ? createdAtText(lastMessage.createdAt)
+        : lastMessage?.updatedAt
+        ? createdAtText(lastMessage.updatedAt)
+        : '';
+
+    return (
+        <HStack space={'sm'} className="flex-1 justify-between">
+            <Box className="flex-[0.8]">
+                <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
+                    {channelTitle}
+                </Text>
+                <Text color={colors.gray[600]} numberOfLines={1}>
+                    {displayMessage}
+                </Text>
+            </Box>
+
+            <Box className="flex-[0.2]">
+                <Text color={colors.gray[500]}>{displayDate}</Text>
+            </Box>
+        </HStack>
+    );
+};
+
+export const DialogItemComponent: React.FC<IDialogItemProps> = function DialogItem({ currentUser, channel, onOpen }) {
+    const isMountedRef = useRef(true);
+    const [title, setTitle] = useState('');
+    const [subscriptionsTimestamp, setSubscriptionsTimestamp] = useState(Date.now());
+
+    const isServiceChannel = channel?.type === RoomType.Service;
+
+    // Use channel.lastMessage instead of computing it
+    const lastMessage = channel?.lastMessage;
+
+    // Service channel specific calculations
+    const creatorAndMembersId = useMemo(() => {
+        if (!isServiceChannel || !channel?.members) return null;
+        const membersIds: any =
+            channel?.members
+                ?.filter((m: any) => m !== null && m?.user?.id !== currentUser?.id)
+                ?.map((mu: any) => mu?.user?.id) ?? [];
+        const creatorId: any = channel?.creator?.id;
+        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
+        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
+    }, [isServiceChannel, channel, currentUser]);
+
+    const postParentId = useMemo(() => {
+        if (!isServiceChannel || !creatorAndMembersId?.length) return null;
+        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
+            ? null
+            : lastMessage?.parentId
+            ? lastMessage?.parentId
+            : lastMessage?.id ?? 0;
+    }, [isServiceChannel, creatorAndMembersId, lastMessage, currentUser]);
+
+    // Channel members computation for direct channels
+    const channelMembers = useMemo(() => {
+        if (isServiceChannel) return [];
+        return (
+            channel?.members
+                ?.filter((ch: any) => ch?.user?.id !== currentUser?.id && ch?.user?.__typename === 'UserAccount')
+                ?.map((m: any) => m?.user) ?? []
+        );
+    }, [isServiceChannel, currentUser?.id, channel?.members]);
+
+    // Set title when channel members change (for direct channels)
+    useEffect(() => {
+        if (!isServiceChannel && channelMembers.length > 0 && isMountedRef.current) {
+            const titleString =
+                channelMembers
+                    ?.map((u: any) => `${u?.givenName || ''} ${u?.familyName || ''}`.trim())
+                    ?.filter(Boolean)
+                    ?.join(', ') || '';
+            setTitle(titleString);
+        } else if (isServiceChannel && channel?.title) {
+            setTitle(channel.title);
+        }
+    }, [isServiceChannel, channelMembers, channel?.title]);
+
+    // Compute display title
+    const displayTitle = useMemo(() => {
+        const length = 30;
+        const titleToUse = isServiceChannel ? channel?.title || '' : title;
+        return titleToUse.length > length ? titleToUse.substring(0, length - 3) + '...' : titleToUse;
+    }, [isServiceChannel, channel?.title, title]);
+
+    // Set mounted state on mount/unmount
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+
+    // Focus effect handling
+    useFocusEffect(
+        useCallback(() => {
+            if (!channel?.id) return;
+
+            console.log(`DialogItem focused for ${isServiceChannel ? 'service' : 'direct'} channel:`, channel?.id);
+
+            if (isServiceChannel) {
+                setSubscriptionsTimestamp(Date.now());
+            }
+        }, [channel?.id, isServiceChannel]),
+    );
+
+    // Handle press based on channel type
+    const handlePress = useCallback(() => {
+        if (isServiceChannel) {
+            onOpen(channel?.id, displayTitle, postParentId);
+        } else {
+            onOpen(channel?.id, displayTitle);
+        }
+    }, [isServiceChannel, channel?.id, displayTitle, postParentId, onOpen]);
+
+    // Render avatar based on channel type
+    const renderAvatar = () => {
+        if (isServiceChannel) {
+            return (
+                <Avatar
+                    key={'service-channels-key-' + channel?.id}
+                    size={'sm'}
+                    className="bg-transparent top-0 right-0 z-[1]"
+                >
+                    <AvatarFallbackText>{startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
+                    <AvatarImage
+                        alt="user image"
+                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                        source={{
+                            uri: channel?.creator?.picture,
+                        }}
+                    />
+                </Avatar>
+            );
+        }
+
+        return (
+            <AvatarGroup>
+                {channelMembers &&
+                    channelMembers?.length > 0 &&
+                    channelMembers?.slice(0, 1)?.map((ch: any, i: number) => (
+                        <Avatar
+                            key={'dialogs-list-' + i}
+                            size={'sm'}
+                            className={`bg-transparent top-[${i === 1 ? '4' : '0'}] right-[${
+                                i === 1 ? '-2' : '0'
+                            }] z-[${i === 1 ? 5 : 1}]`}
+                        >
+                            <AvatarFallbackText>{startCase(ch?.username?.charAt(0))}</AvatarFallbackText>
+                            {channelMembers?.length > 1 && (
+                                <AvatarBadge
+                                    style={{
+                                        width: '100%',
+                                        height: '100%',
+                                        backgroundColor: '#e5e7eb',
+                                        borderRadius: 5,
+                                    }}
+                                    className="items-center justify-center bg-gray-200 rounded-md"
+                                >
+                                    <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>
+                                        {channelMembers?.length}
+                                    </Text>
+                                </AvatarBadge>
+                            )}
+                            {channelMembers?.length === 1 && (
+                                <>
+                                    <AvatarImage
+                                        alt="user image"
+                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                        source={{
+                                            uri: ch?.picture,
+                                        }}
+                                    />
+                                    <AvatarBadge style={{ width: 10, height: 10 }} />
+                                </>
+                            )}
+                        </Avatar>
+                    ))}
+            </AvatarGroup>
+        );
+    };
+
+    return (
+        <Pressable
+            onPress={handlePress}
+            className="flex-1 border-gray-200 rounded-md dark:border-gray-600 dark:bg-gray-700"
+            style={{
+                borderBottomWidth: 1,
+                borderColor: '#e5e7eb',
+                marginVertical: 0,
+                paddingHorizontal: isServiceChannel ? 2 : 10,
+            }}
+        >
+            <HStack space={'md'} className="flex-1 w-[100%] py-3 items-center">
+                <Box className="flex-[0.1] items-start pl-3">{renderAvatar()}</Box>
+                <Box className="flex-1">
+                    <LastMessageComponent
+                        key={
+                            isServiceChannel
+                                ? `service-channel-${channel?.id}-${subscriptionsTimestamp}`
+                                : `last-msg-${lastMessage?.id || 'none'}-${channelMembers.length}`
+                        }
+                        title={displayTitle}
+                        lastMessage={lastMessage}
+                        isServiceChannel={isServiceChannel}
+                    />
+                </Box>
+            </HStack>
+        </Pressable>
+    );
+};
+
+export const DialogItem = React.memo(DialogItemComponent);

package/src/screens/inbox/components/DialogsHeader.tsx

@@ -15,22 +15,15 @@ export function DialogsHeader({
     title: string;
 }) {
     return (
-        <HStack px={'$4'} py={'$2'} style={style} alignItems="center" justifyContent="space-between">
-            <View flex={1}>{onBack ? <AntDesign onPress={onBack} name="left" size={18} /> : null}</View>
-            <View style={{ flexDirection: 'row', flex: 1, flexGrow: 1 }} flex={1}>
-                <Text
-                    numberOfLines={1}
-                    flexShrink={1}
-                    textAlign="center"
-                    style={{ fontSize: 20 }}
-                    flexGrow={1}
-                    fontWeight="$semibold"
-                >
+        <HStack className="px-4 py-2 items-center justify-between" style={style}>
+            <View style={{ flex: 1 }}>{onBack ? <AntDesign onPress={onBack} name="left" size={18} /> : null}</View>
+            <View style={{ flexDirection: 'row', flex: 1, flexGrow: 1 }}>
+                <Text numberOfLines={1} style={{ fontSize: 20 }} className="shrink font-semibold text-center grow">
                     {title || ' '}
                 </Text>
             </View>
-            <View flex={1} alignItems="flex-end" justifyContent="center">
-                <Text textAlign="right">{extra}</Text>
+            <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
+                <Text className="text-right">{extra}</Text>
             </View>
         </HStack>
     );