index.js - CometChatMessageComposer - Mention Chat App

index.js

...
import Tribute from "tributejs";
import "./tribute.css";
...
class CometChatMessageComposer extends React.PureComponent {
	...
	groupListenerId = "group_" + new Date().getTime();
  ...
	constructor(props) {
		super(props);
    ...
		this.tributeRef = React.createRef();
		this.prevItemType = React.createRef();
    ...
	}

	componentDidMount() {
		...
    this.prevItemType.current = this.context.type;
		this.enableMentions();
		this.onNewMemberJoined();
		...
	}

	componentDidUpdate(prevProps, prevState) {
		...
		if (this.prevItemType.current !== this.context.type) { 
			this.prevItemType.current = this.context.type;
			this.enableMentions();
		}
		...
	}

	componentWillUnmount() {
		this.removeListeners();
	}

	attachTribute = () => {
		if (this.tributeRef && this.tributeRef.current && this.messageInputRef) { 
			this.tributeRef.current.attach(this.messageInputRef.current);
		}
	}

	transformGroupMembers = (groupMembers) => { 
		if (groupMembers && groupMembers.length !== 0) { 
			const transformedGroupMembers = [];
			for (const member of groupMembers) {
				if (member && member.name && member.name !== this.loggedInUser.name) { 
					transformedGroupMembers.push({key: `${member.name}`, value: `@{${member.name}|${member.uid}}`});
				}
			}
			return transformedGroupMembers;
		}
		return [];
	}

	initTributeForGroup = (groupId) => {
		if (groupId) {
			const limit = 30;
			const groupMemberRequest = new CometChat.GroupMembersRequestBuilder(groupId)
				.setLimit(limit)
				.build();

			groupMemberRequest.fetchNext().then(
				groupMembers => {
					const transformedGroupMembers = this.transformGroupMembers(groupMembers);
					this.tributeRef.current = new Tribute({
						values: transformedGroupMembers,
						lookup: 'key',
  					fillAttr: 'key'
					});
					this.attachTribute();
				},
				error => {
				}
			);
		}
	};

	initTributeForUser = (userId) => {
		if (userId) {
			CometChat.getUser(userId).then(
				user => {
					this.tributeRef.current = new Tribute({
						values: [
							{key: `${user.name}`, value: `@{${user.name}|${user.uid}}`}
						],
						lookup: 'key',
  					fillAttr: 'key'
					});
					this.attachTribute();
				},
				error => {
				}
			);
		}
	};

	detachTribute = () => { 
		if (this.tributeRef && this.tributeRef.current) { 
			this.tributeRef.current.detach(this.messageInputRef.current);
		}
	}

	enableMentions = () => {
		this.context.FeatureRestriction.isMentionsEnabled()
			.then(response => {
				if (response) {
					this.detachTribute();
					const receiverDetails = this.getReceiverDetails();
					if (receiverDetails && receiverDetails.receiverId && receiverDetails.receiverType) {
						switch (receiverDetails.receiverType) {
							case CometChat.RECEIVER_TYPE.GROUP:
								this.initTributeForGroup(receiverDetails.receiverId);
								break;
							case CometChat.RECEIVER_TYPE.USER:
								this.initTributeForUser(receiverDetails.receiverId);
								break;
							default:
								break;
						}
					}
				}
			})
			.catch(error => {
			});
	};

	removeListeners = () => {
		CometChat.removeGroupListener(this.groupListenerId);
	}

	onNewMemberJoined = () => {
		CometChat.addGroupListener(
			this.groupListenerId,
			new CometChat.GroupListener({
				onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
					this.enableMentions();
				}, 
				onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
					this.enableMentions();
				}, 
				onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
					this.enableMentions();
				}, 
				onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
					this.enableMentions();
				}, 
				onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
					this.enableMentions();
				}, 
				onGroupMemberLeft: (message, leavingUser, group) => {
					this.enableMentions();
				}, 
				onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
					this.enableMentions();
				}
			})
		);
	}
  ...
	shouldTransformMessageInput = (messageInput) => {
		return messageInput &&
			this.tributeRef &&
			this.tributeRef.current &&
			this.tributeRef.current.collection &&
			this.tributeRef.current.collection.length !== 0 &&
			this.tributeRef.current.collection[0].values &&
			this.tributeRef.current.collection[0].values.length !== 0;
	}

	getTributeValue = (tributeValues, message) => {
		for (const tribute of tributeValues) {
			if (message === `@${tribute.key}`) {
				return tribute.value;
			}
		}
		return null;
	}

	processTransformMessageInput = (tributeValues, messageInputArray) => {
		return messageInputArray.map(message => {
			const tributeValue = this.getTributeValue(tributeValues, message);
			return tributeValue ? tributeValue : message;
		});
	}

	transformTextMessage = (textMessage) => {
		if (textMessage && textMessage.text && textMessage.data && textMessage.data.text) {
			const messageInput = textMessage.text;
			if (!messageInput.includes('@')) { 
				return messageInput;
			}
			if (this.shouldTransformMessageInput(messageInput)) {
				const tributeValues = this.tributeRef.current.collection[0].values;
				const messageInputArray = messageInput.split(/\s/);
				const transformedMessageInput = this.processTransformMessageInput(tributeValues, messageInputArray).join(' ');
				return {
					...textMessage,
					data: {text: transformedMessageInput},
					text: transformedMessageInput
				};
			}
			return textMessage;
		}
		return textMessage;
	}
  
	sendTextMessage = () => {
		...
		const transformedTextMessage = this.transformTextMessage(textMessage);

		this.props.actionGenerated(enums.ACTIONS["MESSAGE_COMPOSED"], [transformedTextMessage]);
		...
		CometChat.sendMessage(transformedTextMessage)
			.then(message => {
				const newMessageObj = { ...message, _id: transformedTextMessage._id };
				this.props.actionGenerated(enums.ACTIONS["MESSAGE_SENT"], [newMessageObj]);
			})
			.catch(error => {
				const newMessageObj = { ...transformedTextMessage, error: error };
				this.props.actionGenerated(enums.ACTIONS["ERROR_IN_SENDING_MESSAGE"], [newMessageObj]);

				if (error && error.hasOwnProperty("code") && error.code === "ERR_GUID_NOT_FOUND") {
					//this.context.setDeletedGroupId(this.context.item.guid);
				}
			});
	};
  ...
}