How to handle muted messages in React - Chat

Muting another user

By default, any user is allowed to mute another user. This can be achieved with the following code

const mutedUser = await client.muteUser(targetUser);

The default behavior for this, is to add the targetUser to an array of muted users that are stored on the user object. This array is returned with the response of setUser(); and so can be stored locally and appended if another mute is created. 

{
  type: 'health.check',
  connection_id: 'b626be04-0811-4d38-b920-ac756cfdaa64',
  cid: '*',
  me: {
    id: 'steve',
    role: 'user',
    roles: [],
    created_at: '2020-04-20T01:58:40.267042Z',
    updated_at: '2020-12-09T22:06:04.353883Z',
    last_active: '2020-12-09T22:17:03.979243225Z',
    banned: false,
    online: true,
    invisible: false,
    devices: [],
    mutes: [ [Object] ],
    channel_mutes: [ [Object], [Object], [Object] ],
    unread_count: 1,
    total_unread_count: 1,
    unread_channels: 1,
  },
  created_at: '2020-12-09T22:17:03.982054672Z'
}

By saving a shallow copy of the mutes array as a local state variable and appending it when a new mute is created, a user can have an up to date record of the users they have muted. 

Rendering messages from a muted user

In the below example we show how to remove a message from a muted user. Alternatively, message content could be altered, or any other solution that fits your use case. 

<Channel Message={props => {
  // Hide messages from muted user
  if (props.mutes.includes(props.message.user.id)) {
    return null;
  }

  return <MessageSimple {...props} />
  }}>
  ...
</Channel>