Fetching notifications on socket event

Question

How can I set up a Mantine popup notification to be displayed when a new notification is received from Novu?

Here is what I'm trying to do (code below):

const { socket: novuSocket } = useSocket();
  const { notifications, refetch, markAsSeen } = useNotifications();

  const handleNewNotification = async () => {
    await refetch();
    console.log(notifications)
    notifications.forEach((n) => {
      showNotification({
        id: n._id,
        title: 'New Notification',
        message: `${n.content}`,
        autoClose: false,
        onClose: ({ id }) => {
          markAsSeen(id);
        }
      })
    })
  }

  useEffect(() => {
    if (novuSocket) {
      novuSocket.on('unseen_count_changed', async (data) => {
        console.log(data);
        handleNewNotification();
      });
    }

    return () => {
      if (novuSocket) {
        novuSocket.off('unseen_count_changed');
      }
    }
  }, [novuSocket])

Yet when I log out of the notifications, it's just an empty array, even after the refetch() call. Any ideas?

Answer 1

useNotifications().notifications returns the currently displayed notifications, which in your case is always empty (assuming you don't show notifications in other components).

Also, it doesn't make sense to use forEach on the currently displayed notifications.

You just directly show the notification with showNotification:

const handleNewNotification = async (notificationData: any) => {
    await refetch();
    showNotification({
      id: notificationData._id,
      title: 'New Notification',
      message: `${notificationData.content}`,
      autoClose: false,
      onClose: ({ id }) => {
        markAsSeen(id);
      }
    })
  })
}

useEffect(() => {
    if (novuSocket) {
      novuSocket.on('unseen_count_changed', async (data) => {
        console.log(data);
        handleNewNotification(data);
      });
    }
}