fix(SetGuestUsername): set single source of truth for guest input

- there are two components mounted at the same time

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/SetGuestUsername.vue

@@ -79,17 +79,26 @@ const token = useGetToken()
 
 const usernameInput = useTemplateRef('usernameInput')
 
-const guestUserName = ref(getGuestNickname() || '')
+const guestUserName = computed({
+	get: () => guestNameStore.guestUserName,
+	set: (newValue: string) => {
+		guestNameStore.guestUserName = newValue
+		debounceUpdateDisplayName()
+		emit('update', newValue)
+	},
+})
 const isEditingUsername = ref(false)
 
 const actorDisplayName = computed<string>(() => actorStore.displayName || guestUserName.value)
 const displayNameLabel = computed(() => t('spreed', 'Display name: {name}', {
 	name: `<strong>${escapeHtml(actorDisplayName.value)}</strong>`,
 }, { escape: false }))
-const debounceUpdateDisplayName = debounce(updateDisplayName, 500)
+const debounceUpdateDisplayName = debounce(updateDisplayName, 10_000)
 
 watch(actorDisplayName, (newValue) => {
-	guestUserName.value = newValue
+	if (newValue && newValue !== guestUserName.value) {
+		guestUserName.value = newValue
+	}
 })
 
 /** Initially set displayName in store, if available from BrowserStorage */
@@ -111,7 +120,7 @@ EventBus.once('joined-conversation', () => {
 subscribe('user:info:changed', updateDisplayNameFromPublicEvent)
 onBeforeUnmount(() => {
 	unsubscribe('user:info:changed', updateDisplayNameFromPublicEvent)
-	updateDisplayName()
+	debounceUpdateDisplayName.flush?.()
 })
 
 /**
@@ -144,12 +153,6 @@ function toggleEdit() {
 		})
 	}
 }
-
-// One-way binding to parent component
-watch(guestUserName, (newValue) => {
-	debounceUpdateDisplayName()
-	emit('update', newValue)
-}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>

src/stores/__tests__/guestName.spec.js

@@ -17,6 +17,7 @@ vi.mock('../../services/participantsService', () => ({
 }))
 vi.mock('@nextcloud/auth', () => ({
 	getCurrentUser: vi.fn(),
+	getGuestNickname: vi.fn(),
 	setGuestNickname: vi.fn(),
 }))
 

src/stores/guestName.js

@@ -1,10 +1,10 @@
-import { setGuestNickname } from '@nextcloud/auth'
-import { emit } from '@nextcloud/event-bus'
-import { t } from '@nextcloud/l10n'
 /**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import { getGuestNickname, setGuestNickname } from '@nextcloud/auth'
+import { t } from '@nextcloud/l10n'
 import { defineStore } from 'pinia'
 import { setGuestUserName } from '../services/participantsService.js'
 import { useActorStore } from './actor.ts'
@@ -12,6 +12,7 @@ import { useActorStore } from './actor.ts'
 export const useGuestNameStore = defineStore('guestName', {
 	state: () => ({
 		guestNames: {},
+		guestUserName: getGuestNickname() || '',
 	}),
 
 	actions: {