diff --git a/src/features/Core/screens/ChatScreen.js b/src/features/Core/screens/ChatScreen.js index 4fe7fb8f..d6e76fc3 100644 --- a/src/features/Core/screens/ChatScreen.js +++ b/src/features/Core/screens/ChatScreen.js @@ -1,21 +1,22 @@ -import { faAngleLeft, faEdit, faPaperPlane, faTrash, faUser } from '@fortawesome/free-solid-svg-icons'; +import { faAngleLeft, faEdit, faPaperPlane, faTrash, faUser, faFile } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; import { useNavigation } from '@react-navigation/native'; import axios from 'axios'; import config from 'config'; import { useDriver, useFleetbase } from 'hooks'; import React, { useEffect, useState } from 'react'; -import { ActivityIndicator, Alert, FlatList, Platform, ScrollView, Text, TouchableOpacity, View } from 'react-native'; +import { ActivityIndicator, Alert, FlatList, Platform, ScrollView, Text, TouchableOpacity, View, KeyboardAvoidingView } from 'react-native'; import FastImage from 'react-native-fast-image'; import { Actions, Bubble, GiftedChat, InputToolbar, Send } from 'react-native-gifted-chat'; import { launchImageLibrary } from 'react-native-image-picker'; import Modal from 'react-native-modal'; +import RNFS from 'react-native-fs'; import { tailwind } from 'tailwind'; import { createSocketAndListen, isObject, translate } from 'utils'; import { get } from 'utils/Storage'; const isAndroid = Platform.OS === 'android'; -let { FLEETBASE_KEY } = config; +let { FLEETBASE_KEY, FLEETBASE_HOST } = config; const ChatScreen = ({ route }) => { const { channel: channelProps } = route.params; @@ -115,7 +116,9 @@ const ChatScreen = ({ route }) => { }; const res = await axiosClient.post('files/upload', formData); - + const imageUrl = res.data.file; + JSON.stringify('imageUrl::::::', JSON.stringify(imageUrl)); + setUploadedImageUrl(imageUrl); await adapter.post(`chat-channels/${channel?.id}/send-message`, { sender: participantId.id, content: res.data.file.original_filename }); setMessages(previousMessages => GiftedChat.append(previousMessages, message)); @@ -284,6 +287,49 @@ const ChatScreen = ({ route }) => { ); }; + const openMedia = async url => { + const fileNameParts = url?.split('/')?.pop()?.split('?'); + console.log('fileNameParts:::', JSON.stringify(fileNameParts)); + const fileName = fileNameParts.length > 0 ? fileNameParts[0] : ''; + + const localFile = `${RNFS.DocumentDirectoryPath}/${fileName}`; + + const options = { + fromUrl: url, + toFile: localFile, + }; + + RNFS.downloadFile(options).promise.then(() => { + RNFS.readDir(RNFS.DocumentDirectoryPath); + FileViewer.open(localFile); + }); + }; + + const checkIsImage = item => { + if (item && item.content_type) { + return item.content_type.startsWith('image/'); + } + }; + + const renderDocumentItem = image => { + return ( + + { + openMedia(`${FLEETBASE_HOST}${image?.url}`); + }}> + {checkIsImage(image?.original_filename) ? ( + + ) : ( + + + + )} + + + ); + }; + const renderBubble = props => { return ( { color: '#fff', }, }} + onPress={() => renderDocumentItem(uploadedImageUrl)} /> ); };