Avnyr
6cc6506e6f
- Updated `setProject` function in `page.tsx` to include explicit `(prev: any)` and `(group: any)` type annotations for better readability. - Added `"use client";` directive to `notifications.tsx` for React server-client compatibility. - Improved structural consistency and clarity in group and person state updates.
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
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;
|
|
}
|