Repository: novuhq/novu
File: packages/react/src/hooks/useNotifications.ts (TypeScript)

Code before:
import { isSameFilter, ListNotificationsResponse, Notification, NotificationFilter, NovuError } from '@novu/js';
import { useEffect, useRef, useState } from 'react';
import { useNovu } from './NovuProvider';

/**
 * Props for the useNotifications hook.
 *
 * @example
 * ```tsx
 * // Get unread notifications
 * const { notifications } = useNotifications({
 *   read: false
 * });
 *
 * // Get unseen notifications with specific tags
 * const { notifications } = useNotifications({
 *   seen: false,
 *   tags: ['important']
 * });
 *
 * // Get seen but unread notifications
 * const { notifications } = useNotifications({
 *   seen: true,
 *   read: false
 * });
 * ```
 */
export type UseNotificationsProps = {
  tags?: string[];
  data?: Record<string, unknown>;
  read?: boolean;
  archived?: boolean;
  snoozed?: boolean;
  seen?: boolean;
  limit?: number;
  onSuccess?: (data: Notification[]) => void;
  onError?: (error: NovuError) => void;
};

export type UseNotificationsResult = {
  notifications?: Notification[];
  error?: NovuError;
  isLoading: boolean;
  isFetching: boolean;
  hasMore: boolean;
  readAll: () => Promise<{
    data?: void | undefined;
    error?: NovuError | undefined;
  }>;
  seenAll: () => Promise<{
    data?: void | undefined;

Review comment (bug):
I think we don't necessarily need an optional `realtime: true` flag for few reasons:
- this hook was already partially working realtime, this feels more like bug fix then new opt-in feature 
- the `useCounts()` hook is already fully realtime and have no flag, so it would create slight inconsistency
- I dont think this would cause any backwards compatibility issues, I cant think of a valid usecase where you don't want the notification to appear immediately, especially when the `useCounts` hook will always update in realtime, but I'm not 100% confident

Code after:
import { checkNotificationMatchesFilter, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useWebSocketEvent } from './internal/useWebsocketEvent';
import { useNovu } from './NovuProvider';

/**
 * Props for the useNotifications hook.
 *
 * @example
 * ```tsx
 * // Get unread notifications
 * const { notifications } = useNotifications({
 *   read: false
 * });
 *
 * // Get unseen notifications with specific tags
 * const { notifications } = useNotifications({
 *   seen: false,
 *   tags: ['important']
 * });
 *
 * // Get notifications (auto-updates in real time when new notifications arrive)
 * const { notifications } = useNotifications({
 *   read: false
 * });
 * ```
 */
export type UseNotificationsProps = {
  tags?: string[];
  data?: Record<string, unknown>;
  read?: boolean;
  archived?: boolean;
  snoozed?: boolean;
  seen?: boolean;
  limit?: number;
  onSuccess?: (data: Notification[]) => void;
  onError?: (error: NovuError) => void;
};

export type UseNotificationsResult = {
  notifications?: Notification[];
  error?: NovuError;
  isLoading: boolean;
  isFetching: boolean;
  hasMore: boolean;
  readAll: () => Promise<{
    data?: void | undefined;
    error?: NovuError | undefined;
  }>;
  seenAll: () => Promise<{
    data?: void | undefined;