Chaitra
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
Passing this
markNotificationsAs({
seen: true,
read: true,
messageId: "all"
});
and markAs API is getting failed
Please help to resolve it
30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
The API is throwing Error 500 when I use useMarkNotificationsAs hook to mark as read
30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
Can we use markasRead hook instead of calling API?
30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
Thank you for the responses. It worked.
30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
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
30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
But we can't use useNotifications outside the NovuProvider?
30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
I have used NovuProvider which is already providing the notifications
30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
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 working30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
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 implementation30 replies
NNovu
•Created by Chaitra on 4/22/2024 in #💬│support
Mark All As read functionality using custom footer
How to refresh the notification component once the success of any API?
30 replies