Comments Provider dynamic comments value

[midsplit]

I'm using the latest @udecode/plate-comments and @udecode/plate-ui-comments packages to create a commenting system on a RTC app.

So far I've managed to create comments, save them to a database, send them to clients using websocket, but I am unable to dynamically update the CommentsProvider's comments value, it always uses the initial value. I can confirm my websocket is working, the clients are receiving data, and I am setting a new value for comments as I am properly console logging the value on update without any issue.

Is the value of comments static in the library, or am I missing something?

import type { TComment } from '@udecode/plate-comments'
import { CommentsProvider } from '@udecode/plate-comments'
import type { ReactNode } from 'react'
import { useEffect, useState } from 'react'

import { usersData } from './constants'
import { sendNotesComment } from 'src/api/webSocket'
import { useAuth } from 'src/components/providers/AuthProvider'
import { useNotesComments } from 'src/components/providers/NotesCommentsProvider'
import { NotesComment } from 'src/models/Notes'

export const MyCommentsProvider = ({ children, documentId }: { children: ReactNode, documentId: string }) => {
  const { currentAccount } = useAuth()
  const { notesComments } = useNotesComments()
  const [typedComments, setTypedComments] = useState<Record<string, TComment>>()

  useEffect(() => {
    setTypedComments(Object.fromEntries(new Map((notesComments
      .map(item => ({
        id: item.id?.toString() ?? '',
        value: item.value,
        createdAt: item.createdAt,
        userId: item.userId,
        parentId: item.parentId ?? null,
        isResolved: item.isResolved ?? false,
      })) as TComment[])
      .map(object => [object.id, object]))))
  }, [notesComments, notesComments.length, documentId])

  useEffect(() => {
    console.log(typedComments)
  }, [typedComments])

  return (
    <CommentsProvider
      comments={typedComments ?? {}}
      myUserId={currentAccount.id}
      onCommentAdd={valueItem => {
        const noteItem = new NotesComment(
          {
            id: valueItem.id,
            uuid: valueItem.id,
            value: valueItem.value as any,
            createdAt: Date.now(),
            parentId: valueItem.parentId,
            isResolved: valueItem.isResolved,
            documentNoteId: documentId,
            userId: currentAccount.id,
          }
        )
        sendNotesComment(noteItem)
      }}
      users={usersData}
    >
      {children}
    </CommentsProvider>
  )
}

[zbeyens]

Indeed, CommentsProvider props are only setting the initial values. You can use useCommentsActions.comments(<newComments>) to update these.

[midsplit]

Works like a charm, thank you!