brief-20/frontend/components/notifications.tsx
Avnyr ad6ef4c907 feat: add socket context and notifications listener for real-time event handling
- Introduced `SocketProvider` to manage WebSocket connection and context across the app.
- Added `NotificationsListener` component to handle real-time notifications and display feedback via `toast`.
- Enabled event subscriptions for projects, groups, collaborators, and user actions.
2025-05-16 16:41:55 +02:00

63 lines
1.8 KiB
TypeScript

import { useEffect, useState } from "react";
import { useSocket } from "@/lib/socket-context";
import { toast } from "sonner";
/**
* Notification component that listens for real-time notifications
* and displays them using toast notifications.
*/
export function NotificationsListener() {
const { onNotification, isConnected } = useSocket();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if (!isConnected) return;
// Set up notification listener
const unsubscribe = onNotification((data) => {
// Display notification based on type
switch (data.type) {
case "project_invitation":
toast.info(data.message, {
description: `You've been invited to collaborate on ${data.projectName}`,
action: {
label: "View Project",
onClick: () => window.location.href = `/projects/${data.projectId}`,
},
});
break;
case "group_update":
toast.info(data.message, {
description: data.description,
action: data.projectId && {
label: "View Groups",
onClick: () => window.location.href = `/projects/${data.projectId}/groups`,
},
});
break;
case "person_added":
toast.success(data.message, {
description: data.description,
});
break;
case "person_removed":
toast.info(data.message, {
description: data.description,
});
break;
default:
toast.info(data.message);
}
});
setInitialized(true);
// Clean up on unmount
return () => {
unsubscribe();
};
}, [isConnected, onNotification]);
// This component doesn't render anything visible
return null;
}