Schyres Comments - Answer Overflow

Schyres

Posts Comments

NNovu

•Created by Jauhari on 6/28/2024 in #💬│support

How to get a notifications list by feed on react app

Hello @Support , would you mind checking on the issue? Thank you!

35 replies

NNovu

•Created by Jauhari on 6/28/2024 in #💬│support

How to get a notifications list by feed on react app

Here's the code that I use,

function Header() {
    return (
        <>
            <div className='bell'>
                <NovuProvider
                    subscriberId='test-user'
                    applicationIdentifier='TMzA0y68sGZG'
                    backendUrl='http://localhost:3000'
                    subscriberHash='c61c7477ee658ad190bd3aa88d35fa8e863562b4e181792ae8757e8b847d4f91'
                >
                    <Notification />
                </NovuProvider>
            </div>
        </>
    );
}

function Notification() {
    const { data: govmartNotifications } = useFetchNotifications({
        query: { feedIdentifier: "govmart", limit: 10 }
    });

    const { data: triggerNotifications } = useFetchNotifications({
        query: { feedIdentifier: "trigger", limit: 10 }
    });

    console.log(">> govmart", govmartNotifications)
    console.log(">> trigger", triggerNotifications)

    return (
        <>
            <h1>v0.24.2</h1>
            <PopoverNotificationCenter>
                {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
            </PopoverNotificationCenter>
        </>
    )
}

function Header() {
    return (
        <>
            <div className='bell'>
                <NovuProvider
                    subscriberId='test-user'
                    applicationIdentifier='TMzA0y68sGZG'
                    backendUrl='http://localhost:3000'
                    subscriberHash='c61c7477ee658ad190bd3aa88d35fa8e863562b4e181792ae8757e8b847d4f91'
                >
                    <Notification />
                </NovuProvider>
            </div>
        </>
    );
}

function Notification() {
    const { data: govmartNotifications } = useFetchNotifications({
        query: { feedIdentifier: "govmart", limit: 10 }
    });

    const { data: triggerNotifications } = useFetchNotifications({
        query: { feedIdentifier: "trigger", limit: 10 }
    });

    console.log(">> govmart", govmartNotifications)
    console.log(">> trigger", triggerNotifications)

    return (
        <>
            <h1>v0.24.2</h1>
            <PopoverNotificationCenter>
                {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
            </PopoverNotificationCenter>
        </>
    )
}

Is there anything I did wrong in the code?

35 replies

NNovu

•Created by Jauhari on 6/28/2024 in #💬│support

How to get a notifications list by feed on react app

35 replies

NNovu

•Created by Schyres on 9/29/2023 in #💬│support

In-app notification: Unseen count for selected feeds

Hi @Pawan Jain, I tried looking for it but i can't find anything related to unseen count in the return type for status success,

{
    refetch: <TPageData>({ page, ...otherOptions }?: {
        page?: number;
    } & import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) => void;
    data: import("@tanstack/react-query").InfiniteData<IPaginatedResponse<IMessage>>;
    error: null;
    isError: false;
    isLoading: false;
    isLoadingError: false;
    isRefetchError: false;
    isSuccess: true;
    status: "success";
    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IPaginatedResponse<IMessage>, Error>>;
    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IPaginatedResponse<IMessage>, Error>>;
    hasNextPage?: boolean;
    hasPreviousPage?: boolean;
    isFetchingNextPage: boolean;
    isFetchingPreviousPage: boolean;
    dataUpdatedAt: number;
    errorUpdatedAt: number;
    failureCount: number;
    failureReason: Error;
    errorUpdateCount: number;
    isFetched: boolean;
    isFetchedAfterMount: boolean;
    isFetching: boolean;
    isInitialLoading: boolean;
    isPaused: boolean;
    isPlaceholderData: boolean;
    isPreviousData: boolean;
    isRefetching: boolean;
    isStale: boolean;
    remove: () => void;
    fetchStatus: import("@tanstack/react-query").FetchStatus;
}

{
    refetch: <TPageData>({ page, ...otherOptions }?: {
        page?: number;
    } & import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) => void;
    data: import("@tanstack/react-query").InfiniteData<IPaginatedResponse<IMessage>>;
    error: null;
    isError: false;
    isLoading: false;
    isLoadingError: false;
    isRefetchError: false;
    isSuccess: true;
    status: "success";
    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IPaginatedResponse<IMessage>, Error>>;
    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IPaginatedResponse<IMessage>, Error>>;
    hasNextPage?: boolean;
    hasPreviousPage?: boolean;
    isFetchingNextPage: boolean;
    isFetchingPreviousPage: boolean;
    dataUpdatedAt: number;
    errorUpdatedAt: number;
    failureCount: number;
    failureReason: Error;
    errorUpdateCount: number;
    isFetched: boolean;
    isFetchedAfterMount: boolean;
    isFetching: boolean;
    isInitialLoading: boolean;
    isPaused: boolean;
    isPlaceholderData: boolean;
    isPreviousData: boolean;
    isRefetching: boolean;
    isStale: boolean;
    remove: () => void;
    fetchStatus: import("@tanstack/react-query").FetchStatus;
}

4 replies

Gaming

Programming