Novu•2mo ago

Unable to use <InboxContent> and <Notifications> components

Hey folks! (cc: @Pawan Jain ) If I just use the Novu <Inbox> component all the events and actions for clicking on a notification etc. works as expected in the popover. If I use the <Bell> component in my header and either the InboxContent or Notifications component in my custom popover the notifications and all the UI elements render correctly but then none of the events and actions work anymore when clicked. I even tried using custom event handling but the handler never fires even if I just try to console.log(notification.id)

<InboxContent 
  onNotificationClick={(notification) => {
    // your logic to handle notification click
    console.log(notification.id) // DOES NOT WORK
  }}
  onPrimaryActionClick={(notification) => {
    // your logic to handle primary action click
    console.log(notification.id) // DOES NOT WORK
  }}
  onSecondaryActionClick={(notification) => {
    // your logic to handle secondary action click
    console.log(notification.id) // DOES NOT WORK
  }}

<InboxContent 
  onNotificationClick={(notification) => {
    // your logic to handle notification click
    console.log(notification.id) // DOES NOT WORK
  }}
  onPrimaryActionClick={(notification) => {
    // your logic to handle primary action click
    console.log(notification.id) // DOES NOT WORK
  }}
  onSecondaryActionClick={(notification) => {
    // your logic to handle secondary action click
    console.log(notification.id) // DOES NOT WORK
  }}

14 Replies

ShriOP•2mo ago

The child react components of the Inbox component, other than the Bell, do not seem to be receiving any state updates with regards to read/unread status, new notifications coming in either.

Dima Grossman•2mo ago

@Shri could you share the full snippet including the <Inbox /> wrapper?

ShriOP•2mo ago

Hey @Dima Grossman thank you for looking into it. Here is a demo page I created that has the issue: https://dev.preprod.leftovers.today/testnovu2 There is both the plain <Inbox /> itself and then an <Inbox /> wrapper with a <Bell /> which when clicked opens <InboxContent /> in a custom popover.

Leftovers.today Food rescue, simplified

ShriOP•2mo ago

Here is the source code as well. You can use the links at the bottom to trigger an in-app notification and you will see both the Bell icons update, but the content in the custom popover does not update and none of the onclick actions work in the custom popover

ShriOP•2mo ago

testnovu2.tsx

ShriOP•2mo ago

Please let me know if there’s a time you prefer to debug over a virtual call, happy to set one up

Dima Grossman•2mo ago

It might be related to the duplicate <Inbox /> instances you have on your page. Let me check that with the team

ShriOP•2mo ago

Hey @Dima Grossman , Actually even if I have a single inbox instance and I open the page on 2 different machines, update the unread count on one, the bell icon updates on the other machine, but the list of notifications does not change

ShriOP•2mo ago

Check out my other test route: https://dev.preprod.leftovers.today/customNovu

Leftovers.today Food rescue, simplified

ShriOP•2mo ago

I had to do my own useEffect handling to update the list of notifications visible to show read/unread and remove an item from the list if its archived. This version I can have it open on 2 different machines, an iPad and 2 phones and they all perfectly sync up when the read/unread status changes or an item is archived/unarchived

Novu_Bot•2mo ago

@Shri, you just advanced to level 4!

ShriOP•2mo ago

Basically I think there is an issue with the NotificationsList component, its useEffect is not handling changes to the count of read/unread and count of archive/unarchive to update the list. This is also separate from the main issue where using a NotificationList component inside the Inbox tag makes all the buttons and actions stop working

Dima Grossman•2mo ago

Could you also try to use those callbacks on the Inbox component instead of InboxContent?

  onNotificationClick={(notification) => {
    // your logic to handle notification click
    console.log(notification.id) // DOES NOT WORK
  }}
  onPrimaryActionClick={(notification) => {
    // your logic to handle primary action click
    console.log(notification.id) // DOES NOT WORK
  }}
  onSecondaryActionClick={(notification) => {
    // your logic to handle secondary action click
    console.log(notification.id) // DOES NOT WORK
  }}

  onNotificationClick={(notification) => {
    // your logic to handle notification click
    console.log(notification.id) // DOES NOT WORK
  }}
  onPrimaryActionClick={(notification) => {
    // your logic to handle primary action click
    console.log(notification.id) // DOES NOT WORK
  }}
  onSecondaryActionClick={(notification) => {
    // your logic to handle secondary action click
    console.log(notification.id) // DOES NOT WORK
  }}

ShriOP•2mo ago

I did and I get an error saying that property does not exist on Inbox

Gaming

Programming

Unable to use <InboxContent> and <Notifications> components