react-native-chating-ui-kit/lib/CometChatGroupsWithMessages/CometChatGroupsWithMessages.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, useRef, useEffect, useContext } from "react";
import { View, Image, TouchableOpacity } from "react-native";
import { CometChat } from "@cometchat-pro/react-native-chat";
import { CometChatGroups, GroupsConfiguration } from "../CometChatGroups";
import { MessagesConfiguration } from "../CometChatMessages/MessagesConfiguration";
import { CometChatMessages } from "../CometChatMessages";
import { Style } from "./styles";
import { createIcon } from "./resources";
import { CometChatCreateGroup, CreateGroupConfiguration } from "../CometChatCreateGroup";
import { CometChatContext } from "../shared";
import { CometChatUIEventHandler } from "../shared/events/CometChatUIEventHandler/CometChatUIEventHandler";
import { CometChatGroupsEvents } from "../shared/events";
import { CometChatJoinProtectedGroup } from "../CometChatJoinProtectedGroup";
const uiEventListener = "uiEvents_" + new Date().getTime();
const ComponentNames = {
    GroupsList: "groups",
    Messages: "messages",
    CreateGroup: "createNewGroup",
};
export const CometChatGroupsWithMessages = (props) => {
    const { group, groupsConfiguration, messagesConfigurations, createGroupConfiguration, onError, } = props;
    const { theme } = useContext(CometChatContext);
    const [showComponent, setShowComponent] = useState(ComponentNames.GroupsList);
    const [joinProtectedGroup, setJoinProtectedGroup] = useState(false);
    const selectedGroup = useRef(group);
    const _createGroupConfig = new CreateGroupConfiguration({ ...createGroupConfiguration });
    const openMessagesFor = (item) => {
        selectedGroup.current = item;
        if (item['hasJoined']) {
            setShowComponent(ComponentNames.Messages);
        }
        else {
            if (item['type'] == "public") {
                CometChat.joinGroup(item, item['type']).then((result) => {
                    item['hasJoined'] = true;
                    item['membersCount'] = item['membersCount'] + 1;
                    item['scope'] = "participant";
                    CometChatUIEventHandler.emitGroupEvent(CometChatGroupsEvents.ccGroupMemberJoined, { joinedGroup: item });
                    setShowComponent(ComponentNames.Messages);
                });
            }
            if (item['type'] == "password") {
                setJoinProtectedGroup(true);
            }
        }
    };
    const _groupsConfig = new GroupsConfiguration({
        onItemPress: openMessagesFor,
        onError: onError,
        ...groupsConfiguration,
    });
    const _messagesConfig = new MessagesConfiguration({
        messageHeaderConfiguration: {
            onBack: () => setShowComponent(ComponentNames.GroupsList),
        },
        ...messagesConfigurations
    });
    const CreateGroupView = () => {
        return (<TouchableOpacity onPress={() => setShowComponent(ComponentNames.CreateGroup)}>
                <Image source={createIcon} style={{ height: 24, width: 24, tintColor: theme?.palette.getPrimary() }}/>
            </TouchableOpacity>);
    };
    useEffect(() => {
        CometChatUIEventHandler.addGroupListener(uiEventListener, {
            ccGroupCreated: ({ group }) => {
                selectedGroup.current = group;
                setTimeout(() => {
                    setShowComponent(ComponentNames.Messages);
                }, 200);
            },
            ccGroupMemberJoined: ({ joinedGroup }) => {
                console.log("joined", joinedGroup);
                joinedGroup['hasJoined'] = true;
                joinedGroup['scope'] = "participant";
                selectedGroup.current = joinedGroup;
                setTimeout(() => {
                    setShowComponent(ComponentNames.Messages);
                }, 200);
            },
            ccGroupDeleted: ({ group }) => {
                selectedGroup.current = null;
                setShowComponent(ComponentNames.GroupsList);
            },
            ccGroupLeft: ({ group }) => {
                selectedGroup.current = null;
                setShowComponent(ComponentNames.GroupsList);
            }
        });
        return () => {
            CometChatUIEventHandler.removeGroupListener(uiEventListener);
        };
    }, []);
    return (<View style={{ flex: 1 }}>
            {joinProtectedGroup && joinProtectedGroup == true &&
            <View style={[Style.stackScreen, { backgroundColor: theme.palette.getBackgroundColor() }]}>
                        <CometChatJoinProtectedGroup group={selectedGroup.current} onBack={() => setJoinProtectedGroup(false)}/>
                </View>}
            {selectedGroup.current && showComponent == ComponentNames.Messages &&
            <View style={[Style.stackScreen, { backgroundColor: theme.palette.getBackgroundColor() }]}>
                    <CometChatMessages group={selectedGroup.current} {..._messagesConfig}/>
                </View>}
            {showComponent == ComponentNames.CreateGroup &&
            <View style={[Style.stackScreen, { backgroundColor: theme.palette.getBackgroundColor() }]}>
                    <CometChatCreateGroup onBack={() => setShowComponent(ComponentNames.GroupsList)} {..._createGroupConfig}/>
                </View>}
            <CometChatGroups AppBarOption={CreateGroupView} {..._groupsConfig}/>
        </View>);
};
//# sourceMappingURL=CometChatGroupsWithMessages.js.map