Ability to select sort order of notification categories

[FINDarkside]

We have 3 channels in our site, which one of is the most important one (our own content). It has been the first option in the settings since we started using MagicBell, but after updating to the newest version, it now seems to be the last. Probably caused by #370
I think it would be helpful to have some way to order them. Adding some sort of sort prefix to the categories is possible, although then changing the order would require migrating user notification preferences and other code changes. So some feature to decide the order would be nice.

[smeijer]

Hi,

We indeed fixed something in magicbell/magicbell-js#370, as the category/channels order changed when the user was updating them.

However, customizing the order is already supported. Please see the show preference for specific categories section in our docs for more about this.

The inbox component accepts custom preferences component via the NotificationPreferences property. You can create something entirely custom, or wrap our NotificationPreferences component, like below.

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

function MyNotificationPreferences() {
  return <NotificationPreferences channels={['email']} categories={['announcements', 'billing']} />;
}

function App() {
  return (
    <MagicBell apiKey="024b…0bd" userEmail="[email protected]">
      {(props) => (
        <FloatingNotificationInbox height={450} NotificationPreferences={MyNotificationPreferences} {...props} />
      )}
    </MagicBell>
  );
}

If you prefer not to hard-code the categories and channels, but just like to apply custom sorting, you can pair it with the useNotificationPreferences hook, like:

import MagicBell, { NotificationPreferences, useNotificationPreferences } from '@magicbell/magicbell-react';

function MyNotificationPreferences() {
  // note that `preferences.categories` is an empty array on first render
  const preferences = useNotificationPreferences();

  // sort & filter these two as you seem fit
  const categories = preferences.categories.map((x) => x.slug);
  const channels = preferences.categories[0]?.channels.map((x) => x.slug);

  return <NotificationPreferences channels={channels} categories={categories} />;
}

Hope this helps.