How to implement unread messages count

Help
,
1

Hey Aaron, using your gift chat + firebase example, how would you implement unread message count on the channels flatlist?

2

I tried adding this in the useeffect after fetching the array of channels, looping through and saving the result into state, but I’m sure this is not the right way to do it. Haha


const result = await kitty.getChannelUnread({
  channel: channel,
});

if (result.succeeded) {
  const unread = result.unread; // Handle if unread 
}
3

Hey @stevenchews yeah, you can do that. Or create a new component that takes a channel as prop and wraps your list item component.

The component can have a state property unread with setUnread as a setter that it uses to control the rendering of your unread indicator.

You can add a useEffect React hook inside that component that calls

const result = await kitty.getChannelUnread({
  channel: channel,
});

if (result.succeeded) {
  setUnread(result.unread};
}
4

Yeah that method makes a lot of sense! Thanks! How should I go about getting the total number of unread messages displayed on my messages button? That one seems a bit tricky haha. For me that would mean it has to be calculated when the homepage is loaded since my messages button lives on that screen. (Btw the messages button navigates to the channels screen)

1 Like
5

Ah, I see. There isn’t a total unread messages count across all channels function implemented on the ChatKitty SDK at the moment. That would be simple solution for your requirement. I think this will be a great first feature request for ChatKitty Community. :smile:

Can you create another topic in Feature Requests - ChatKitty Community and reference this topic there?

So we can track and document the progress of this new feature.

6

Okay so I am using the method that returns the unread message count and the number isn’t changing after I open the channel to read it. I tried manually reloading the app too and no luck.

import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {kitty} from '../../chatkitty';

export default function ProcessChannel({kittyUser, children, channel}) {
  const [unread, setUnread] = useState(false);
  const [unreadCount, setUnreadCount] = useState(0);
  let filtered = channel.members.filter(
    data => data.displayName !== kittyUser.displayName,
  );

  console.log(
    '🚀 ~ file: ProcessChannel.js ~ line 8 ~ ProcessChannel ~ unreadCount',
    unreadCount,
  );

  const checkIfUnread = async channel => {
    const unreadResults = await kitty.getChannelUnread({
      channel: channel,
    });
    if (unreadResults.succeeded) {
      setUnread(unreadResults.unread);
    }
  };

  const getUnreadCount = async channel => {
    const countResults = await kitty.getUnreadMessagesCount({channel: channel});

    if (countResults.succeeded) {
      setUnreadCount(countResults.count);
    }
  };

  useEffect(() => {
    checkIfUnread(channel);
    getUnreadCount(channel);
  }, []);

  return (
    <View>
      {children(
        unread,
        unreadCount,
        filtered[0].displayName,
        filtered[0].displayPictureUrl,
      )}
    </View>
  );
}

used like this

  const renderItem = ({item, index}) => {
    return (
      <ProcessChannel channel={item} kittyUser={kittyUser}>
        {(unread, unreadCount, title, userImg) => {
          return (
          ...
					);
        }}
      </ProcessChannel>
    );
  };

My console log, but i read all messages already

🚀   unreadCount 20
🚀   unreadCount 0
🚀   unreadCount 27
7

Are you calling kitty.readMessage({ message }) or kitty.readChannel({ channel })?

You need to tell ChatKitty when to mark a message or all messages in a channel as read.