@messenger-box/platform-mobile 0.0.1-alpha.338 → 0.0.1-alpha.340

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

@@ -0,0 +1,103 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Image } from 'native-base';
+// 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}`;
+
+    const [imgUri, setImgUri] = useState<any>(fileURI);
+
+    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(FileSystem.createDownloadResumable(uri, fileURI, requestOption, _callback));
+
+    useEffect(() => {
+        loadImage();
+        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);
+
+                    const response: any = await downloadResumableRef.current.downloadAsync();
+                    if (componentIsMounted.current && response.status === 200) {
+                        setImgUri(`${fileURI}?`); // deep clone to force re-render
+                    }
+                    if (response.status !== 200) {
+                        FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
+                    }
+                }
+            }
+        } catch (err) {
+            // console.log({ err })
+        }
+    };
+    // console.log({placeholderContent})
+    if (!imgUri) return placeholderContent || null;
+
+    return (
+        <Image
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            source={{
+                ...source,
+                uri: imgUri,
+            }}
+        />
+    );
+};
+
+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/SlackMessageContainer/SlackBubble.tsx

@@ -1,10 +1,12 @@
 /* eslint-disable no-underscore-dangle, no-use-before-define */
 import React from 'react';
-import { Text, StyleSheet, TouchableOpacity, View, Platform } from 'react-native';
+import { Text, StyleSheet, TouchableOpacity, View, Platform, Dimensions } from 'react-native';
 
 import { MessageText, MessageImage, Time, utils } from 'react-native-gifted-chat';
-
+import CachedImage from '../CachedImage';
 const { isSameUser, isSameDay } = utils;
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
 
 export default class Bubble extends React.Component<any> {
     static defaultProps: {
@@ -22,8 +24,8 @@ export default class Bubble extends React.Component<any> {
         tickStyle: {};
         containerToNextStyle: {};
         containerToPreviousStyle: {};
-        isShowImageViewer:false,
-        setImageViewer:(obj:any,v:boolean) => void,
+        isShowImageViewer: false;
+        setImageViewer: (obj: any, v: boolean) => void;
     };
     static propTypes: any;
     constructor(props: any) {
@@ -59,8 +61,33 @@ export default class Bubble extends React.Component<any> {
             if (this.props.renderMessageImage) {
                 return this.props.renderMessageImage(messageImageProps);
             }
+            const { image, _id } = messageImageProps?.currentMessage;
+
             return (
-                <TouchableOpacity onPress={()=>this.props.setImageViewer(messageImageProps?.currentMessage,true)}><Text><MessageImage {...messageImageProps} imageStyle={[styles.slackImage, messageImageProps.imageStyle]} /></Text></TouchableOpacity>
+                <TouchableOpacity onPress={() => this.props.setImageViewer(messageImageProps?.currentMessage, true)}>
+                    <View
+                        style={{
+                            width: windowWidth - (windowWidth - 150),
+                            height: windowHeight - (windowHeight - 100),
+                        }}
+                    >
+                        {/* <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'}
+                        />
+                    </View>
+                </TouchableOpacity>
             );
         }
         return null;
@@ -243,6 +270,6 @@ Bubble.defaultProps = {
     tickStyle: {},
     containerToNextStyle: {},
     containerToPreviousStyle: {},
-    isShowImageViewer:false,
-    setImageViewer:(obj:any,v:boolean) => null,
+    isShowImageViewer: false,
+    setImageViewer: (obj: any, v: boolean) => null,
 };

package/src/screens/inbox/containers/ConversationView.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Button, HStack, Icon, Image, Spinner, Text, useColorModeValue, ScrollView } from 'native-base';
-import { Platform } from 'react-native';
+import { Platform, TouchableOpacity } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { orderBy, uniqBy } from 'lodash';
@@ -20,7 +20,7 @@ import { IFileInfo } from '@messenger-box/core';
 import { config } from '../config';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { SlackMessage, ImageViewerModal } from '../components/SlackMessageContainer';
-
+import CachedImage from '../components/CachedImage';
 const {
     MESSAGES_PER_PAGE,
     CALL_TO_ACTION_BOX_BGCOLOR,
@@ -138,7 +138,8 @@ const ConversationViewComponent = ({ channelId }: any) => {
                                 ?.map((et: any) => et?.token) ?? [],
                     )
                     ?.flat(1)
-                    ?.filter((t: any) => t) ?? [];
+                    ?.filter((t: any) => t)
+                    ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
 
             if (tokens?.length > 0) setExpoTokens(tokens);
         }
@@ -603,8 +604,21 @@ const ConversationViewComponent = ({ channelId }: any) => {
 
     const modalContent = React.useMemo(() => {
         if (!imageObject) return <></>;
-        const { image } = imageObject;
-        return <Image resizeMode={'cover'} alt={'image'} source={{ uri: image }} size={'full'} />;
+        const { image, _id } = imageObject;
+        return (
+            <CachedImage
+                style={{ width: '100%', height: '100%' }}
+                resizeMode={'cover'}
+                // cacheKey={`${_id}-conversation-modal-image-key`}
+                cacheKey={`${_id}-slack-bubble-imageKey`}
+                source={{
+                    uri: image,
+                    //headers: `Authorization: Bearer ${token}`,
+                    expiresIn: 86400,
+                }}
+                alt={'image'}
+            />
+        );
     }, [imageObject]);
 
     const renderMessage = (props: any) => {

package/src/screens/inbox/containers/Dialogs.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
-import { FlatList, Box, Heading, Input, Text, Icon, Center } from 'native-base';
+import { FlatList, Box, Heading, Input, Text, Icon, Center, Spinner } from 'native-base';
 import { Ionicons } from '@expo/vector-icons';
 import { useSelector, useDispatch } from 'react-redux';
 import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
@@ -15,14 +15,15 @@ export interface InboxProps {
     channelRole?: string;
 }
 
- const DialogsComponent = (props: InboxProps) => {
+const DialogsComponent = (props: InboxProps) => {
     const { channelFilters, channelRole } = props;
     const { params } = useRoute<any>();
     const auth = useSelector(userSelector);
     const dispatch = useDispatch();
     const navigation = useNavigation<any>();
     const isFocused = useIsFocused();
-    const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
+    const [refreshing, setRefresh] = useState<boolean>(false);
+    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
 
     const {
         data: userChannels,
@@ -38,6 +39,7 @@ export interface InboxProps {
     useFocusEffect(
         React.useCallback(() => {
             // Do something when the screen is focused
+            setRefresh(false);
             getChannelsRefetch({ role: channelRole, criteria: channelFilters });
 
             return () => {
@@ -47,38 +49,55 @@ export interface InboxProps {
         }, [channelFilters]),
     );
 
-    useEffect(() => {
-        setTimeout(() => {
-            dispatch({
-                type: CHANGE_SETTINGS_ACTION,
-                payload: {
-                    footerRender: false,
-                },
-            } as any);
-        }, 0);
-        return () => {
-            dispatch({
-                type: CHANGE_SETTINGS_ACTION,
-                payload: {
-                    footerRender: true,
-                },
-            } as any);
-        };
-    }, []);
+    React.useEffect(() => {
+        if (refreshing) getChannelsRefetch({ role: channelRole, criteria: channelFilters });
+    }, [refreshing]);
 
-    useEffect(() => {
-        if (userChannels?.channelsByUser) {
-            //Direct channel
-            let userDirectChannels: any =
-                userChannels?.channelsByUser
-                    ?.filter((i: any) => i.type == 'DIRECT')
-                    ?.filter((c: any) =>
-                        c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-                    ) ?? [];
+    const channels = React.useMemo(() => {
+        if (!userChannels?.channelsByUser?.length) return null;
+        setRefresh(false);
+        let uChannels: any =
+            userChannels?.channelsByUser?.filter((c: any) =>
+                c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
+            ) ?? [];
+        return uChannels || [];
+    }, [userChannels]);
 
-            if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
-        }
-    }, [userChannels?.channelsByUser]);
+    // useEffect(() => {
+    //     setTimeout(() => {
+    //         dispatch({
+    //             type: CHANGE_SETTINGS_ACTION,
+    //             payload: {
+    //                 footerRender: false,
+    //             },
+    //         } as any);
+    //     }, 0);
+    //     return () => {
+    //         dispatch({
+    //             type: CHANGE_SETTINGS_ACTION,
+    //             payload: {
+    //                 footerRender: true,
+    //             },
+    //         } as any);
+    //     };
+    // }, []);
+
+    // useEffect(() => {
+    //     if (userChannels?.channelsByUser) {
+    //         if (userChannels?.channelsByUser?.length == 0) {
+    //             setUserDirectChannel([]);
+    //         }
+    //         //Direct channel
+    //         let userDirectChannels: any =
+    //             userChannels?.channelsByUser
+    //                 ?.filter((i: any) => i.type == 'DIRECT')
+    //                 ?.filter((c: any) =>
+    //                     c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
+    //                 ) ?? [];
+
+    //         if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
+    //     }
+    // }, [userChannels?.channelsByUser]);
 
     const handleSelectChannel = useCallback((id: any, title: any) => {
         if (params?.channelId) {
@@ -99,9 +118,9 @@ export interface InboxProps {
     return (
         <Box p={2}>
             <FlatList
-                data={userDirectChannel?.length > 0 ? userDirectChannel : []}
-                onRefresh={getChannelsRefetch}
-                refreshing={userChannelsLoading}
+                data={channels && channels?.length > 0 ? channels : []}
+                onRefresh={() => setRefresh(true)}
+                refreshing={refreshing}
                 contentContainerStyle={{ minHeight: '100%' }}
                 ItemSeparatorComponent={() => <Box height="0.5" backgroundColor="gray.200" />}
                 renderItem={({ item: channel }) => (
@@ -113,21 +132,27 @@ export interface InboxProps {
                     />
                 )}
                 ListEmptyComponent={() => (
-                    <Box p={5}>
-                        <Heading>Chat</Heading>
-                        <Input
-                            height={50}
-                            mt={3}
-                            placeholder="Search"
-                            borderRadius={50}
-                            borderColor={'gray.200'}
-                            borderWidth={2}
-                        />
-                        <Center mt={6}>
-                            <Icon as={Ionicons} name="chatbubbles" size={'xl'} />
-                            <Text>You don't have any messages yet!</Text>
-                        </Center>
-                    </Box>
+                    <>
+                        {userChannelsLoading ? (
+                            <Spinner />
+                        ) : (
+                            <Box p={5}>
+                                <Heading>Chat</Heading>
+                                <Input
+                                    height={50}
+                                    mt={3}
+                                    placeholder="Search"
+                                    borderRadius={50}
+                                    borderColor={'gray.200'}
+                                    borderWidth={2}
+                                />
+                                <Center mt={6}>
+                                    <Icon as={Ionicons} name="chatbubbles" size={'xl'} />
+                                    <Text>You don't have any messages yet!</Text>
+                                </Center>
+                            </Box>
+                        )}
+                    </>
                 )}
                 keyExtractor={(item, index) => 'key' + index}
             />