feat: [FC-13] custom document message

Author: HuyDo

package.json

@@ -144,15 +144,21 @@
     ]
   },
   "dependencies": {
+    "@react-native-community/slider": "^4.5.2",
     "@react-native-firebase/app": "^20.1.0",
     "@react-native-firebase/firestore": "^20.1.0",
     "@react-native-firebase/storage": "^20.1.0",
+    "@types/react-native-doc-viewer": "^2.7.6",
     "@types/uuid": "^9.0.8",
     "randomcolor": "^0.6.2",
     "react-native-aes-crypto": "^2.1.1",
+    "react-native-doc-viewer": "^2.7.8",
+    "react-native-document-picker": "^9.3.0",
     "react-native-fast-image": "^8.6.3",
+    "react-native-fs": "^2.20.0",
     "react-native-gifted-chat": "^2.4.0",
     "react-native-image-picker": "^7.1.2",
+    "react-native-uuid": "^2.0.2",
     "react-native-video": "^6.2.0",
     "react-native-vision-camera": "^4.1.0",
     "uuid": "^10.0.0"

src/chat/ChatScreen.tsx

@@ -17,22 +17,29 @@ import {
   type ComposerProps,
   GiftedChat,
   type GiftedChatProps,
+  Bubble,
 } from 'react-native-gifted-chat';
 import TypingIndicator from 'react-native-gifted-chat/lib/TypingIndicator';
 import { FirestoreServices } from '../services/firebase';
 import { useChatContext, useChatSelector } from '../hooks';
+
+import { formatMessageData } from '../utilities';
+import { getConversation } from '../reducer/selectors';
+import InputToolbar, { IInputToolbar } from './components/InputToolbar';
+import { CameraView, CameraViewRef } from '../chat_obs/components/CameraView';
+import SelectedBubbleModal from './components/SelectedBubbleModal';
+import FileAttachmentModal, {
+  FileAttachmentModalRef,
+} from './components/FileAttachmentModal';
 import type {
   ConversationProps,
   CustomConversationInfo,
   IUserInfo,
   MessageProps,
 } from '../interfaces';
-import { formatMessageData } from '../utilities';
-import { getConversation } from '../reducer/selectors';
-import InputToolbar, { IInputToolbar } from './components/InputToolbar';
-import { CameraView, CameraViewRef } from '../chat_obs/components/CameraView';
-import SelectedImageModal from './components/SelectedImage';
 import { useCameraPermission } from 'react-native-vision-camera';
+import type { CustomImageVideoBubbleProps } from './components/bubble/CustomImageVideoBubble';
+import { CustomBubble } from './components/bubble';
 
 interface ChatScreenProps extends GiftedChatProps {
   style?: StyleProp<ViewStyle>;
@@ -46,6 +53,7 @@ interface ChatScreenProps extends GiftedChatProps {
   hasGallery?: boolean;
   onPressCamera?: () => void;
   customConversationInfo?: CustomConversationInfo;
+  customImageVideoBubbleProps: CustomImageVideoBubbleProps;
 }
 
 export const ChatScreen: React.FC<ChatScreenProps> = ({
@@ -58,6 +66,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   renderComposer,
   inputToolbarProps,
   customConversationInfo,
+  customImageVideoBubbleProps,
   ...props
 }) => {
   const { userInfo } = useChatContext();
@@ -70,10 +79,15 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   const firebaseInstance = useRef(FirestoreServices.getInstance()).current;
   const [messagesList, setMessagesList] = useState<MessageProps[]>([]);
   const [hasMoreMessages, setHasMoreMessages] = useState(false);
+
   const isLoadingRef = useRef(false);
   const cameraViewRef = useRef<CameraViewRef>(null);
-  const [isImgVideoUrl, setImgVideoUrl] = useState('');
+  const fileAttachmentRef = useRef<FileAttachmentModalRef>(null);
+
   const { hasPermission, requestPermission } = useCameraPermission();
+  const [selectedMessage, setSelectedMessage] = useState<MessageProps | null>(
+    null
+  );
 
   const conversationRef = useRef<ConversationProps | undefined>(
     conversationInfo
@@ -205,6 +219,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           hasCamera={props.hasCamera}
           hasGallery={props.hasGallery}
           {...inputToolbarProps}
+          documentRef={fileAttachmentRef.current}
         />
       );
     },
@@ -218,6 +233,18 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
     ]
   );
 
+  const renderBubble = (bubble: Bubble<MessageProps>['props']) => {
+    if (props.renderBubble) return props.renderBubble(bubble);
+    return (
+      <CustomBubble
+        bubbleMessage={bubble}
+        onSelectedMessage={setSelectedMessage}
+        customImageVideoBubbleProps={customImageVideoBubbleProps}
+        position={bubble.position}
+      />
+    );
+  };
+
   return (
     <View style={[styles.container, style]}>
       <KeyboardAvoidingView style={styles.container}>
@@ -234,14 +261,20 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           renderChatFooter={() => <TypingIndicator />}
           onLoadEarlier={onLoadEarlier}
           renderComposer={inputToolbar}
+          renderBubble={renderBubble}
           {...props}
         />
       </KeyboardAvoidingView>
-      <SelectedImageModal
-        imageUrl={isImgVideoUrl}
-        onClose={() => setImgVideoUrl('')}
+      <SelectedBubbleModal
+        message={selectedMessage}
+        onClose={() => setSelectedMessage(null)}
       />
       <CameraView onSend={onSend} userInfo={userInfo} ref={cameraViewRef} />
+      <FileAttachmentModal
+        userInfo={userInfo}
+        ref={fileAttachmentRef}
+        onSend={onSend}
+      />
     </View>
   );
 };

src/chat/components/ConversationItem.tsx

@@ -38,6 +38,19 @@ export const ConversationItem: React.FC<IConversationItemProps> = ({
     return undefined;
   }, [data.image, data.name]);
 
+  const getLatestTextMessage = () => {
+    switch (data.latestMessage?.type) {
+      case MessageTypes.image:
+        return 'Image';
+      case MessageTypes.video:
+        return 'Video';
+      case MessageTypes.document:
+        return 'File Attachment';
+      default:
+        return data?.latestMessage?.text;
+    }
+  };
+
   return (
     <TouchableOpacity onPress={() => onPress?.(data)} style={styles.container}>
       <View style={styles.row}>
@@ -58,11 +71,7 @@ export const ConversationItem: React.FC<IConversationItemProps> = ({
               {data?.name}
             </Text>
             <Text style={[styles.message, lastMessageStyle]} numberOfLines={1}>
-              {data?.latestMessage?.type === MessageTypes.text
-                ? data?.latestMessage?.text
-                : data?.latestMessage?.type === MessageTypes.image
-                ? 'Photo'
-                : 'Video'}
+              {getLatestTextMessage()}
             </Text>
           </View>
         )}