roomConnect with username

src/components/Editor/store/ctrl.ts

@@ -441,8 +441,8 @@ export const createCtrl = (initial: State): [Store<State>, any] => {
   const doStartCollab = (state: State): State => {
     const backup = state.args?.room && state.collab?.room !== state.args.room
     const room = state.args?.room ?? uuidv4()
-
-    const [type, provider] = roomConnect(room)
+    const username = '' // FIXME: use authenticated user name
+    const [type, provider] = roomConnect(room, username)
 
     const extensions = createExtensions({
       config: state.config,

src/stores/zine/reactions.ts

@@ -27,7 +27,7 @@ export const loadArticleReactions = async ({
   offset?: number
 }): Promise<void> => {
   const data = await apiClient.getArticleReactions({ articleSlug, limit, offset })
-  // TODO: const [data, provider] = roomConnect(articleSlug)
+  // TODO: const [data, provider] = roomConnect(articleSlug, username, "reactions")
   reactionsOrdered.set(data)
 }
 

src/utils/p2p.ts

@@ -4,7 +4,11 @@ import { WebrtcProvider } from 'y-webrtc'
 import * as Y from 'yjs'
 // import type { Reaction } from '../graphql/types.gen'
 
-export const roomConnect = (room, keyname = 'reactions'): [Y.XmlFragment, WebrtcProvider] => {
+export const roomConnect = (
+  room,
+  username = '',
+  keyname = 'reactions'
+): [Y.XmlFragment, WebrtcProvider] => {
   const ydoc = new Y.Doc()
   const yxmlfrag = ydoc.getXmlFragment(keyname) // TODO: encode/decode payload to Reactions[]
   const webrtcOptions = {
@@ -21,15 +25,17 @@ export const roomConnect = (room, keyname = 'reactions'): [Y.XmlFragment, Webrtc
     password: ''
   }
   const provider = new WebrtcProvider(room, ydoc, webrtcOptions)
-  const username = uniqueNamesGenerator({
-    dictionaries: [adjectives, animals],
-    style: 'capital',
-    separator: ' ',
-    length: 2
-  })
+  let name = username
 
-  provider.awareness.setLocalStateField('user', {
-    name: username
-  })
+  if (Boolean(name) === false) {
+    name = uniqueNamesGenerator({
+      dictionaries: [adjectives, animals],
+      style: 'capital',
+      separator: ' ',
+      length: 2
+    })
+  }
+
+  provider.awareness.setLocalStateField('user', { name })
   return [yxmlfrag, provider]
 }