feat: enhance session event handling by including userId for client-side filtering and updating SessionLiveWrapper with currentUserId

src/app/api/sessions/[id]/subscribe/route.ts

@@ -66,6 +66,7 @@ export async function GET(
                 `data: ${JSON.stringify({
                   type: event.type,
                   payload: JSON.parse(event.payload),
+                  userId: event.userId, // Include userId for client-side filtering
                   user: event.user,
                   timestamp: event.createdAt,
                 })}\n\n`

src/app/sessions/[id]/page.tsx

@@ -66,6 +66,7 @@ export default async function SessionPage({ params }: SessionPageProps) {
       <SessionLiveWrapper
         sessionId={session.id}
         sessionTitle={session.title}
+        currentUserId={authSession.user.id}
         shares={session.shares}
         isOwner={session.isOwner}
         canEdit={session.canEdit}

src/components/collaboration/SessionLiveWrapper.tsx

@@ -23,6 +23,7 @@ interface Share {
 interface SessionLiveWrapperProps {
   sessionId: string;
   sessionTitle: string;
+  currentUserId: string;
   shares: Share[];
   isOwner: boolean;
   canEdit: boolean;
@@ -32,6 +33,7 @@ interface SessionLiveWrapperProps {
 export function SessionLiveWrapper({
   sessionId,
   sessionTitle,
+  currentUserId,
   shares,
   isOwner,
   canEdit,
@@ -51,6 +53,7 @@ export function SessionLiveWrapper({
 
   const { isConnected, error } = useSessionLive({
     sessionId,
+    currentUserId,
     onEvent: handleEvent,
   });
 

src/hooks/useSessionLive.ts

@@ -6,12 +6,14 @@ import { useRouter } from 'next/navigation';
 export type LiveEvent = {
   type: string;
   payload: Record<string, unknown>;
+  userId?: string; // ID of the user who created the event
   user?: { id: string; name: string | null; email: string };
   timestamp: string;
 };
 
 interface UseSessionLiveOptions {
   sessionId: string;
+  currentUserId?: string; // Current user ID for client-side filtering
   enabled?: boolean;
   onEvent?: (event: LiveEvent) => void;
 }
@@ -24,6 +26,7 @@ interface UseSessionLiveReturn {
 
 export function useSessionLive({
   sessionId,
+  currentUserId,
   enabled = true,
   onEvent,
 }: UseSessionLiveOptions): UseSessionLiveReturn {
@@ -35,12 +38,17 @@ export function useSessionLive({
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const reconnectAttemptsRef = useRef(0);
   const onEventRef = useRef(onEvent);
+  const currentUserIdRef = useRef(currentUserId);
 
-  // Keep onEvent ref updated
+  // Keep refs updated
   useEffect(() => {
     onEventRef.current = onEvent;
   }, [onEvent]);
 
+  useEffect(() => {
+    currentUserIdRef.current = currentUserId;
+  }, [currentUserId]);
+
   useEffect(() => {
     if (!enabled || typeof window === 'undefined') return;
 
@@ -69,10 +77,16 @@ export function useSessionLive({
               return;
             }
 
+            // Client-side filter: ignore events created by current user
+            // This prevents duplicates when revalidatePath already refreshed the data
+            if (currentUserIdRef.current && data.userId === currentUserIdRef.current) {
+              return;
+            }
+
             setLastEvent(data);
             onEventRef.current?.(data);
 
-            // Refresh the page data when we receive an event
+            // Refresh the page data when we receive an event from another user
             router.refresh();
           } catch (e) {
             console.error('Failed to parse SSE event:', e);