react-native-chating-ui-kit/lib/CometChatConversationsWithMessages/CometChatConversationsWithMessages.js

CometChat React Native UI Kit is a collection of custom UI Components designed to build text , chat and calling features in your application. The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly

import React, { useState, useEffect, useRef, useContext } from "react";
import { View, BackHandler } from "react-native";
import { ConversationsConfiguration } from "../CometChatConversations/ConversationsConfiguration";
import { MessagesConfiguration } from "../CometChatMessages/MessagesConfiguration";
import { CometChatConversations } from "../CometChatConversations/CometChatConversations";
import { CometChatMessages } from "../CometChatMessages";
import { Style } from "./styles";
import { CometChatUIEventHandler } from "../shared/events/CometChatUIEventHandler/CometChatUIEventHandler";
import { CometChatContext } from "../shared";
const ComponentNames = {
    ConversationList: "conversations",
    Messages: "messages"
};
const uiEventListener = "uiEvents_" + new Date().getTime();
export const CometChatConversationsWithMessages = (props) => {
    const { user, group, conversationsConfiguration, messagesConfigurations, onError, } = props;
    const { theme } = useContext(CometChatContext);
    const [showComponent, setShowComponent] = useState(ComponentNames.ConversationList);
    const selectedConversation = useRef(null);
    const selectedUser = useRef(user);
    const selectedGroup = useRef(group);
    const openMessagesFor = (item) => {
        selectedConversation.current = item;
        setShowComponent(ComponentNames.Messages);
    };
    const _conversationsConfig = new ConversationsConfiguration({
        onItemPress: openMessagesFor,
        onError,
        ...conversationsConfiguration
    });
    const _messagesConfig = new MessagesConfiguration({
        ...messagesConfigurations,
        messageHeaderConfiguration: {
            onBack: () => setShowComponent(ComponentNames.ConversationList),
            ...messagesConfigurations?.messageHeaderConfiguration
        },
        messageComposerConfiguration: {
            onError,
            ...messagesConfigurations?.messageComposerConfiguration
        }
    });
    const handleBack = () => {
        if (showComponent == ComponentNames.Messages)
            setShowComponent(ComponentNames.ConversationList);
        else
            return false;
        return true;
    };
    useEffect(() => {
        BackHandler.addEventListener('hardwareBackPress', handleBack);
        return () => {
            BackHandler.removeEventListener('hardwareBackPress', handleBack);
        };
    }, [showComponent]);
    useEffect(() => {
        if (user) {
            selectedUser.current = user;
            setShowComponent(ComponentNames.Messages);
        }
        if (group) {
            selectedGroup.current = group;
            setShowComponent(ComponentNames.Messages);
        }
    }, [user, group]);
    useEffect(() => {
        CometChatUIEventHandler.addGroupListener(uiEventListener, {
            ccGroupDeleted: ({ group }) => {
                if (selectedConversation.current?.getConversationWith()['guid'] == group['guid'] || selectedGroup.current?.getGuid() == group['guid'])
                    setShowComponent(ComponentNames.ConversationList);
            },
            ccGroupLeft: ({ leftGroup }) => {
                console.log({ leftGroup });
                if (selectedConversation.current?.getConversationId() == leftGroup['conversationId'] || selectedGroup.current?.getGuid() == leftGroup['guid'])
                    setShowComponent(ComponentNames.ConversationList);
            }
        });
        return () => {
            CometChatUIEventHandler.removeGroupListener(uiEventListener);
        };
    }, []);
    return (<View style={{ flex: 1 }}>
            <CometChatConversations {..._conversationsConfig}/>
            {showComponent == ComponentNames.Messages &&
            <View style={[Style.stackScreen, { backgroundColor: theme.palette.getBackgroundColor() }]}>
                    <CometChatMessages user={selectedUser.current || selectedConversation.current['conversationType'] == "user" ? selectedConversation.current['conversationWith'] : undefined} group={selectedGroup.current || selectedConversation.current['conversationType'] == "group" ? selectedConversation.current['conversationWith'] : undefined} {..._messagesConfig}/>
                </View>}
        </View>);
};
//# sourceMappingURL=CometChatConversationsWithMessages.js.map