diff --git a/bindings/src/components/MultisynqRoot.tsx b/bindings/src/components/MultisynqRoot.tsx index 0c915d7..c6614da 100644 --- a/bindings/src/components/MultisynqRoot.tsx +++ b/bindings/src/components/MultisynqRoot.tsx @@ -1,10 +1,9 @@ -import { useEffect, useState, useRef, useCallback } from 'react' -import { MultisynqSession, App } from '@multisynq/client' -import { MultisynqReactView } from '../MultisynqReactView' -import { setSyncedCallback } from '../MultisynqReactView' -import { MultisynqContext } from './MultisynqContext' +import { App, MultisynqSession } from '@multisynq/client' +import { useCallback, useEffect, useRef, useState } from 'react' import { createMultisynqSession, MultisynqReactSessionParameters } from '../createMultisynqSession' +import { MultisynqReactView, setSyncedCallback } from '../MultisynqReactView' import { ReactModel } from '../ReactModel' +import { MultisynqContext } from './MultisynqContext' export interface ReactSessionParameters extends Omit, 'name'> { name?: string @@ -39,11 +38,11 @@ export function MultisynqRoot({ const [multisynqSession, setMultisynqSession] = useState> | null>(null) const [multisynqView, setMultisynqView] = useState | null>(null) const [currentSessionParams, setCurrentSessionParams] = useState>(() => { - if(!deferSession) { - if(!sessionParams.name) { + if (!deferSession) { + if (!sessionParams.name) { sessionParams.name = App.randomSession() } - if(!sessionParams.password) { + if (!sessionParams.password) { sessionParams.password = App.randomPassword() } } @@ -122,20 +121,30 @@ export function MultisynqRoot({ join: true, } - if(!newParams.name) { + if (!newParams.name) { newParams.name = App.randomSession() } - if(!newParams.password) { + if (!newParams.password) { newParams.password = App.randomPassword() } // eslint-disable-next-line @typescript-eslint/no-unused-vars const { join, ...args } = newParams - createMultisynqSession(args).then((newSession) => { - nextSessionRef.current = newSession - setCurrentSessionParams(newParams) - }) + try { + const newSession = await createMultisynqSession(args) + // Verify if the next session is null, if so, set the new session to the next session + // and update the current session params + if (nextSessionRef.current === null) { + nextSessionRef.current = newSession + setCurrentSessionParams(newParams) + } else { + // Another session was created in the meantime + newSession.leave() + } + } catch (error) { + console.error('Failed to create session:', error) + } }, [setCurrentSessionParams, currentSessionParams] ) @@ -152,13 +161,9 @@ export function MultisynqRoot({ view: multisynqView, model: multisynqView?.model || null, setSession, - leaveSession + leaveSession, } - return ( - - {children} - - ) + return {children} } return null }