chore(refactor): sync service with new connection

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

cypress/support/sessions.js

@@ -6,12 +6,13 @@
 import axios from '@nextcloud/axios'
 import { SessionConnection } from '../../src/services/SessionConnection.js'
 import { open, close } from '../../src/apis/Connect.ts'
+import { push } from '../../src/apis/Sync.ts'
 
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 
 Cypress.Commands.add('createTextSession', async (fileId, options = {}) => {
-	const { data } = await open({ fileId, token: options.shareToken, ...options })
-	return new SessionConnection({ data }, options)
+	const { connection, data } = await open({ fileId, token: options.shareToken, ...options })
+	return new SessionConnection({ data }, connection)
 })
 
 Cypress.Commands.add('destroySession', async (sessionConnection) => {
@@ -27,16 +28,20 @@ Cypress.Commands.add('failToCreateTextSession', (fileId, baseVersionEtag = null,
 		}, (err) => err.response)
 })
 
-Cypress.Commands.add('pushSteps', ({ connection, steps, version, awareness = '' }) => {
-	return connection.push({ steps, version, awareness })
-		.then(response => response.data)
+Cypress.Commands.add('pushSteps', ({ connection: sessionConnection, steps, version, awareness = '' }) => {
+	return push(
+		sessionConnection.connection,
+		{ steps, version, awareness }
+	).then(response => response.data)
 })
 
-Cypress.Commands.add('failToPushSteps', ({ connection, steps, version, awareness = '' }) => {
-	return connection.push({ steps, version, awareness })
-		.then((response) => {
-			throw new Error('Expected request to fail - but it succeeded!')
-		}, (err) => err.response)
+Cypress.Commands.add('failToPushSteps', ({ connection: sessionConnection, steps, version, awareness = '' }) => {
+	return push(
+		sessionConnection.connection,
+		{ steps, version, awareness }
+	).then((_response) => {
+		throw new Error('Expected request to fail - but it succeeded!')
+	}, (err) => err.response)
 })
 
 Cypress.Commands.add('syncSteps', (connection, options = { version: 0 }) => {

src/apis/Connect.ts

@@ -35,6 +35,9 @@ export async function open(
 		documentId: document.id,
 		sessionId: session.id,
 		sessionToken: session.token,
+		baseVersionEtag: document.baseVersionEtag,
+		filePath: params.filePath,
+		shareToken: params.token,
 	}
 	return { connection, data: response.data }
 }
@@ -46,6 +49,10 @@ export async function open(
 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)
+	const response = await axios.post(url, {
+		documentId: connection.documentId,
+		sessionId: connection.sessionId,
+		sessionToken: connection.sessionToken,
+	})
 	return response.data
 }

src/apis/Mention.ts

@@ -18,7 +18,7 @@ import { unref, type ShallowRef } from 'vue'
 export function emitMention(
 	mention: string,
 	scope: object,
-	{ connection }: { connection: ShallowRef<Connection> },
+	{ connection }: { connection: ShallowRef<Connection> | Connection },
 ): Promise<void> {
 	// TODO: Require actual connection - handle disconnected state early on
 	const con = unref(connection)
@@ -27,8 +27,11 @@ export function emitMention(
 		console.warn(err.message, { err, mention })
 		return Promise.resolve()
 	}
-	return axios.put(generateUrl(`apps/text/session/${con.documentId}/mention`), {
-		...con,
+	const url = generateUrl(`apps/text/session/${con.documentId}/mention`)
+	return axios.put(url, {
+		documentId: con.documentId,
+		sessionId: con.sessionId,
+		sessionToken: con.sessionToken,
 		mention,
 		scope,
 	})

src/apis/Sync.ts

@@ -0,0 +1,46 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import axios from '@nextcloud/axios'
+import type { Connection } from '../composables/useConnection.js'
+import { unref, type ShallowRef } from 'vue'
+import { generateUrl } from '@nextcloud/router'
+import type { Step } from '../services/SyncService.js'
+
+interface SyncData {
+	version: number
+	steps: string[]
+	awareness: string
+}
+
+interface SyncResponse {
+	data: {
+		steps: Step[]
+		documentState: string
+		awareness: Record<string, string>
+	}
+}
+
+/**
+ * Send data to the server
+ * @param connection the active connection
+ * @param data data to push to the server
+ */
+export function push(
+	connection: ShallowRef<Connection> | Connection,
+	data: SyncData,
+): Promise<SyncResponse> {
+	const con = unref(connection)
+	const pub = con.shareToken ? '/public' : ''
+	const url = generateUrl(`apps/text${pub}/session/${con.documentId}/push`)
+	return axios.post(url, {
+		documentId: con.documentId,
+		sessionId: con.sessionId,
+		sessionToken: con.sessionToken,
+		token: con.shareToken,
+		version: data.version,
+		steps: data.steps.filter((s) => s),
+		awareness: data.awareness,
+	})
+}

src/components/Editor.vue

@@ -239,14 +239,14 @@ export default defineComponent({
 			isRichEditor,
 			props,
 		)
+		const { connection, openConnection, baseVersionEtag } =
+			provideConnection(props)
+		const { syncService } = provideSyncService(connection, openConnection)
 		const extensions = [
 			Autofocus.configure({ fileId: props.fileId }),
 			Collaboration.configure({ document: ydoc }),
 			CollaborationCursor.configure({ provider: { awareness } }),
 		]
-		const { connection, openConnection, baseVersionEtag } =
-			provideConnection(props)
-		const { syncService } = provideSyncService(connection, openConnection, props)
 		const editor = isRichEditor
 			? createRichEditor({
 					connection,

src/composables/useConnection.ts

@@ -11,6 +11,9 @@ export interface Connection {
 	documentId: number
 	sessionId: number
 	sessionToken: string
+	baseVersionEtag: string
+	filePath: string
+	shareToken?: string
 }
 
 export interface InitialData {
@@ -70,14 +73,24 @@ export const useConnection = () => {
 /**
  * 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.
+ * @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.
  */
-function openInitialSession(props: { initialSession?: InitialData }) {
+function openInitialSession(props: {
+	relativePath: string
+	initialSession?: InitialData
+	shareToken?: string
+}) {
 	if (props.initialSession) {
+		const { document, session } = props.initialSession
 		const connection = {
-			documentId: props.initialSession.document.id,
-			sessionId: props.initialSession.session.id,
-			sessionToken: props.initialSession.session.token,
+			documentId: document.id,
+			sessionId: session.id,
+			sessionToken: session.token,
+			baseVersionEtag: document.baseVersionEtag,
+			filePath: props.relativePath,
+			shareToken: props.shareToken,
 		}
 		return { connection, data: props.initialSession }
 	}

src/composables/useSyncService.ts

@@ -13,20 +13,14 @@ 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.shareToken Share token of the file.
- * @param props.relativePath Relative path to the file.
  */
 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)
 	return { syncService }

src/services/SessionConnection.js

@@ -24,9 +24,9 @@ export class SessionConnection {
 	#lock
 	#readOnly
 	#hasOwner
-	#options
+	connection
 
-	constructor(response, options) {
+	constructor(response, connection) {
 		const {
 			document,
 			session,
@@ -43,8 +43,8 @@ export class SessionConnection {
 		this.#content = content
 		this.#documentState = documentState
 		this.#hasOwner = hasOwner
-		this.#options = options
-		this.isPublic = !!options.shareToken
+		this.connection = connection
+		this.isPublic = !!connection.shareToken
 		this.closed = false
 	}
 
@@ -82,14 +82,14 @@ export class SessionConnection {
 			documentId: this.#document.id,
 			sessionId: this.#session.id,
 			sessionToken: this.#session.token,
-			token: this.#options.shareToken,
+			token: this.connection.shareToken,
 		}
 	}
 
 	sync({ version }) {
 		return this.#post(this.#url(`session/${this.#document.id}/sync`), {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			version,
 		})
@@ -99,7 +99,7 @@ export class SessionConnection {
 		const url = this.#url(`session/${this.#document.id}/save`)
 		const postData = {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			...data,
 		}
@@ -111,7 +111,7 @@ export class SessionConnection {
 		const url = this.#url(`session/${this.#document.id}/save`)
 		const postData = {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			...data,
 			requestToken: getRequestToken() ?? '',
@@ -123,17 +123,6 @@ export class SessionConnection {
 		return navigator.sendBeacon(url, blob)
 	}
 
-	push({ steps, version, awareness }) {
-		return this.#post(this.#url(`session/${this.#document.id}/push`), {
-			...this.#defaultParams,
-			filePath: this.#options.filePath,
-			baseVersionEtag: this.#document.baseVersionEtag,
-			steps,
-			version,
-			awareness,
-		})
-	}
-
 	// TODO: maybe return a new connection here so connections have immutable state
 	update(guestName) {
 		return this.#post(this.#url(`session/${this.#document.id}/session`), {
@@ -156,7 +145,7 @@ export class SessionConnection {
 			+ '&sessionToken='
 			+ encodeURIComponent(this.#session.token)
 			+ '&token='
-			+ encodeURIComponent(this.#options.shareToken || '')
+			+ encodeURIComponent(this.connection.shareToken || '')
 		return this.#post(url, formData, {
 			headers: {
 				'Content-Type': 'multipart/form-data',