Add function to manage the notifications to react component

[RuslanHryn]

It would be nice to have a function that will be triggered when new notification/notifications arrive to change the order of notifications or filter out old notifications etc.

So the function should be invoked when new notifications are made, but before rendering notifications on UI
Input parameter is all received notifications and the function returns notifications that should be shown on UI
(notifications) => notifications

This function will allow adding some custom logic to pre-process notifications. For example, re-order the notification to implement priority of messages or filter out old notifications

[smeijer]

Hi Ruslan,

I can see how this would be useful, but it would take some time to implement. Have you also tried our react-headless SDK? Is that something you could use to solve your needs?

The useNotifications hook is reactive to store updates, so I'm thinking something in the line of:

import { useNotifications } from '@magicbell/react-headless';

function Notifications() {
  const store = useNotifications();
  const notifications = store.notifications
    .sort((a, b) => /* priority sorting */)
    .filter(n => /* filter out some */)
  );

  return <YourInbox notifications={notifications} />
}

Granted, though you can reuse some of our React components, you will need to recreate the UI.

In the meanwhile, I'll give your request some thought on how & when we could implement it.

[RuslanHryn]

@smeijer Thanks.
you are right that I can use useNotifications
But can I reuse the source code of the component according to your license?

[smeijer]

Yes, you're free to copy and modify our react components for your needs. Generally speaking, we have no restrictions to using our code when you're a magicbell customer.

We might have some restrictions if you're using our components to build something for a competing service. I suggest to schedule a call to talk things trough if that's the case.

cc @unamashana