Comments are being duplicated

[samueldurantes]

Currently, when you post a new comment, it being duplicated.

Example:

Screen.Recording.2025-03-18.at.10.24.40.mov

[samueldurantes]

Debugging a little, I saw that the comments aren't saved as duplicates in the database, so I figured out that the problem occurs when you add a new comment through the UI.

A comment is added optimistically to the UI state, i.e., before the request is confirmed.

briefer/apps/web/src/hooks/useComments.tsx

Lines 129 to 153 in d194c4c

	setState((state) => {
	const comments = state.get(documentId) ?? []
	return state.set(documentId, [...comments, comment])
	})
	const res = await fetch(
	`${NEXT_PUBLIC_API_URL()}/v1/workspaces/${workspaceId}/documents/${documentId}/comments`,
	{
	credentials: 'include',
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(comment),
	}
	)
	if (!res.ok) {
	alert('Failed to create comment')
	setState((state) => {
	const comments = state.get(documentId) ?? []
	return state.set(
	documentId,
	comments.filter((c) => c.id !== comment.id)
	)
	})
	}
	},

Since Briefer is a collaborative platform, the application receives comments made by other users in real time via WebSocket. Knowing this, I was able to discover that after comments are optimistically added, they are added again via WebSocket.

The solution to this problem is very simple; you just have to check if the comment received is already in the UI state.