Show only a specific user "type" in Chat Component

Code Library
1

Is there any way to filter the “Chat” component by a user type?

For example, my chat component is linked to the user data source but I do not want to display any of the admins. There is a column in the user DS to distinguish whether a user is an admin or not.

I imagine I would need a JS screen snippet.

Any help would be much appreciated! Thank you.

2

Filtering the list of contacts on the Chat screen will require custom code added to the screen JS of the Chat screen.
Let’s say we have a data source ‘Users’ with column ‘Admin’. For admin users the value of the ‘Admin’ column can be either ‘Yes’ or [Yes]. For regular users there will be no value in the ‘Admin’ column.

Fliplet.Hooks.on('beforeChatContactsRendering', function onBeforeChatContactsRendering(data) {
  let emailColumnName = 'Email';
  let loginDataSourceName = 'Users';
  
  //find all regular users
  return Fliplet.DataSources.connectByName(loginDataSourceName).then(function(connection){
    return connection.find({
      where: {
        [emailColumnName]: { $in: data.contacts.map(contact => contact.data[emailColumnName]) },
        $or: [
          { 'Admin': { $ne: 'Yes' }},
          { 'Admin': { $nin: ['Yes'] }}
        ]
      },
      attributes: [emailColumnName]
    }).then(function(notAdminUsers){
      let usersEmailsToShow = notAdminUsers.map(user => user.data[emailColumnName]);
      
      //if regular users are found => update the list of contacts available on the chat screen
      if (usersEmailsToShow.length){
        data.contacts = data.contacts.filter(contact => usersEmailsToShow.includes(contact.data[emailColumnName]));
      } else {
        //show no users
        data.contacts = [];
      }
      return Promise.resolve(data);
    });
  });
});

This code takes all non-admin users from ‘Users’ data source and updates the list of contacts for the Chat component. Don’t forget to update emailColumnName and loginDataSourceName variables for the email column name and login data source respectively.
Hope this was helpfull. Please let me know if you have any other questions.

3

When I run this code, adjusting this:
let emailColumnName = ‘Email’;
let loginDataSourceName = ‘Users’;

other aspects of the chat no longer function correctly.

4

of course I resolve it right after I posted… Thanks @YuliiaKovalenko !!

1 Like
5

Allow users to hide themselves in the chat.

Hello, this is just to help also - can check if it seems right? Its working fine for me:

  1. The need the column ‘chat’ added to their user data source.
  2. it reads ‘no’ - so if the user put ‘no’ then they won’t be visible to other users in the chat.

It has instructions in it… sorry

Fliplet.Hooks.on('beforeChatContactsRendering', function onBeforeChatContactsRendering(data) {
//In your user datasource, put the column name for the emails: Mine is Email
  let emailColumnName = 'Email';

//In your datasources list, put the name of the user data source: Mine is New Users
  let loginDataSourceName = 'New Users'; 
  
  //find all regular users
  return Fliplet.DataSources.connectByName(loginDataSourceName).then(function(connection){
    return connection.find({
      where: {
        [emailColumnName]: { $in: data.contacts.map(contact => contact.data[emailColumnName]) },

//Please read: In your user datasource, create a column where you track yes or no if users want to be included in the chat. Reccomendation: add it to their profile editing screen. My column is: chat. Replace the both words if different
        $or: [
          { 'chat': { $ne: 'no' }},
          { 'chat': { $nin: ['no'] }}
        ]
      },
      attributes: [emailColumnName]
    }).then(function(notAdminUsers){
      let usersEmailsToShow = notAdminUsers.map(user => user.data[emailColumnName]);
      
      //if regular users are found => update the list of contacts available on the chat screen
      if (usersEmailsToShow.length){
        data.contacts = data.contacts.filter(contact => usersEmailsToShow.includes(contact.data[emailColumnName]));
      } else {
        //show no users
        data.contacts = [];
      }
      return Promise.resolve(data);
    });
  });
});