feat: add real-time notification system with Socket.IO client
Implements the frontend notification client for TEC-2217: 1. notifications-api.ts — API client for list, unread-count, markAsRead, markAllAsRead endpoints 2. notifications-store.ts — Zustand store for notification state (recent list, unread count, dropdown open state) 3. use-socket-notifications.ts — Socket.IO hook that connects with httpOnly cookie auth, listens for notification:new events, auto-reconnects, and syncs unread count on (re)connect 4. notification-bell.tsx — Bell icon with unread badge + dropdown showing 10 most recent notifications with time-ago formatting, mark-as-read on click, mark-all-as-read, and "Xem tất cả" link 5. notifications-provider.tsx — Provider wired into locale layout (inside AuthProvider) to initialize Socket.IO connection 6. Dashboard header — NotificationBell placed before LanguageSwitcher Added socket.io-client dependency. Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
188
apps/web/components/notifications/notification-bell.tsx
Normal file
188
apps/web/components/notifications/notification-bell.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'use client';
|
||||
|
||||
import { Bell } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { NotificationDto } from '@/lib/notifications-api';
|
||||
import { useNotificationsStore } from '@/lib/notifications-store';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export function NotificationBell() {
|
||||
const {
|
||||
notifications,
|
||||
unreadCount,
|
||||
isOpen,
|
||||
isLoading,
|
||||
setOpen,
|
||||
markAsRead,
|
||||
markAllAsRead,
|
||||
fetchUnreadCount,
|
||||
} = useNotificationsStore();
|
||||
const router = useRouter();
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Fetch unread count on mount
|
||||
useEffect(() => {
|
||||
fetchUnreadCount();
|
||||
}, [fetchUnreadCount]);
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!dropdownRef.current.contains(e.target as Node)
|
||||
) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [isOpen, setOpen]);
|
||||
|
||||
const handleNotificationClick = async (notification: NotificationDto) => {
|
||||
if (!notification.isRead) {
|
||||
await markAsRead(notification.id);
|
||||
}
|
||||
if (notification.link) {
|
||||
router.push(notification.link);
|
||||
}
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="relative h-9 w-9 p-0"
|
||||
aria-label={`Thông báo${unreadCount > 0 ? ` (${unreadCount} chưa đọc)` : ''}`}
|
||||
aria-expanded={isOpen}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
>
|
||||
<Bell className="h-4 w-4" aria-hidden="true" />
|
||||
{unreadCount > 0 && (
|
||||
<span
|
||||
className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 top-full z-50 mt-2 w-80 overflow-hidden rounded-lg border bg-popover shadow-lg"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-3">
|
||||
<h3 className="text-sm font-semibold">Thông báo</h3>
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
className="text-xs text-primary hover:underline"
|
||||
onClick={markAllAsRead}
|
||||
>
|
||||
Đánh dấu tất cả đã đọc
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<svg
|
||||
className="h-5 w-5 animate-spin text-muted-foreground"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className="py-8 text-center text-sm text-muted-foreground">
|
||||
Chưa có thông báo
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((notification) => (
|
||||
<button
|
||||
key={notification.id}
|
||||
role="menuitem"
|
||||
className={cn(
|
||||
'flex w-full flex-col gap-0.5 border-b px-4 py-3 text-left transition-colors hover:bg-accent last:border-b-0',
|
||||
!notification.isRead && 'bg-primary/5',
|
||||
)}
|
||||
onClick={() => handleNotificationClick(notification)}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
{!notification.isRead && (
|
||||
<span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{notification.title}
|
||||
</p>
|
||||
<p className="line-clamp-2 text-xs text-muted-foreground">
|
||||
{notification.body}
|
||||
</p>
|
||||
<p className="mt-1 text-[10px] text-muted-foreground">
|
||||
{formatTimeAgo(notification.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="border-t px-4 py-2 text-center">
|
||||
<button
|
||||
className="text-xs font-medium text-primary hover:underline"
|
||||
onClick={() => {
|
||||
router.push('/notifications');
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Xem tất cả
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr: string): string {
|
||||
const now = Date.now();
|
||||
const date = new Date(dateStr).getTime();
|
||||
const diffMs = now - date;
|
||||
const diffMin = Math.floor(diffMs / 60000);
|
||||
|
||||
if (diffMin < 1) return 'Vừa xong';
|
||||
if (diffMin < 60) return `${diffMin} phút trước`;
|
||||
const diffHours = Math.floor(diffMin / 60);
|
||||
if (diffHours < 24) return `${diffHours} giờ trước`;
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
if (diffDays < 7) return `${diffDays} ngày trước`;
|
||||
return new Date(dateStr).toLocaleDateString('vi-VN');
|
||||
}
|
||||
16
apps/web/components/providers/notifications-provider.tsx
Normal file
16
apps/web/components/providers/notifications-provider.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import { useSocketNotifications } from '@/lib/hooks/use-socket-notifications';
|
||||
|
||||
/**
|
||||
* Provider component that initializes the Socket.IO connection
|
||||
* for real-time notifications. Must be rendered inside AuthProvider.
|
||||
*/
|
||||
export function NotificationsProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
useSocketNotifications();
|
||||
return <>{children}</>;
|
||||
}
|
||||
Reference in New Issue
Block a user