badge not showing up at all when inbox tabs is used in react or javascript

[riteshbxr]

Here are sample Codes where I tried showing up unread count but unable to do so

• javascript: https://codesandbox.io/p/sandbox/sandpack-project-forked-hsh4ql
• React: https://codesandbox.io/p/sandbox/sandpack-project-forked-75jh7g

[riteshbxr]

Apart from this bug, This is what I had to try to achieve something around what I wanted. It should be supported by React SDK with just properties, Without this tabbed panels are not that useful

https://codesandbox.io/p/sandbox/sandpack-project-forked-lpdxns?file=%2FApp.tsx%3A20%2C60

[smeijer]

Hi,

Please change one of the storeIds to default, that should fix it for you. Here's a full example. I do agree it's not obvious, and a "default" id should either be documented or not necessary.

import MagicBell, {
  FloatingNotificationInbox,
} from "@magicbell/magicbell-react";

const stores = [
  { id: "default", defaultQueryParams: { seen: false } },
  { id: "unread", defaultQueryParams: { read: false } },
  { id: "all", defaultQueryParams: {} },
];

const tabs = [
  { storeId: "default", label: "Unread" },
  { storeId: "unseen", label: "UnSeen" },
  { storeId: "all", label: "All" },
];

export default function Index() {
  return (
    <MagicBell
      apiKey={…}
      bellCounter="unread"
      stores={stores}
    >
      {(props) => (
        <FloatingNotificationInbox height={450} tabs={tabs} {...props} />
      )}
    </MagicBell>
  );
}