wasabi Posts - Answer Overflow

wasabi

Posts Comments

NNovu

•Created by wasabi on 3/12/2025 in #💬│support

React: Tabs won't show up when popover has managed state

2 replies

NNovu

•Created by wasabi on 3/5/2025 in #💬│support

Q: Is it possible to get unread count (total and per tab)?

I have this application using the @novu/react. Is it possible to get the total unread count for each tab (and total between all)?

8 replies

NNovu

•Created by wasabi on 3/3/2025 in #💬│support

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?

13 replies

NNovu

•Created by wasabi on 3/3/2025 in #💬│support

what's up with your docs?

They are as of right now very innacurate. First of, I'm trying to solve an issue and the only place I can go, naturally, is the documentation at docs.novu.co. Yet, it says one thing and the implementation (specifically @novu/react) it's a very different one. Consider the following example: https://docs.novu.co/platform/sdks/react/hooks/use-counts This documentation on the use of the useCount hook in the @novu/react package mentions the return value of the hook being

type CountsReturn = {
  data: {
    unreadCount: number;
    unseenCount: number;
    total: number;
  };
  isLoading: boolean;
  error: Error | null;
  refetch: () => void;
};

type CountsReturn = {
  data: {
    unreadCount: number;
    unseenCount: number;
    total: number;
  };
  isLoading: boolean;
  error: Error | null;
  refetch: () => void;
};

When actually, it's

type UseCountsResult = {
    counts?: Count[];
    error?: NovuError;
    isLoading: boolean;
    isFetching: boolean;
    refetch: () => Promise<void>;
};

type UseCountsResult = {
    counts?: Count[];
    error?: NovuError;
    isLoading: boolean;
    isFetching: boolean;
    refetch: () => Promise<void>;
};

So either there's something i'm missing or you guys should update the documentation.

6 replies

Gaming

Programming