Novu•2w ago

Bell count and count next to tab name it's not updating

Consider the following setup:

import { Inbox as NovuInbox } from "@novu/react";
import { useUser } from "@subrik_hooks";
import React from "react";
import { CustomNotificationBell } from "./CustomBell";
import { CustomNotificationItem } from "./NotificationItem";
import { novuInboxAppereance, novuInboxLocalization } from "./utils";

const NOVU_APP_ID = process.env.REACT_APP_NOVU_APP_ID;
const NOVU_API_URL = process.env.REACT_APP_NOVU_API_URL;

export const Inbox = (): React.ReactElement => {
    const { userInfo } = useUser();

    return (
        <NovuInbox
            backendUrl={NOVU_API_URL}
            applicationIdentifier={NOVU_APP_ID || ""}
            subscriberId={userInfo?.public_id || ""}
            localization={novuInboxLocalization}
            appearance={novuInboxAppereance}
            placement={"bottom-end"}
            tabs={[
                { label: "General", filter: { tags: ["instances"] } },
                { label: "Mensajes", filter: { tags: ["chat"] } },
            ]}
            renderBell={(unreadCount) => (
                <CustomNotificationBell unreadCount={unreadCount} />
            )}
            renderNotification={(notification) => (
                <CustomNotificationItem notification={notification} />
            )}
        />
    );
};

import { Inbox as NovuInbox } from "@novu/react";
import { useUser } from "@subrik_hooks";
import React from "react";
import { CustomNotificationBell } from "./CustomBell";
import { CustomNotificationItem } from "./NotificationItem";
import { novuInboxAppereance, novuInboxLocalization } from "./utils";

const NOVU_APP_ID = process.env.REACT_APP_NOVU_APP_ID;
const NOVU_API_URL = process.env.REACT_APP_NOVU_API_URL;

export const Inbox = (): React.ReactElement => {
    const { userInfo } = useUser();

    return (
        <NovuInbox
            backendUrl={NOVU_API_URL}
            applicationIdentifier={NOVU_APP_ID || ""}
            subscriberId={userInfo?.public_id || ""}
            localization={novuInboxLocalization}
            appearance={novuInboxAppereance}
            placement={"bottom-end"}
            tabs={[
                { label: "General", filter: { tags: ["instances"] } },
                { label: "Mensajes", filter: { tags: ["chat"] } },
            ]}
            renderBell={(unreadCount) => (
                <CustomNotificationBell unreadCount={unreadCount} />
            )}
            renderNotification={(notification) => (
                <CustomNotificationItem notification={notification} />
            )}
        />
    );
};

If I mark a notification as read/unread/archived, the count will not update (apparently the entire component (inbox and bell) it's re-rendered, yet, count it's not refetched? If this is intended behavior, how can i refetch the count?

8 Replies

Pawan Jain•2w ago

@wasabi Can you share the implementation of <CustomNotificationItem notification={notification} /> ?

wasabiOP•2w ago

Sure,

import { Notification as NovuNotification } from "@novu/react";

type CustomNotificationListProps = {
    notifications: NovuNotification[];
    isLoading: boolean;
    onNotificationRead?: (notification: NovuNotification) => void;
};

export const CustomNotificationList = ({
    notifications,
    isLoading,
    onNotificationRead,
}: CustomNotificationListProps): React.ReactElement => {
    const handleOnClick = (notification: NovuNotification): void => {
        void notification.read();
    };

    return (
        <div>
            {notifications.map((notification) => (
                <div onClick={(): void => handleOnClick(notification)}>
                    {notification.subject}
                </div>
            ))}
        </div>
    );
};

import { Notification as NovuNotification } from "@novu/react";

type CustomNotificationListProps = {
    notifications: NovuNotification[];
    isLoading: boolean;
    onNotificationRead?: (notification: NovuNotification) => void;
};

export const CustomNotificationList = ({
    notifications,
    isLoading,
    onNotificationRead,
}: CustomNotificationListProps): React.ReactElement => {
    const handleOnClick = (notification: NovuNotification): void => {
        void notification.read();
    };

    return (
        <div>
            {notifications.map((notification) => (
                <div onClick={(): void => handleOnClick(notification)}>
                    {notification.subject}
                </div>
            ))}
        </div>
    );
};

Pawan Jain•2w ago

@wasabi You shared CustomNotificationList Can you please share the implementation of <CustomNotificationItem /> insteaad

wasabiOP•2w ago

Oh, i'm sorry. My bad. @Pawan Jain

import { Notification as NovuNotification } from "@novu/react";

type NotificationItemProps = {
    notification: NovuNotification;
};

export const CustomNotificationItem = ({
    notification: notificationInfo,
}: NotificationItemProps): React.ReactElement => {
    const handleOnClick = (): void => {
            void notificationInfo.read();
    };
    return (
        <div>
            {notificationInfo.subject}
            <button onClick={handleOnClick}>mark as read</button>
        </div>
    );
};

import { Notification as NovuNotification } from "@novu/react";

type NotificationItemProps = {
    notification: NovuNotification;
};

export const CustomNotificationItem = ({
    notification: notificationInfo,
}: NotificationItemProps): React.ReactElement => {
    const handleOnClick = (): void => {
            void notificationInfo.read();
    };
    return (
        <div>
            {notificationInfo.subject}
            <button onClick={handleOnClick}>mark as read</button>
        </div>
    );
};

Pawan Jain•4d ago

@wasabi If you are self hosting novu, add socket url also as Inbox props <NovuInbox backendUrl={NOVU_API_URL} socketUrl="your_custom_self_host_url_for_ws_service" /> @wasabi ping!

wasabiOP•2d ago

Where can I see the docs on this socketUrl implementation? Should I use the same url as backendUrl? @Pawan Jain I guess my specific question is, when self hosting novu, how to setup websocket url?

Pawan Jain•2d ago

it is the base url of your ws service default url is

http://localhost:3002

http://localhost:3002

wasabiOP•2d ago

Thank you, @Pawan Jain , that was my issue. Everything works now, I'm glad you helped me. PS: the useCount post i created at https://discord.com/channels/895029566685462578/1346961569216462988, still not working, i'm willing to help on that or submit a PR.

Gaming

Programming

Bell count and count next to tab name it's not updating

Did you find this page helpful?