Avnyr
ad6ef4c907
- 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.
63 lines
1.8 KiB
TypeScript
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;
|
|
} |