feat: rename categories > category and topics > topic

[smeijer]

Breaking Change!

We've renamed the categories property to category and the topics property to topic, to reflect that these properties only support a single value. We haven't been supporting multiple categories or topics for a while now, and believe that renaming this property is the right thing to do. It requires a small change on your end, but the clear naming reduces the number of potential bugs caused by misunderstanding.

If you make use of different stores or tabs using the categories or topics properties, you'll need to rename them to their singular variants.

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

const stores = [
  { id: 'default', defaultQueryParams: {} },
  { id: 'unread', defaultQueryParams: { read: false } },
-  { id: 'billing', defaultQueryParams: { categories: ['billing'] } },
+  { id: 'billing', defaultQueryParams: { category: 'billing' } },
-  { id: 'support', defaultQueryParams: { topics: ['support'] } },
+  { id: 'support', defaultQueryParams: { topic: 'support' } },
];

const tabs = [
  { storeId: 'default', label: 'Latest' },
  { storeId: 'unread', label: 'Archive' },
  { storeId: 'billing', label: 'Billing' },
  { storeId: 'support', label: 'Issues' },
];

export default function Index() {
  return (
    <MagicBell
      apiKey="__MAGICBELL_API_KEY__"
      userEmail="__MAGICBELL_USER_EMAIL__"
      userKey="__MAGICBELL_USER_KEY__"
      stores={stores}
      defaultIsOpen
    >
      {(props) => <FloatingNotificationInbox height={450} tabs={tabs} {...props} />}
    </MagicBell>
  );
}

Likewise, when you filter notifications using our cli, you might need to change some arguments:

- magicbell user list notifications --topics support
+ magicbell user list notifications --topic support

- magicbell user notifications mark-all-read --topics billing
+ magicbell user notifications mark-all-read --topic billing

- magicbell user notifications mark-all-seen --topics other
+ magicbell user notifications mark-all-seen --topic other

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 30, 2024 9:44am

[pkg-pr-new]

commit: 98fb87a

@magicbell/cli

yarn add https://pkg.pr.new/@magicbell/cli@299

@magicbell/core

yarn add https://pkg.pr.new/@magicbell/core@299

@magicbell/embeddable

yarn add https://pkg.pr.new/@magicbell/embeddable@299

@magicbell/in-app

yarn add https://pkg.pr.new/@magicbell/in-app@299

magicbell

yarn add https://pkg.pr.new/magicbell@299

@magicbell/project-client

yarn add https://pkg.pr.new/@magicbell/project-client@299

@magicbell/magicbell-react

yarn add https://pkg.pr.new/@magicbell/magicbell-react@299

@magicbell/react-headless

yarn add https://pkg.pr.new/@magicbell/react-headless@299

@magicbell/user-client

yarn add https://pkg.pr.new/@magicbell/user-client@299

@magicbell/webpush

yarn add https://pkg.pr.new/@magicbell/webpush@299

Open in Stackblitz