react-native-chating-ui-kit/lib/CometChatUsersWithMessages/CometChatUsersWithMessages.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 } from "react-native";
import { CometChat } from "@cometchat-pro/react-native-chat";
import { CometChatUsers, UsersConfiguration } from "../CometChatUsers";
import { MessagesConfiguration } from "../CometChatMessages/MessagesConfiguration";
import { CometChatMessages } from "../CometChatMessages";
import { Style } from "./styles";
import { CometChatUIEventHandler } from "../shared/events/CometChatUIEventHandler/CometChatUIEventHandler";
import { CometChatContext } from "../shared";
const uiEventListener = "uiEvents_" + new Date().getTime();
const ComponentNames = {
    UserList: "users",
    Messages: "messages"
};
export const CometChatUsersWithMessages = (props) => {
    const { user, usersConfiguration, messagesConfigurations, onError, } = props;
    const [showComponent, setShowComponent] = useState(ComponentNames.UserList);
    const [selectedUser, setSelectedUser] = useState(undefined);
    const loggedInUser = useRef(null);
    const { theme } = useContext(CometChatContext);
    const openMessagesFor = (item) => {
        setSelectedUser(item);
        setShowComponent(ComponentNames.Messages);
    };
    const _usersConfig = new UsersConfiguration({
        onItemPress: openMessagesFor,
        onError: onError,
        ...usersConfiguration,
    });
    const _messagesConfig = new MessagesConfiguration({ messageHeaderConfiguration: {
            onBack: () => setShowComponent(ComponentNames.UserList),
        },
        ...messagesConfigurations
    });
    useEffect(() => {
        CometChat.getLoggedinUser()
            .then((user) => {
            loggedInUser.current = user;
        })
            .catch(err => { });
        CometChatUIEventHandler.addUserListener(uiEventListener, {
            ccUserBlocked: ({ user }) => {
                user.setBlockedByMe(true);
                setSelectedUser(user);
            },
            ccUserUnBlocked: ({ user }) => {
                user.setBlockedByMe(false);
                setSelectedUser(user);
            }
        });
        return () => {
            CometChatUIEventHandler.removeUserListener(uiEventListener);
        };
    }, []);
    return (<View style={{ flex: 1 }}>
            <CometChatUsers {..._usersConfig}/>
            {showComponent == ComponentNames.Messages &&
            <View style={[Style.stackScreen, { backgroundColor: theme.palette.getBackgroundColor() }]}>
                    <CometChatMessages user={selectedUser} {..._messagesConfig}/>
                </View>}
        </View>);
};
//# sourceMappingURL=CometChatUsersWithMessages.js.map