Issue with useMagicBellEvent trigger

[harsh-kp]

Using useMagicBellEvent, it triggers the my callback twice with same data object - the id is also same.
OnNewNotification, is also tried, it is also called more than once

Here my exact code snippet,

Provide whole code also in the end

    const showPushNotification = (data: unknown, source?: any) => {
        const notificationBell = data as NotificationBell;
        console.log(notificationBell, "showPushNotification 197", notificationBell.isSeen, source, x);
        if (!notificationBell.isSeen) {
            audioRef.current = new Audio(reminderAudio);
            audioRef.current.addEventListener('canplaythrough', () => {
                audioRef.current?.play();
            });

            let reminder = notificationBell?.recipient?.customAttributes as IReminder;
            notification.open({
                message: <CustomNotificationToast reminder={reminder} />,
                key: notificationBell.recipient.customAttributes?._id,
                placement: 'topRight',
                btn,
                duration: 8,
            })
        }
    }
    useMagicBellEvent('notifications.new', showPushNotification);

I am using this like this ^^

If it helps ->

Whole code

import React from 'react';
import MagicBell, {
    FloatingNotificationInbox,
    INotification,
    IRemoteNotification,
    useMagicBellEvent,
} from '@magicbell/magicbell-react';
import { GoBell } from "react-icons/go";

interface NotificationBell {
    id: string;
    recipient: {
        id: string;
        externalId: string;
        customAttributes?: IReminder;
    };
    title: string;
    content: string | null;
    actionUrl: string | null;
    category: string;
    topic: string | null;
    // customAttributes?: Record<string, any> | null;
    // metaData?: Record<string, any> | null;
    sentAt: number;
    seenAt: number | null;
    readAt: number | null;
    archivedAt: number | null;
    isSeen?: any;
}

interface Props {
    userEmail: string;
}

const MagicBellSetup: React.FC<Props> = ({ userEmail }) => {

    let x = 0;

    const showPushNotification = (data: unknown, source?: any) => {
        const notificationBell = data as NotificationBell;
        x += 1;
        console.log(data, "showPushNotification 197", notificationBell.isSeen, source, x);
    }
    useMagicBellEvent('notifications.new', showPushNotification);

    const handleOnNewNotification = (notificationBell: IRemoteNotification) => {
        console.log(notificationBell, " last");
    }

    return (
        <>
            <MagicBell
                apiKey={import.meta.env.VITE_MAGIC_BELL_API_KEY} // eslint-disable-line
                userExternalId={`${userEmail ?? ''}`}
                BellIcon={<GoBell />}
                theme={{ icon: { borderColor: '#000' } }}
            // onNewNotification={handleOnNewNotification}
            >
                {(props) => (
                    <FloatingNotificationInbox
                        onNotificationClick={(notification: INotification) => {
                            void notification.markAsRead();
                            const actionUrl = notification?.actionUrl;
                            if (
                                notification?.title &&
                                !notification?.title.includes(
                                    'File Prepared for Out of Stock Products' // todo
                                )
                            ) {
                                void notification.delete();
                                if (actionUrl) {
                                    window.open(actionUrl, '_self')?.focus();
                                }
                            }
                        }}
                        height={600}
                        width={500}
                        // NotificationItem={MagicBellCustomNotificationItem}
                        {...props}
                    />
                )}
            </MagicBell>
        </>
    )
}

export default MagicBellSetup;

[smeijer]

Hi @harsh-kp ,

Is it invoked twice in development mode, or do you experience the same problem in production?

[harsh-kp]

In development mode, while testing on my local

[smeijer]

I've tried to reproduce your issue, but the hooks are just called once in my case. Are you able to create and share a small reproduction?

Here is a video where you see the code (removed unrelated parts) you shared earlier, and the result in three browsers. Chrome, Firefox, and Safari. You see that all browsers log only one hook call.

no-second-calls.mp4