ContextAPI on reactSDK

#1

Hello, thank you once again for the API. Great job!

As I said on chat I am trying to use the Context API: useMagicBellContext() and MagicBellProvider to retrieve users notifications, but nothiiing is comming from rootStore

const { rootStore } = useMagicBellContext();

If I use straight the MagicBell component, I get all the notifications as expected.

The code is this:

Father component

import { MagicBellProvider } from "@magicbell/magicbell-react";


function Notifications() {


    return (
        <MagicBellProvider
            apiKey={"df24a28e8921181f6c4220fc306ba76701592d21"}
            userEmail={"josue@supportbee.com"}
        >
            <MyNotificationInbox />
        </MagicBellProvider>
    );
}

Inner component:

import {  useMagicBellContext  } from "@magicbell/magicbell-react";


    function MyNotificationInbox() {
        const { rootStore } = useMagicBellContext();
        const classes = useStyles();
        const notifications = rootStore.get("default");
        console.log(notifications.total)
(...)

Maybe I am just messing somthing up, but I am stucked right here.

Thank you in advance.

#2

Hi tipmanager! It is possible that you are not observing changes in your custom component – export default observer(MyNotificationInbox);. Here you have a working example MagicBell-React custom list example - CodeSandbox.

Could you create an example in CodeSandbox so we can help you better, please?

#3

Thanks for your help,

#4

Thanks! The reason no notifications are displayed is because you didn’t fetch them. Make sure you fetch your notifications. For example, you can add

useEffect(() => {
  notifications.fetch();
}, []);

as shown here: MagicBell Custom (forked) - CodeSandbox

The NotificationList component simply renders items and fetches the next page when the user scrolls to the bottom. In contrast, the NotificationInbox component will fetch notifications for you when it is mounted. We’re going to document this behavior.

Please let us know if there’s anything else we can help with.

1 Like
#5

Perfect. It’s done, thank you.

#6

I want to add other issue.

useEffect(() => {
        notifications.fetch({ reset: true });
    }, []);

At least on my app it is not refetching the list reseting the previous one, it seems that the {reset: true} option is not working as expecting but loading the same list every time I made an action .

#7

Hi @tipmanager, please make sure to have the latest version of the react package. If the issue persists, could you create an example showing the bug in CodeSandbox, please?