I’m having problems trying to implement Notifications in my Next.js React application.
Problems:
- Notifications sent from Sendbird Dashboard not being received, even though we are connected to sendbird
- Sometimes when we receive a notification templateVariables are empty
I have created a NotificationContext, and a NotificationProvider is wrapped around the whole app. In that Context I’m connecting to sendbird and fetching the Feed channel and doing collection configuration:
useEffect(() => {
const authenticateFeed = async (userId: string, userToken: string) => {
try {
const user = await sendbird.connect(userId, userToken);
setSendbirdUser(user);
} catch (error) {
console.log('Error authenticating user', error);
}
setIsLoading(false);
};
if (data?.user.id && data.token) {
setIsLoading(true);
authenticateFeed('3', MOCKED_USER_3_ACCESS_TOKEN);
}
}, [data]);
useEffect(() => {
const setupNotificationCollection = async () => {
const filterKeyNumber = FILTER_CATEGORIES[state.filterKey];
const filter = new MessageFilter();
filter.customTypesFilter = [`${filterKeyNumber}`];
const channel = await sendbird.feedChannel.getChannel(
'notification_50002_feed',
);
const collection = channel.createNotificationCollection({ filter });
collection.setMessageCollectionHandler(messageCollectionHandler);
collection
.initialize(
MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API,
)
.onApiResult((err, messages) => {
if (messages) {
dispatch({
type: 'UPDATE_NOTIFICATIONS',
payload: messages,
});
}
if (err) console.log('Error', err);
setIsLoadingNotifications(false);
});
console.log('Notifications initialized.');
};
if (sendbirdUser) {
setIsLoadingNotifications(true);
setupNotificationCollection();
}
// eslint-disable-next-line
}, [sendbirdUser, state.filterKey]);
Sendbird init and messageCollectionHandler is defined here:
export const sendbird = SendbirdChat.init({
appId: process.env.NEXT_PUBLIC_SENDBIRD_LOCAL_APP_ID ?? '',
modules: [new FeedChannelModule(), new GroupChannelModule()],
});
export const messageCollectionHandler: NotificationCollectionEventHandler = {
onChannelUpdated: (context, channel) => {},
onMessagesAdded: (context, channel, messages) => {
console.log('messages: ', messages);
const newMessages = messages.filter(
(message) => message.messageStatus === 'SENT',
);
if (newMessages.length !== 0) {
console.log('Messages added', newMessages);
toast(<ToastNotification message={newMessages[0]} />);
}
sendbird.feedChannel.refreshNotificationCollections();
},
onMessagesUpdated: (context, channel, messages) => {
sendbird.feedChannel.refreshNotificationCollections();
},
onMessagesDeleted: (context, channel, messageIds, messages) => {
console.log('Messages deleted', messages);
},
};
The only time that I seem to start getting real time notifications is when I dispatch a change to filterKey, which triggers the useEffect again. But I should be getting the notification before doing that as well…
Am I implementing it wrong? What is a right way to do that so that I can access the notifications through out the whole application if there is a user logged in, and receive real time notifications?
Thanks in advance.
Package versions:
“@sendbird/chat”: “^4.10.4”,
“next”: “13.4.11”,
“next-auth”: “^4.22.3”,
“react”: “18.2.0”,
