@messenger-box/platform-mobile 10.0.3-alpha.23 → 10.0.3-alpha.232

package/src/navigation/InboxNavigation.tsx

@@ -1,102 +0,0 @@
-import * as React from 'react';
-import { Feature } from '@common-stack/client-react';
-import { DialogMessages } from '../screens/inbox/DialogMessages';
-import { DialogThreads } from '../screens/inbox/DialogThreads';
-import { DialogThreadMessages } from '../screens/inbox/DialogThreadMessages';
-import { Button, Icon } from '@admin-layout/gluestack-ui-mobile';
-import { MaterialIcons } from '@expo/vector-icons';
-
-const inboxConfig = {
-    ['//message']: {
-        exact: true,
-        name: 'Message',
-        props: {
-            initialParams: { channelId: null, role: null, isShowThreadMessage: true },
-            component: (props: any) => (
-                <DialogMessages
-                    {...props}
-                    channelId={props?.route?.params?.channelId}
-                    role={props?.route?.params?.role}
-                    isShowThreadMessage={props?.route?.params?.isShowThreadMessage}
-                />
-            ),
-            options: ({ navigation }: any) => {
-                return {
-                    headerShown: true,
-                    title: 'Inbox',
-                    headerBackTitleVisible: false,
-                    gestureEnabled: false,
-                    swipeEnabled: false,
-                    headerLeft: (props: any) => (
-                        <Button className="bg-transparent" onPress={() => navigation.goBack()}>
-                            <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
-                        </Button>
-                    ),
-                };
-            },
-        },
-    },
-    ['//thread']: {
-        exact: true,
-        name: 'Thread',
-        props: {
-            initialParams: { channelId: null, postParentId: null, role: null },
-            component: (props: any) => (
-                <DialogThreads
-                    {...props}
-                    channelId={props?.route?.params?.channelId}
-                    postParentId={props?.route?.params?.postParentId}
-                    role={props?.route?.params?.role}
-                />
-            ),
-            options: ({ navigation }: any) => {
-                return {
-                    headerShown: true,
-                    title: 'Thread',
-                    headerBackTitleVisible: false,
-                    gestureEnabled: false,
-                    swipeEnabled: false,
-                    headerLeft: (props: any) => (
-                        <Button className="bg-transparent" onPress={() => navigation.goBack()}>
-                            <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
-                        </Button>
-                    ),
-                };
-            },
-        },
-    },
-    ['//threadmessage']: {
-        exact: true,
-        name: 'ThreadMessage',
-        props: {
-            initialParams: { channelId: null, postParentId: null, isPostParentIdThread: null, role: null },
-            component: (props: any) => (
-                <DialogThreadMessages
-                    {...props}
-                    channelId={props?.route?.params?.channelId}
-                    postParentId={props?.route?.params?.postParentId}
-                    isPostParentIdThread={props?.route?.params?.isPostParentIdThread}
-                    role={props?.route?.params?.role}
-                />
-            ),
-            options: ({ navigation }: any) => {
-                return {
-                    headerShown: true,
-                    title: 'Inbox',
-                    headerBackTitleVisible: false,
-                    gestureEnabled: false,
-                    swipeEnabled: false,
-                    headerLeft: (props: any) => (
-                        <Button className="bg-transparent" onPress={() => navigation.goBack()}>
-                            <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
-                        </Button>
-                    ),
-                };
-            },
-        },
-    },
-};
-
-export const inboxFeature = new Feature({
-    routeConfig: inboxConfig as any,
-});

package/src/navigation/index.ts

@@ -1 +0,0 @@
-export * from './InboxNavigation';

package/src/screens/inbox/DialogMessages.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { Box } from '@admin-layout/gluestack-ui-mobile';
-import { ConversationView } from './containers/ConversationView';
-import { navigationRef } from '@common-stack/client-react';
-
-export function DialogMessages({ channelId, role, isShowThreadMessage = true, ...rest }) {
-    const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
-    return (
-        // <Box bg={'white'} flex={1} pt={5}>
-        <Box className="bg-white flex-1">
-            <ConversationView
-                {...rest}
-                channelId={currentRoute?.params?.channelId ?? channelId}
-                role={role}
-                isShowThreadMessage={isShowThreadMessage}
-            />
-        </Box>
-    );
-}
-
-export default DialogMessages;

package/src/screens/inbox/DialogThreadMessages.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';
-import { ThreadConversationView } from './containers/ThreadConversationView';
-import { ThreadsView } from './containers/ThreadsView';
-import { useViewChannelDetailQuery, useSendThreadMessageMutation } from 'common/graphql';
-import { useFocusEffect } from '@react-navigation/native';
-// import { useSelector } from 'react-redux';
-import colors from 'tailwindcss/colors';
-
-export function DialogThreadMessages({ channelId, postParentId, isPostParentIdThread, role }) {
-    const {
-        data,
-        loading: channelLoading,
-        refetch,
-    } = useViewChannelDetailQuery({
-        variables: {
-            id: channelId?.toString(),
-        },
-    });
-
-    const [sendThreadMessage] = useSendThreadMessageMutation();
-    const [loading, setLoading] = React.useState<boolean>(true);
-    const [channel, setChannel] = React.useState<any>(null);
-    const [parentId, setParentId] = React.useState<any>(postParentId);
-
-    const refetchChannelDetail = React.useCallback(
-        (id: string) => {
-            return refetch({ id: id?.toString() });
-        },
-        [channelId],
-    );
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            if (channelId) refetch({ id: channelId?.toString() });
-            return () => {};
-        }, [channelId]),
-    );
-
-    React.useEffect(() => {
-        setParentId(postParentId);
-    }, [postParentId]);
-
-    React.useEffect(() => {
-        if (data?.viewChannelDetail) {
-            setChannel(data?.viewChannelDetail);
-            setLoading(false);
-        }
-    }, [data]);
-
-    // React.useEffect(() => {
-    //     async function sendInitialMessage(channel: any) {
-    //         const content = `Welcome to ${channel?.title}`;
-    //         const createdBy = channel?.creator?.id;
-    //         await sendThreadMessage({
-    //             variables: {
-    //                 channelId,
-    //                 threadMessageInput: {
-    //                     content,
-    //                     role,
-    //                 },
-    //                 responderId: createdBy,
-    //             },
-    //             update: (cache, { data, errors }: any) => {
-    //                 if (!data) {
-    //                     return;
-    //                 }
-    //                 setParentId(data?.sendThreadMessage?.lastMessage?.id);
-    //             },
-    //         });
-    //     }
-    //     if ((!parentId || parentId == 0) && channel) {
-    //         sendInitialMessage(channel);
-    //     }
-
-    //     if (parentId) setLoading(false);
-    // }, [parentId, channel]);
-
-    return (
-        <Box className="bg-white flex-1">
-            {/* {loading && !parentId ? ( */}
-            {loading ? (
-                <Spinner color={colors.blue[500]} />
-            ) : (
-                <ThreadConversationView
-                    channelId={channelId}
-                    postParentId={parentId}
-                    isPostParentIdThread={isPostParentIdThread}
-                    role={role}
-                />
-            )}
-        </Box>
-    );
-}
-
-export default DialogThreadMessages;

package/src/screens/inbox/DialogThreads.tsx

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';
-import { ThreadConversationView } from './containers/ThreadConversationView';
-import { ThreadsView } from './containers/ThreadsView';
-import { useViewChannelDetailQuery, useThreadMessagesQuery } from 'common/graphql';
-import { useFocusEffect } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
-import { config } from './config';
-import colors from 'tailwindcss/colors';
-import { useSafeDialogThreadsMachine } from './hooks/useSafeDialogThreadsMachine';
-import { Actions, BaseState } from './workflow/dialog-threads-xstate';
-const { MESSAGES_PER_PAGE } = config;
-
-export function DialogThreads({ channelId, postParentId, role }) {
-    // Use the XState machine for state management
-    const [state, send] = useSafeDialogThreadsMachine();
-    const { context, value } = state;
-    const { channelsDetail, loading, error } = context;
-
-    // Fetch channel details
-    const {
-        data: channelData,
-        loading: channelLoading,
-        refetch: channelRefetch,
-    } = useViewChannelDetailQuery({
-        variables: {
-            id: channelId?.toString(),
-        },
-    });
-
-    // Fetch thread messages
-    const {
-        data: threadsData,
-        loading: threadLoading,
-        error: threadsError,
-        refetch: threadsRefetch,
-        subscribeToMore: threadsSubscribeToMore,
-    } = useThreadMessagesQuery({
-        variables: {
-            channelId: channelId?.toString(),
-            role: role?.toString(),
-            limit: MESSAGES_PER_PAGE,
-            repliesLimit2: 5,
-        },
-    });
-
-    // Initialize the machine with props
-    React.useEffect(() => {
-        send({
-            type: Actions.INITIALIZE,
-            data: { channelId, postParentId, role },
-        });
-    }, [channelId, postParentId, role]);
-
-    // Update channel detail in state when data changes
-    React.useEffect(() => {
-        if (channelData?.viewChannelDetail) {
-            send({
-                type: Actions.SET_CHANNEL_DETAIL,
-                data: { channelsDetail: channelData.viewChannelDetail },
-            });
-        }
-    }, [channelData]);
-
-    // Update thread data in state when data changes
-    React.useEffect(() => {
-        if (threadsData) {
-            send({
-                type: Actions.SET_THREADS,
-                data: { threadData: threadsData?.threadMessages?.data || [] },
-            });
-        }
-    }, [threadsData]);
-
-    // Handle errors
-    React.useEffect(() => {
-        if (threadsError) {
-            send({
-                type: Actions.ERROR,
-                data: { error: threadsError },
-            });
-        }
-    }, [threadsError]);
-
-    const refetchChannelDetail = React.useCallback(
-        (id: string) => {
-            return channelRefetch({ id: id?.toString() });
-        },
-        [channelId],
-    );
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            if (channelId) refetchChannelDetail(channelId);
-            return () => {};
-        }, []),
-    );
-
-    return (
-        <>
-            {state.matches(BaseState.LoadingChannel) || channelLoading ? (
-                <Spinner color={colors.blue[500]} />
-            ) : (
-                <>
-                    <Box className="flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500">
-                        <ThreadsView
-                            data={threadsData}
-                            loading={threadLoading || state.matches(BaseState.LoadingThreads)}
-                            refetch={threadsRefetch}
-                            subscribeToMore={threadsSubscribeToMore}
-                            error={error || threadsError}
-                            channelId={channelId}
-                            role={role}
-                            channelsDetail={channelsDetail}
-                            refetchChannelDetail={refetchChannelDetail}
-                        />
-                    </Box>
-                </>
-            )}
-        </>
-    );
-}
-
-export default DialogThreads;

package/src/screens/inbox/Inbox.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { Box, Text } from '@admin-layout/gluestack-ui-mobile';
-
-import { Dialogs } from './containers/Dialogs';
-// import { SupportServiceDialogs } from './containers/SupportServiceDialogs';
-
-export const Inbox = (props: any) => {
-    const { channelFilters, channelRole, supportServices } = props;
-    return (
-        <Box className="flex-1 bg-white">
-            {/* {supportServices && (
-                <SupportServiceDialogs channelFilters={channelFilters} channelRole={channelRole} {...props} />
-            )} */}
-            <Dialogs channelFilters={channelFilters} channelRole={channelRole} {...props} />
-        </Box>
-    );
-};

package/src/screens/inbox/components/CachedImage/consts.ts

@@ -1,6 +0,0 @@
-import * as FileSystem from 'expo-file-system';
-
-// Make sure cache directory path ends with a slash
-export const IMAGE_CACHE_FOLDER = `${FileSystem.cacheDirectory}/image-cache/`;
-// export const IMAGE_CACHE_FOLDER = `${FileSystem.documentDirectory}images/`
-export default IMAGE_CACHE_FOLDER;

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>
-    );
-}