CODEWITHSUNDEEP
typescriptwebsocketnotificationsnovu
The Code Crusader
The Code Crusader

Reputation: 33

Fetching notifications on socket event

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?

Upvotes: 0

Views: 223

Answers (1)

Two Horses
Two Horses

Reputation: 1702

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);
      });
    }
}

Upvotes: 0

Related Questions