N
Novu3mo ago
Chaitra

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
Ask Inkeep
Ask Inkeep3mo ago
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 -----------------------------
Ask Inkeep
Ask Inkeep3mo ago
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.
Pawan Jain
Pawan Jain3mo ago
@Chaitra Are you using react notification center to display in-app notifications?
Pawan Jain
Pawan Jain3mo ago
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
Chaitra
Chaitra3mo ago
How to refresh the notification component once the success of any API?
Pawan Jain
Pawan Jain3mo ago
@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:-
const { refetch } = useNotifications()

const handleAPICall = async () => {
try {
const apiSuccessResponse = await callAPI()
if(apiSuccessResponse){
refetch()
}
} catch(e) {
// handle error here
}
}
const { refetch } = useNotifications()

const handleAPICall = async () => {
try {
const apiSuccessResponse = await callAPI()
if(apiSuccessResponse){
refetch()
}
} catch(e) {
// handle error here
}
}
Pawan Jain
Pawan Jain3mo ago
No description
Ask Inkeep
Ask Inkeep3mo ago
Got it. Tagging @Support for additional help.
Pawan Jain
Pawan Jain3mo ago
@Chaitra did you try above option?
Chaitra
Chaitra3mo ago
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 implementation
Pawan Jain
Pawan Jain3mo ago
I see you have not added refetch function in above code refetch function will fetch new notifications without refreshing the page.
Chaitra
Chaitra3mo ago
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
Pawan Jain
Pawan Jain3mo ago
@Chaitra Sorry, could you please share specific reason of not using useNotifications hook here? Because without this hook, this seems impossible
Chaitra
Chaitra3mo ago
I have used NovuProvider which is already providing the notifications
Pawan Jain
Pawan Jain3mo ago
Okay, Thanks for sharing. having useNotifications hook will not create any issue with NovuProvider
Chaitra
Chaitra3mo ago
But we can't use useNotifications outside the NovuProvider?
Novu_Bot
Novu_Bot3mo ago
@Chaitra, you just advanced to level 1!
Pawan Jain
Pawan Jain3mo ago
Yes it can be used inside NovuProvider only
Chaitra
Chaitra3mo ago
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.
Pawan Jain
Pawan Jain3mo ago
@Chaitra Thanks for the update Let me know if we can help with anything else 🙂
Chaitra
Chaitra3mo ago
Can we use markasRead hook instead of calling API?
Pawan Jain
Pawan Jain3mo ago
@Chaitra yes you can use this hook
Chaitra
Chaitra3mo ago
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
Pawan Jain
Pawan Jain3mo ago
@Chaitra I can see that here you used incorrect messageId messageId is of mongodb id type
Want results from more Discord servers?
Add your server
More Posts