Novu•3y ago

Fetching notifications on socket event

What I'm trying to do is get a Mantine popup notification when I get a new Notification from Novu. Here is what I'm trying to do (code below). Yet when I log out the notifications, it's just an empty array, even after the refetch() call. Any ideas?

  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])

  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])

7 Replies

Support•3y ago

Thanks for posting, one of the @Moderator or @Support will address the matter as soon as possible 🙇‍♂️

turtles•3y ago

I had a go at this for a quick prototype. I had to use an extra useEffect before I could get a toast notification popping up

    const { socket } = useSocket();

    const { notifications, fetching, markAsSeen, refetch } = useNotifications();

    useEffect(() => {
        if (!fetching) {
            notifications.forEach((message) => {
                if (!message.seen) {
                    console.log(message._id, "Not Seen")
                    // show toast/notification 
                    markAsSeen(message._id).then(() => console.log("marked as seen"))
                }
            })
        }
    },[notifications, markAsSeen, fetching]);

    useEffect(() => {
        if (socket) {
            socket.on('unseen_count_changed', (data) => {
                if (!fetching) {
                    refetch().then(() => {
                        console.log('refetch complete')
                    })
                }
            });
        }
        return () => {
            if (socket) {
                socket.off('unseen_count_changed');
            }
        };
    }, [socket, refetch, fetching]);

    const { socket } = useSocket();

    const { notifications, fetching, markAsSeen, refetch } = useNotifications();

    useEffect(() => {
        if (!fetching) {
            notifications.forEach((message) => {
                if (!message.seen) {
                    console.log(message._id, "Not Seen")
                    // show toast/notification 
                    markAsSeen(message._id).then(() => console.log("marked as seen"))
                }
            })
        }
    },[notifications, markAsSeen, fetching]);

    useEffect(() => {
        if (socket) {
            socket.on('unseen_count_changed', (data) => {
                if (!fetching) {
                    refetch().then(() => {
                        console.log('refetch complete')
                    })
                }
            });
        }
        return () => {
            if (socket) {
                socket.off('unseen_count_changed');
            }
        };
    }, [socket, refetch, fetching]);

dr.reallyOP•3y ago

thanks! i'll give this a try in the morning 🙂

Pawan Jain•3y ago

Hi @dr.really Let me know in this thread if you face any issue. I will be happy to help

dr.reallyOP•3y ago

This worked like a charm! Sorry I got side tracked lol

Pawan Jain•3y ago

Thanks 🙏🏻 @turtles for help.

dr.reallyOP•3y ago

Big thank you to @turtles indeed

Gaming

Programming

Fetching notifications on socket event

Did you find this page helpful?