@ommiii/notification-client

Shared notification client for Ommiii subsystems. Provides SignalR real-time notifications with toast UI.

Installation

npm install @ommiii/notification-client

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom @tanstack/react-query sonner

Usage

1. Add Toaster to your app

import { Toaster } from "sonner"

function App() {
  return (
    <>
      <Toaster position="top-right" richColors closeButton />
      {/* ... */}
    </>
  )
}

2. Wrap your app with NotificationProvider

import { NotificationProvider } from "@ommiii/notification-client"

// E-Voucher (subsystemId = 1)
function App() {
  const { session } = useAuth()

  return (
    <NotificationProvider
      hubUrl="http://localhost:5278/hubs/notify"
      portalUrl="http://localhost:3001"
      subsystemId={1}  // E-Voucher only receives E-Voucher notifications
      getAccessToken={() => getAccessToken()}
      isAuthenticated={!!session}
    >
      {children}
    </NotificationProvider>
  )
}

// SSO Portal (subsystemId = null to receive all)
function App() {
  return (
    <NotificationProvider
      hubUrl="http://localhost:5278/hubs/notify"
      portalUrl="http://localhost:3001"
      subsystemId={null}  // Portal receives ALL notifications
      getAccessToken={() => getHubAccessTokenSync()}
      isAuthenticated={isAuthenticated}
    >
      {children}
    </NotificationProvider>
  )
}

3. Use NotificationBell in your navbar

import { NotificationBell } from "@ommiii/notification-client"
import { useUnreadNotificationCount } from "./hooks/use-unread-notification-count"

function Navbar() {
  const { data: unreadCount } = useUnreadNotificationCount()

  return (
    <nav>
      <NotificationBell unreadCount={unreadCount ?? 0} />
    </nav>
  )
}

4. Custom Bell Button (optional)

import { NotificationBell } from "@ommiii/notification-client"
import { Button } from "@/components/ui/button"
import { Bell } from "lucide-react"

<NotificationBell
  unreadCount={unreadCount}
  renderButton={({ onClick, unreadCount }) => (
    <Button variant="ghost" size="sm" onClick={onClick} className="relative">
      <Bell className="w-5 h-5" />
      {unreadCount > 0 && (
        <span className="absolute -top-1 -right-1 ...">
          {unreadCount}
        </span>
      )}
    </Button>
  )}
/>

API

NotificationProvider Props

| Prop | Type | Description | |------|------|-------------| | hubUrl | string | SignalR hub URL | | portalUrl | string | Portal URL for notifications page | | subsystemId | number \| null | Subsystem ID for filtering (null = receive all) | | getAccessToken | () => string \| null | Function to get auth token | | isAuthenticated | boolean | Whether user is authenticated | | onNotificationReceived | (notification) => void | Optional callback |

useNotification Hook

const {
  connectionState,  // "disconnected" | "connecting" | "connected" | "reconnecting"
  openNotificationsPage,  // () => void
} = useNotification()

notify Function

Show toast notifications manually:

import { notify, NotifyType } from "@ommiii/notification-client"

notify({
  title: "Success!",
  description: "Your action was completed.",
  type: NotifyType.SUCCESS,
  duration: 4000,
  action: {
    label: "View",
    onClick: () => { /* ... */ }
  }
})

Subsystem IDs

| ID | Subsystem | |----|-----------| | null | Hub/Portal (receives all) | | 1 | E-Voucher | | 2 | System B (future) |

Development

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run dev