JS SDK: How to filter using Tags

How-To Guides
1

How to filter using tags

Guide Details:

Language/Framework: React
SDK and UI Kit Versions:

"@cometchat/calls-sdk-javascript": "^4.0.6",
    "@cometchat/chat-sdk-javascript": "^4.0.3",
    "@cometchat/chat-uikit-react": "^4.1.1",

Introduction

Tags can be a powerful tool to fetch specific CometChat users and conversations. By adding tags to various CometChat entities, you can organize and manage your chat system more effectively. This guide will show you how to set and fetch tags in CometChat, providing a detailed example of how to implement this feature using the CometChat V4 UI Kit.

Setting Tags in CometChat

You can set tags on CometChat users and conversations, making it easier to manage and organize your chat users. The following links lead the documentation on how to tag conversations.

Tag Conversations

1-1 Conversations

Group Conversations

Tag Users

User

Group

Fetching Data with Tags

By default, tags are not included in the user, group, or conversation data fetched by the SDK.

Fetch Users and Groups with Tags

When you fetch a user or group, you can fetch the entity with their tags.

Fetch Conversations with User, Group, Convo. tags

When you fetch a a conversation, you can set the following functions to fetch the conversation with user, group, and conversation tags.

Fetch via API

You can access the same data requests via the API at the following endpoints:

Using V4 UI Kit Components

If you are using our V4 UI Kit components and want to access tags, you will need to create a custom request builder using the classes listed above. Once you have created the request builder, you can pass it into the conversation or user configuration to retrieve the tags.

Example using Group Tags

The following code example demonstrates how to create a conversation request builder to fetch conversations with a specific user group tag using one of the components from our V4 UI Kit. In this case, we are looking for the tag ‘test-group’ in Groups.

We set up a request builder to fetch conversations that include user and group tags. The onPressHandler function checks if the clicked conversation is a group and if it has the tag ‘test-group’, allowing you to perform specific actions based on this condition.

    const onPressHandler = (conversationClicked: CometChat.Conversation) => {
      const type = conversationClicked.getConversationType();
      if (type === 'group') {
            // gets the entity which the conversation is with (user or group)
          const withConvo = conversationClicked.getConversationWith() as CometChat.Group;
          const loggedInUserScope = withConvo.getScope();
          const tags = withConvo.getTags();
          if(tags.includes('test-group')){
            // do something if my conversation is a group and the group has the tag 'test-group'
          }
      }
  };
    let limit = 30;
    let conversationRequest = new CometChat.ConversationsRequestBuilder()
                                                    .setLimit(limit)
                                                    .withUserAndGroupTags(true)
    console.log(conversationRequest)
  return (
      <CometChatConversations
    conversationsRequestBuilder={conversationRequest}
      onItemPress={onPressHandler}
      />
    );
1 Like