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

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

@@ -1,223 +0,0 @@
-import React, { useEffect, useState, useRef } 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';
-
-// 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: 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 });
-
-            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);
-
-                    if (expired) {
-                        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);
-                        return;
-                    }
-
-                    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('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');
-                    setUseFallbackUri(true);
-                    setImgUri(uri);
-                }
-            }}
-        />
-    );
-};
-
-export const CacheManager = {
-    addToCache: async ({ file, key }: any) => {
-        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;
-    },
-
-    getCachedUri: async ({ key }: any) => {
-        const uri = await FileSystem.getContentUriAsync(`${CONST.IMAGE_CACHE_FOLDER}${key}`);
-        return uri;
-    },
-
-    downloadAsync: async ({ uri, key, options }: any) => {
-        return await FileSystem.downloadAsync(uri, `${CONST.IMAGE_CACHE_FOLDER}${key}`, options);
-    },
-};
-
-export default CachedImage;

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

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { HStack, Text, View } from '@admin-layout/gluestack-ui-mobile';
-import { AntDesign } from '@expo/vector-icons';
-import { StyleProp, ViewStyle } from 'react-native';
-
-export function DialogsHeader({
-    onBack,
-    extra,
-    style,
-    title,
-}: {
-    onBack?: () => void;
-    extra?: any;
-    style?: StyleProp<ViewStyle>;
-    title: string;
-}) {
-    return (
-        <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 style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
-                <Text className="text-right">{extra}</Text>
-            </View>
-        </HStack>
-    );
-}

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

@@ -1,302 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-    Text,
-    Image,
-    Pressable,
-    HStack,
-    Box,
-    AvatarGroup,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    AvatarBadge,
-    View,
-} from '@admin-layout/gluestack-ui-mobile';
-import { format, isToday, isYesterday } from 'date-fns';
-import { useFocusEffect } from '@react-navigation/native';
-import { IChannel, SortEnum, IUserAccount } from 'common';
-import {
-    useMessagesQuery,
-    useOnChatMessageAddedSubscription,
-    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useUserAccountQuery,
-} from 'common/graphql';
-import { startCase } from 'lodash-es';
-import colors from 'tailwindcss/colors';
-
-const createdAtText = (value: string) => {
-    if (!value) return '';
-    let date = new Date(value);
-    if (isToday(date)) return 'Today';
-    if (isYesterday(date)) return 'Yesterday';
-    return format(new Date(value), 'MMM dd, yyyy');
-};
-
-export interface IDialogListChannel extends IChannel {
-    users: IUserAccount[];
-}
-
-export interface IDialogListItemProps {
-    currentUser?: any;
-    users?: any;
-    selectedChannelId?: any;
-    channel?: any;
-    onOpen: (id: any, title: any) => void;
-}
-
-/**
- * TODO:
- * - Get Reservation info: reservation date, status
- * - Add ability to get property information: name, logo
- */
-export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
-    currentUser,
-    // users,
-    selectedChannelId,
-    channel,
-    onOpen,
-}) {
-    const parentId: any = null;
-    const [messages, setMessages] = useState<any>([]);
-    const {
-        data: messagesQuery,
-        loading: messageLoading,
-        refetch: refetchMessages,
-        subscribeToMore,
-    } = useMessagesQuery({
-        variables: {
-            channelId: channel?.id?.toString(),
-            parentId: parentId,
-            limit: 10,
-            // sort: {
-            //     key: 'updatedAt',
-            //     value: SortEnum.Desc,
-            // },
-            //limit: 25,
-        },
-        fetchPolicy: 'cache-and-network',
-        refetchWritePolicy: 'merge',
-    });
-
-    const {
-        data: newMessage,
-        loading: newMsgLoading,
-        error: newMsgError,
-    }: any = useOnChatMessageAddedSubscription({
-        variables: {
-            channelId: channel?.id?.toString(),
-        },
-    });
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            refetchMessages({
-                channelId: channel?.id?.toString(),
-                parentId: parentId,
-                limit: 10,
-                // sort: {
-                //     key: 'updatedAt',
-                //     value: SortEnum.Desc,
-                // },
-                //limit: 25
-            });
-
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, []),
-    );
-
-    React.useEffect(() => {
-        if (messagesQuery) {
-            if (messagesQuery?.messages?.data?.length) {
-                const msg = messagesQuery?.messages?.data;
-                setMessages((pre: any[]) => [...pre, ...msg]);
-            }
-        }
-    }, [messagesQuery]);
-
-    const lastMessage = useMemo(() => {
-        if (!messages?.length) {
-            return null;
-        }
-        // const { data } = messagesQuery.messages;
-        const data = messages;
-        const filteredData: any = data?.filter((p: any) => p?.message !== '');
-        // return filteredData[0];
-        let filteredLastMessage =
-            filteredData && filteredData?.length
-                ? filteredData?.reduce((a, b) => {
-                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
-                  }, []) ?? null
-                : null;
-        return filteredLastMessage;
-        //return data[data.length - 1];
-    }, [messages]);
-
-    const channelMembers = useMemo(
-        () =>
-            channel?.members
-                ?.filter((ch: any) => ch?.user?.id != currentUser?.id && ch?.user?.__typename == 'UserAccount')
-                ?.map((m: any) => m?.user) ?? null,
-        [currentUser, channel],
-    );
-
-    const title = useMemo(() => {
-        const titleString =
-            channelMembers
-                ?.map((u: any) => u?.givenName + ' ' + (u?.familyName ?? ''))
-                ?.filter((mu: any) => mu)
-                ?.join(', ') ?? '';
-
-        const length = 30;
-        return titleString.length > length ? titleString.substring(0, length - 3) + '...' : titleString;
-    }, [channelMembers]);
-
-    return (
-        <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, title)}
-            className="flex-1 border-gray-200 rounded-md  dark:border-gray-600 dark:bg-gray-700"
-            style={{ borderBottomWidth: 1, borderColor: '#e5e7eb', marginVertical: 0, paddingHorizontal: 10 }}
-        >
-            <HStack space={'md'} className="flex-1 w-[100%]  py-3  items-center">
-                <Box className="flex-[0.1] items-start pl-3">
-                    <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>
-                </Box>
-                <Box className="flex-1 bg-gray-400">
-                    {/* <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
-                        <Box flex={0.8}>
-                            <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
-                                {title}
-                            </Text>
-                            <Text color="gray.600" noOfLines={1}>
-                                {lastMessage?.message ?? ''}
-                            </Text>
-                        </Box>
-
-                        <Box flex={0.2}>
-                            <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-                        </Box>
-                    </HStack> */}
-                    <LastMessageComponent
-                        title={title}
-                        lastMessage={lastMessage}
-                        channelId={channel?.id}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: CHAT_MESSAGE_ADDED,
-                                variables: {
-                                    channelId: channel.id?.toString(),
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-                                    const newMessage: any = subscriptionData?.data?.chatMessageAdded;
-                                    const existingMessages: any = prev?.messages;
-                                    const previousData = existingMessages?.data
-                                        ? [...existingMessages.data, newMessage]
-                                        : [];
-                                    const totalMsgCount = existingMessages?.totalCount + 1;
-                                    const merged = {
-                                        ...prev,
-                                        messages: {
-                                            ...existingMessages,
-                                            data: previousData,
-                                            totalCount: totalMsgCount,
-                                        },
-                                    };
-                                    return merged;
-                                },
-                            })
-                        }
-                    />
-                    {/* <Text
-                        flex={1}
-                        color="gray.600"
-                        p={0}
-                        m={0}
-                        w={'100%'}
-                        justifyContent={''}
-                        fontSize="lg"
-                        fontWeight="semibold"
-                    >
-                        {title}
-                    </Text> */}
-                    {/* <Text flex={0.1} color="gray.600">
-                        {lastMessage?.message ?? ''}
-                    </Text> */}
-                </Box>
-                {/* <Text flex={0.2} color="gray.500">
-                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
-                </Text> */}
-            </HStack>
-        </Pressable>
-    );
-};
-
-const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId }) => {
-    React.useEffect(() => subscribeToNewMessages(), [channelId]);
-    const count = 30;
-    const channelTitle = title.slice(0, count) + (title.length > count ? '...' : '');
-    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}>
-                    {lastMessage?.message ?? ''}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-};
-
-export const DialogsListItem = React.memo(DialogsListItemComponent);