Issues with react component

[RuslanHryn]

we are currently evaluating the usage of MagicBell and found a few issues in your react component.

1. The bell counter is not working when no tab with all messages

For example. we have multiple categories: common, maintenance, and billing, and display them in separate tabs.
In this case, the bell counter will not be displayed at all.

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  stores={[
    { id: 'general', defaultQueryParams: { categories: ['common', 'maintenance'] } },
    { id: 'billing', defaultQueryParams: { categories: ['billing'] } },
  ]}
  defaultIsOpen
>
  {(props) => (
    <FloatingNotificationInbox
      height={350}
      tabs={[
        { storeId: 'general', label: 'General' },
        { storeId: 'billing', label: 'Billing' },
      ]}
      {...props}
    />
  )}
</MagicBell>

To workaround this issue, we can add an additional tab to display messages from all categories:
{ id: 'all', defaultQueryParams: { categories: ['common', 'maintenance, 'billing'] } },

2. Seen/Read all button do not work if using tabs and categories

Example of source code

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  stores={[
    { id: 'all', defaultQueryParams: { categories: ['common', 'maintenance, 'billing'] } },
    { id: 'general', defaultQueryParams: { categories: ['common', 'maintenance'] } },
    { id: 'billing', defaultQueryParams: { categories: ['billing'] } },
  ]}
  defaultIsOpen
>
  {(props) => (
    <FloatingNotificationInbox
      height={350}
      tabs={[
        { storeId: 'all', label: 'All' },
        { storeId: 'general', label: 'General' },
        { storeId: 'billing', label: 'Billing' },
      ]}
      {...props}
    />
  )}
</MagicBell>

Steps to reproduce:

1. send new notification
2. open notifications
3. refresh the page
   Actual: all messages became unread again after refreshing the page

Steps to reproduce

1. send new notification
2. click on Read All button
3. refresh the page
   Actual: all messages became unread again after refreshing the page

It looks like the problem in the following requests

POST
https://api.magicbell.com/notifications/seen?categories=common%2Cmaintenance%2Cbilling
Response code 204

POST
https://api.magicbell.com/notifications/read?categories=common%2Cmaintenance%2Cbilling
Response code 204

and after the notification endpoint returns the messages without seen_at and read_at fields
https://api.magicbell.com/notifications?categories=common%2Cmaintenance%2Cbilling&page=1

"sent_at": 1715593941,
"seen_at": null,
"read_at": null,
"archived_at": null

[smeijer]

Hi @RuslanHryn ,

The default BellCounter is connected to a store with id default. When you change one of the store ids to default, that problem disappears. Alternatively, you can implement your own counter using the components and hooks we expose in the react package.

I've been able to confirm the issue regarding marking multiple categories as 'read'. I'll take it to the team. Every mark-as-read operation that doesn't include multiple categories, works as expected.