How to use @cometchat-pro/chat - 10 common examples

receiverType = CometChat.RECEIVER_TYPE.GROUP;
    } else if (this.props.activeConversation.uid !== undefined) {
      otherUID = this.props.activeConversation.uid;
      receiverType = CometChat.RECEIVER_TYPE.USER;
    }

    let messageType = CometChat.MESSAGE_TYPE.MEDIA;

    if (fileType === MESSAGE_TYPE_IMAGE)
      messageType = CometChat.MESSAGE_TYPE.IMAGE;
    else if (fileType === MESSAGE_TYPE_VIDEO)
      messageType = CometChat.MESSAGE_TYPE.VIDEO;
    else if (fileType === MESSAGE_TYPE_AUDIO)
      messageType = CometChat.MESSAGE_TYPE.AUDIO;
    else if (fileType === MESSAGE_TYPE_FILE)
      messageType = CometChat.MESSAGE_TYPE.FILE;

    var file = document.getElementById("attachment-type-" + fileType).files[0];

    var mediaMessage = new CometChat.MediaMessage(
      otherUID,
      file,
      messageType,
      receiverType
    );
    CometChat.sendMediaMessage(mediaMessage).then(
      message => {
        // Message sent successfully.
        this.setState({
          showAttachmentOptions: !this.state.showAttachmentOptions,
          msghistory: [...this.state.msghistory, message]
        });

// Handle text message
            senderID = textMessage.sender.uid;
            messageId = textMessage.id;

            if (senderID !== this.props.subjectUID) {
              CometChat.markMessageAsRead(
                textMessage
              );
            }
            this.setState({
              msghistory: [...this.state.msghistory, textMessage]
            });
            this.props.handleOnRecentMessageSent(messageId);

          } else if (
            textMessage.receiverType === CometChat.RECEIVER_TYPE.GROUP &&
            textMessage.receiverId === this.props.activeConversation.guid
          ) {
            if(textMessage.sender.uid !== this.props.subjectUID)
            {
              // Handle text message
              senderID = textMessage.sender.uid;
              messageId = textMessage.id;
             
              CometChat.markMessageAsRead(textMessage);
              this.props.handleOnRecentMessageSent(messageId);
              this.setState({
                msghistory: [...this.state.msghistory, textMessage]
              });
            }
            
          }

componentDidMount() {
    //listener1
    var listenerID = LISTENER_NEW_MESSAGE;

    CometChat.addMessageListener(
      listenerID,
      new CometChat.MessageListener({
        onTextMessageReceived: textMessage => {
         
          let messageId;
          let senderID;
          if (
            textMessage.receiverType === CometChat.RECEIVER_TYPE.USER &&
            textMessage.sender.uid === this.props.activeConversation.uid
          ) {
            // Handle text message
            senderID = textMessage.sender.uid;
            messageId = textMessage.id;

            if (senderID !== this.props.subjectUID) {
              CometChat.markMessageAsRead(

}

    let messageType = CometChat.MESSAGE_TYPE.MEDIA;

    if (fileType === MESSAGE_TYPE_IMAGE)
      messageType = CometChat.MESSAGE_TYPE.IMAGE;
    else if (fileType === MESSAGE_TYPE_VIDEO)
      messageType = CometChat.MESSAGE_TYPE.VIDEO;
    else if (fileType === MESSAGE_TYPE_AUDIO)
      messageType = CometChat.MESSAGE_TYPE.AUDIO;
    else if (fileType === MESSAGE_TYPE_FILE)
      messageType = CometChat.MESSAGE_TYPE.FILE;

    var file = document.getElementById("attachment-type-" + fileType).files[0];

    var mediaMessage = new CometChat.MediaMessage(
      otherUID,
      file,
      messageType,
      receiverType
    );
    CometChat.sendMediaMessage(mediaMessage).then(
      message => {
        // Message sent successfully.
        this.setState({
          showAttachmentOptions: !this.state.showAttachmentOptions,
          msghistory: [...this.state.msghistory, message]
        });
        this.scrollToBottom();
        this.props.handleOnRecentMessageSent(message.id);
      },
      error => {

this.setState({
              msghistory: [...this.state.msghistory, textMessage]
            });
            this.props.handleOnRecentMessageSent(messageId);

          } else if (
            textMessage.receiverType === CometChat.RECEIVER_TYPE.GROUP &&
            textMessage.receiverId === this.props.activeConversation.guid
          ) {
            if(textMessage.sender.uid !== this.props.subjectUID)
            {
              // Handle text message
              senderID = textMessage.sender.uid;
              messageId = textMessage.id;
             
              CometChat.markMessageAsRead(textMessage);
              this.props.handleOnRecentMessageSent(messageId);
              this.setState({
                msghistory: [...this.state.msghistory, textMessage]
              });
            }
            
          }
          this.scrollToBottom();
        },
        onMediaMessageReceived: mediaMessage => {

fetchUserWithSearchKey(key){
    var current = this;
    let usersRequest = new CometChat.UsersRequestBuilder().setLimit(100).setSearchKeyWord(key).build();
    usersRequest.fetchNext().then(
      userList => {
        current.updateUserList(userList);
      },
      error => {
        console.log("User list fetching failed with error:", error);
      }
    );
  }

fetchGroupsWithSearchKey=(key)=>{
    let groupsRequest = new CometChat.GroupsRequestBuilder().setLimit(100).setSearchKeyWord(key).build();

    groupsRequest.fetchNext().then(
      groupList => {              
        this.setState({searchMode:true,searchData:groupList});
      },
      error => {
        console.log("Groups list fetching failed with error", error);
      }
    );
  }

return dispatch => {
    let messageType = CometChat.MESSAGE_TYPE.TEXT;
    let receiverType = CometChat.RECEIVER_TYPE.USER;
    let textMessage = new CometChat.TextMessage(
      receiverID,
      messageText,
      messageType,
      receiverType
    );
    textMessage.setId(messageId);
    CometChat.editMessage(textMessage).then(
      message => {
        dispatch(editMessage(message));
      },
      error => {
        console.log("Message editing failed with error:", error);
      }
    );

return dispatch => {
    let messageType = CometChat.MESSAGE_TYPE.TEXT;
    let receiverType = CometChat.RECEIVER_TYPE.USER;
    let textMessage = new CometChat.TextMessage(
      receiverID,
      messageText,
      messageType,
      receiverType
    );
    textMessage.setId(messageId);
    CometChat.editMessage(textMessage).then(
      message => {
        dispatch(editMessage(message));
      },
      error => {
        console.log("Message editing failed with error:", error);
      }
    );
  };

export default class CCManager {
  static cometchat = null;
  static appId        =   'ZZZ_CC_APPID'   ;   //Enter your App ID
  static apiKey       =   'ZZZ_CC_APIKEY'  ;  //Enter your API KEY
  static appSetting   =   new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion('eu').build();

  static LISTENER_KEY_MESSAGE = "msglistener";
  static LISTENER_KEY_USER = "userlistener";
  static LISTENER_KEY_GROUP = "grouplistener";
  static LISTENER_KEY_CALL = "calllistener";

  static GroupType = {
    'PUBLIC':CometChat.GROUP_TYPE.PUBLIC,
    'PRIVATE':CometChat.GROUP_TYPE.PRIVATE,
    'PASSWORD':CometChat.GROUP_TYPE.PASSWORD
  };
  static userRequest = null;
  static groupRequest = null;

  static init(dispatcher) {
    CometChat.init(this.appId,this.appSetting);
  }

  static getInstance() {
    if (CCManager.cometchat == null) {
      CCManager.cometchat = CometChat.init(this.appId,this.appSetting);
    }
    return CCManager.cometchat;
  }
  
  static setUserRequestBuilder(limit){