Mark All As read functionality using custom footer
I am using /read API to make all the notifications to mark as read.
The API is getting successfull. But the UI is not getting updated till I refresh the page.
Is there any other way to make this possible?
24 Replies
Hi @Chaitra, I'm an AI assistant for Novu. While a team member reviews this question, I'll look through relevant sources and see if I can provide suggestions.
-----------------------------
While I generate an answer, here are some sources that might be helpful:
* API Reference
* How to use Headless Notification Center
* Headless API Reference
* Feature: add
markAsRead markAllUnreadAsRead & markAllUnseenAsSeen in @novu/node
-----------------------------Answer
To address the issue where the UI does not update until you refresh the page after using the
/read API to mark all notifications as read, you can consider implementing real-time UI updates on the client side. While the direct solution to your query isn't explicitly covered in the provided documents, you can leverage the Novu client library functionalities to achieve this.
For instance, in a React application, after successfully calling the /read API on your server side, you can use the markAllNotificationsAsRead method from the Novu client library to update the UI state in real-time without requiring a page refresh (1) .
Please ensure to synchronize the state properly between your server-side API call and the client-side state update to ensure consistency.@Chaitra
Are you using react notification center to display in-app notifications?
If you are using react, you can build custom footer component and use this hook to mark all notification as read.
https://docs.novu.co/notification-center/client/react/api-reference#usemarknotificationsas
How to refresh the notification component once the success of any API?
@Chaitra
You can use
refetch method of useNotifications hook to refresh the notifications on success of any api call or action like button click
https://docs.novu.co/notification-center/client/react/api-reference#usenotifications
Example:-
Got it. Tagging @Support for additional help.
@Chaitra did you try above option?
const CustomFooter = ({ onMarkAsRead }) => {
const markAllAsRead = async () => {
try {
await axios.post(
${serviceUrl}/notifications/v1/widgets/messages/read,
{},
{
headers: {
Authorization: Bearer ${bearerToken}
}
}
);
onMarkAsRead();
window.location.href = window.location.href;
} catch (error) {
console.error("Error marking notifications as read:", error);
}
};
This is how I have implemented the custom footer and calling the /read API
after that I am manually refreshing the page to update the UI,
I just want to avoid that and update the notifications in real time.
Please help me with the implementationI see you have not added refetch function in above code
refetch function will fetch new notifications without refreshing the page.
I have not used any hook here,
So that I am not able to refetch.
const CustomFooter = ({ onMarkAsRead }) => {
const queryClient = useQueryClient();
const markMessagesAsRead = async () => {
await axios.post(
${serviceUrl}/notifications/v1/widgets/messages/read,
{},
{
headers: {
Authorization: Bearer ${bearerToken}
}
}
);
};
const mutation = useMutation(markMessagesAsRead, {
onSuccess: () => {
queryClient.invalidateQueries(['messages']);
}
});
const handleClick = () => {
mutation.mutate();
};
return (
<div className="flex justify-between items-center px-4 py-2">
<div></div> {/* Add an empty div to push the button to the right */}
<button className="justify-end align-bottom text-xs underline" onClick={handleClick}>mark all read</button>
</div>
);
};
this is also not working@Chaitra
Sorry, could you please share specific reason of not using
useNotifications hook here?
Because without this hook, this seems impossibleI have used NovuProvider which is already providing the notifications
Okay, Thanks for sharing.
having useNotifications hook will not create any issue with NovuProvider
But we can't use useNotifications outside the NovuProvider?
@Chaitra, you just advanced to level 1!
Yes it can be used inside NovuProvider only
I have NovuProvider component inside my Notification component, hence I am not able to use the useNotifications hook insider the NovuProvider.
so facing the issue. Is there any other way to re-render to notifications using mutation
Thank you for the responses. It worked.
@Chaitra
Thanks for the update
Let me know if we can help with anything else 🙂
Can we use markasRead hook instead of calling API?
@Chaitra
yes you can use this hook
The API is throwing Error 500 when I use useMarkNotificationsAs hook to mark as read
Passing this
markNotificationsAs({
seen: true,
read: true,
messageId: "all"
});
and markAs API is getting failed
Please help to resolve it
@Chaitra
I can see that here you used incorrect
messageId
messageId is of mongodb id type