chore(refactor): connect from useConnection composable

Signed-off-by: Max <[email protected]>

cypress/e2e/api/SyncServiceProvider.spec.js

@@ -4,8 +4,8 @@
  */
 
 import { randUser } from '../../utils/index.js'
-import SessionApi from '../../../src/services/SessionApi.js'
-import { SyncService } from '../../../src/services/SyncService.ts'
+import { provideConnection } from '../../../src/composables/useConnection.ts'
+import { provideSyncService  } from '../../../src/composables/useSyncService.ts'
 import createSyncServiceProvider from '../../../src/services/SyncServiceProvider.js'
 import { Doc } from 'yjs'
 
@@ -39,13 +39,10 @@ describe('Sync service provider', function() {
 	 * @param {object} ydoc Yjs document
 	 */
 	function createProvider(ydoc) {
+		const relativePath = '.'
+		const { connection, openConnection, baseVersionEtag } = provideConnection({ fileId, relativePath })
+		const { syncService } = provideSyncService( connection, openConnection, baseVersionEtag )
 		const queue = []
-		const api = new SessionApi()
-		const syncService = new SyncService({
-			serialize: () => 'Serialized',
-			getDocumentState: () => null,
-			api,
-		})
 		syncService.on('opened', () => syncService.startSync())
 		return createSyncServiceProvider({
 			ydoc,

cypress/support/sessions.js

@@ -4,19 +4,19 @@
  */
 
 import axios from '@nextcloud/axios'
-import SessionApi from '../../src/services/SessionApi.js'
+import { Connection } from '../../src/services/SessionApi.js'
+import { open } from '../../src/apis/Connect.ts'
 
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 
-Cypress.Commands.add('createTextSession', (fileId, options = {}) => {
-	const api = new SessionApi(options)
-	return api.open({ fileId })
+Cypress.Commands.add('createTextSession', async (fileId, options = {}) => {
+	const { data } = await open({ fileId, ...options })
+	return new Connection({ data }, options)
 })
 
 Cypress.Commands.add('failToCreateTextSession', (fileId, baseVersionEtag = null, options = {}) => {
-	const api = new SessionApi(options)
-	return api.open({ fileId, baseVersionEtag })
-		.then((response) => {
+	open({ fileId, ...options, baseVersionEtag })
+		.then((_response) => {
 			throw new Error('Expected request to fail - but it succeeded!')
 		}, (err) => err.response)
 })

src/apis/Connect.ts

@@ -0,0 +1,51 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import type { Connection } from '../composables/useConnection.js'
+
+export interface OpenParams {
+	fileId?: number
+	baseVersionEtag?: string
+	filePath: string
+	token?: string
+	guestName?: string
+}
+
+export interface OpenData {
+	document: { baseVersionEtag: string }
+}
+
+/**
+ * Open editing connection to the document
+ * @param params Parameters identifying the document
+ */
+export async function open(
+	params: OpenParams,
+): Promise<{ connection: Connection; data: OpenData }> {
+	const _baseUrl = params.token
+		? generateUrl('/apps/text/public')
+		: generateUrl('/apps/text')
+	const url = `${_baseUrl}/session/${params.fileId}/create`
+	const response = await axios.put(url, params)
+	const { document, session } = response.data
+	const connection = {
+		documentId: document.id,
+		sessionId: session.id,
+		sessionToken: session.token,
+	}
+	return { connection, data: response.data }
+}
+
+/**
+ * Close the connection
+ * @param connection connection to close
+ */
+export async function close(connection: Connection) {
+	const id = connection.documentId
+	const url = generateUrl(`/apps/text/session/${id}/close`)
+	const response = await axios.post(url, connection)
+	return response.data
+}

src/components/Editor.vue

@@ -244,9 +244,9 @@ export default defineComponent({
 			Collaboration.configure({ document: ydoc }),
 			CollaborationCursor.configure({ provider: { awareness } }),
 		]
-		const { syncService, connectSyncService, baseVersionEtag } =
-			provideSyncService(props)
-		const { connection } = provideConnection(syncService)
+		const { connection, openConnection, baseVersionEtag } =
+			provideConnection(props)
+		const { syncService } = provideSyncService(connection, openConnection, props)
 		const editor = isRichEditor
 			? createRichEditor({
 					connection,
@@ -273,7 +273,6 @@ export default defineComponent({
 		return {
 			awareness,
 			baseVersionEtag,
-			connectSyncService,
 			editor,
 			el,
 			hasConnectionIssue,
@@ -441,7 +440,6 @@ export default defineComponent({
 	},
 	methods: {
 		initSession() {
-			this.connectSyncService()
 			this.listenSyncServiceEvents()
 			this.syncProvider = createSyncServiceProvider({
 				ydoc: this.ydoc,

src/composables/useConnection.ts

@@ -3,53 +3,82 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import {
-	inject,
-	provide,
-	shallowRef,
-	watch,
-	type InjectionKey,
-	type ShallowRef,
-} from 'vue'
-import type { Session, SyncService } from '../services/SyncService.js'
+import { inject, provide, shallowRef, type InjectionKey, type ShallowRef } from 'vue'
+import { open } from '../apis/Connect.js'
+import type { Document, Session } from '../services/SyncService.js'
 
 export interface Connection {
 	documentId: number
 	sessionId: number
 	sessionToken: string
 }
 
+export interface InitialData {
+	document: Document
+	session: Session
+	readOnly: boolean
+	content: string
+	documentState?: string
+	lock?: object
+	hasOwner: boolean
+}
+
 export const connectionKey = Symbol('text:connection') as InjectionKey<
 	ShallowRef<Connection | undefined>
 >
 
-export const provideConnection = (
-	syncService: ShallowRef<SyncService | undefined>,
-) => {
+/**
+ * Handle the connection to the text api and provide it to child components
+ * @param props Props of the editor component.
+ * @param props.fileId Fileid of the file.
+ * @param props.relativePath Relative path to the file.
+ * @param props.initialSession Initial session handed to the editor in direct editing
+ * @param props.shareToken Share token of the file.
+ */
+export function provideConnection(props: {
+	fileId: number
+	relativePath: string
+	initialSession?: InitialData
+	shareToken?: string
+}) {
+	const baseVersionEtag = shallowRef<string | undefined>(undefined)
 	const connection = shallowRef<Connection | undefined>(undefined)
-	const updateConnection = ({ session }: { session: Session }) => {
-		connection.value = {
-			documentId: session.documentId,
-			sessionId: session.id,
-			sessionToken: session.token,
-		}
+	const openConnection = async () => {
+		const guestName = localStorage.getItem('nick') ?? ''
+		const { connection: opened, data } =
+			openInitialSession(props)
+			|| (await open({
+				fileId: props.fileId,
+				guestName,
+				token: props.shareToken,
+				filePath: props.relativePath,
+				baseVersionEtag: baseVersionEtag.value,
+			}))
+		baseVersionEtag.value = data.document.baseVersionEtag
+		connection.value = opened
+		return data
 	}
-	syncService.value?.bus.on('opened', updateConnection)
-	watch(
-		syncService,
-		(newSyncService?: SyncService, oldSyncService?: SyncService) => {
-			newSyncService?.bus.on('opened', updateConnection)
-			oldSyncService?.bus.off('opened', updateConnection)
-			if (!newSyncService) {
-				connection.value = undefined
-			}
-		},
-	)
 	provide(connectionKey, connection)
-	return { connection }
+	return { connection, openConnection, baseVersionEtag }
 }
 
 export const useConnection = () => {
 	const connection = inject(connectionKey)
 	return { connection }
 }
+
+/**
+ * Get the connection and additional data from the initial session if available.
+ * @param props Props of the editor component
+ * @param props.initialSession InitialSession to use.
+ */
+function openInitialSession(props: { initialSession?: InitialData }) {
+	if (props.initialSession) {
+		const connection = {
+			documentId: props.initialSession.document.id,
+			sessionId: props.initialSession.session.id,
+			sessionToken: props.initialSession.session.token,
+		}
+		return { connection, data: props.initialSession }
+	}
+}

src/composables/useSaveService.ts

@@ -3,47 +3,29 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import {
-	type InjectionKey,
-	type ShallowRef,
-	shallowRef,
-	provide,
-	inject,
-	watch,
-} from 'vue'
+import { type InjectionKey, provide, inject } from 'vue'
 import { SaveService } from '../services/SaveService.js'
 import type { SyncService } from '../services/SyncService.ts'
 import type { Doc } from 'yjs'
 import { getDocumentState } from '../helpers/yjs.js'
 
-const saveServiceKey = Symbol('text:save') as InjectionKey<
-	ShallowRef<SaveService | undefined>
->
+const saveServiceKey = Symbol('text:save') as InjectionKey<SaveService>
 
 export const provideSaveService = (
-	syncService: ShallowRef<SyncService>,
+	syncService: SyncService,
 	serialize: () => string,
 	ydoc: Doc,
 ) => {
-	const saveService: ShallowRef<SaveService | undefined> = shallowRef(undefined)
-
-	watch(syncService, (newSyncService) => {
-		if (!newSyncService) {
-			saveService.value = undefined
-			return
-		}
-		saveService.value = new SaveService({
-			syncService: newSyncService,
-			serialize,
-			getDocumentState: () => getDocumentState(ydoc),
-		})
+	const saveService = new SaveService({
+		syncService,
+		serialize,
+		getDocumentState: () => getDocumentState(ydoc),
 	})
-
 	provide(saveServiceKey, saveService)
 	return { saveService }
 }
 
 export const useSaveService = () => {
-	const saveService = inject(saveServiceKey, shallowRef(undefined))
+	const saveService = inject(saveServiceKey) as SaveService
 	return { saveService }
 }

src/composables/useSyncService.ts

@@ -3,44 +3,36 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { type InjectionKey, type ShallowRef, shallowRef, provide, inject } from 'vue'
-import { SyncService } from '../services/SyncService.js'
-import SessionApi from '../services/SessionApi.js'
+import { type InjectionKey, type ShallowRef, provide, inject } from 'vue'
+import { SyncService } from '../services/SyncService'
+import type { Connection, InitialData } from './useConnection.js'
 
-const syncServiceKey = Symbol('text:sync') as InjectionKey<
-	ShallowRef<SyncService | undefined>
->
+const syncServiceKey = Symbol('text:sync') as InjectionKey<SyncService>
 
 /**
  * Define a sync service and provide it to child components
+ * @param connection Connection to the text api.
+ * @param openConnection Function to open the connection.
  * @param props Props of the editor component.
- * @param props.relativePath Relative path to the file.
  * @param props.shareToken Share token of the file.
+ * @param props.relativePath Relative path to the file.
  */
-export function provideSyncService(props: {
-	relativePath: string
-	shareToken?: string
-}) {
-	const syncService: ShallowRef<SyncService | undefined> = shallowRef(undefined)
-	const baseVersionEtag = shallowRef(undefined)
+export function provideSyncService(
+	connection: ShallowRef<Connection>,
+	openConnection: () => Promise<InitialData>,
+	props: { shareToken: string; relativePath: string },
+) {
+	const syncService = new SyncService({
+		connection,
+		openConnection,
+		shareToken: props.shareToken,
+		filePath: props.relativePath,
+	})
 	provide(syncServiceKey, syncService)
-	const connectSyncService = () => {
-		const guestName = localStorage.getItem('nick') ?? ''
-		const api = new SessionApi({
-			guestName,
-			shareToken: props.shareToken,
-			filePath: props.relativePath,
-		})
-		syncService.value = new SyncService({
-			api,
-			baseVersionEtag: baseVersionEtag.value,
-		})
-	}
-
-	return { baseVersionEtag, connectSyncService, syncService }
+	return { syncService }
 }
 
 export const useSyncService = () => {
-	const syncService = inject(syncServiceKey, shallowRef(undefined))
+	const syncService = inject(syncServiceKey) as SyncService
 	return { syncService }
 }