Merge pull request #10475 from nextcloud/feat/noid/migrate-to-pinia-g…

…uestNameStore

(guestNameStore) - Migrate to Pinia in guestNameStore

src/components/CallView/shared/LocalVideo.vue

@@ -82,6 +82,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import VideoBackground from './VideoBackground.vue'
 
 import video from '../../../mixins/video.js'
+import { useGuestNameStore } from '../../../stores/guestName.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
 
 export default {
@@ -135,6 +136,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	data() {
 		return {
 			notificationHandle: null,
@@ -195,7 +201,7 @@ export default {
 		},
 
 		guestName() {
-			return this.$store.getters.getGuestName(
+			return this.guestNameStore.getGuestName(
 				this.$store.getters.getToken(),
 				this.sessionHash,
 			)

src/components/CallView/shared/ReactionToaster.vue

@@ -48,6 +48,8 @@ import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
 
 import TransitionWrapper from '../../TransitionWrapper.vue'
 
+import { useGuestNameStore } from '../../../stores/guestName.js'
+
 export default {
 	name: 'ReactionToaster',
 
@@ -79,6 +81,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	data() {
 		return {
 			registeredModels: {},
@@ -147,7 +154,7 @@ export default {
 				id: model.attributes.peerId,
 				reaction,
 				name: isLocalModel
-					? this.$store.getters.getDisplayName() || this.$store.getters.getGuestName()
+					? this.$store.getters.getDisplayName() || t('spreed', 'Guest')
 					: this.getParticipantName(model),
 				seed: Math.random(),
 			})
@@ -176,7 +183,7 @@ export default {
 				return participant.displayName
 			}
 
-			return this.$store.getters.getGuestName(this.token, Hex.stringify(SHA1(peerId)))
+			return this.guestNameStore.getGuestName(this.token, Hex.stringify(SHA1(peerId)))
 		},
 
 		styled(name, seed) {

src/components/CallView/shared/Screen.vue

@@ -41,6 +41,8 @@ import SHA1 from 'crypto-js/sha1.js'
 
 import VideoBottomBar from './VideoBottomBar.vue'
 
+import { useGuestNameStore } from '../../../stores/guestName.js'
+
 export default {
 
 	name: 'Screen',
@@ -72,6 +74,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	computed: {
 		model() {
 			if (this.callParticipantModel) {
@@ -103,7 +110,7 @@ export default {
 			// for registered users, so do not fall back to the guest name in
 			// the store either until the connection was made.
 			if (!this.callParticipantModel.attributes.userId && !remoteParticipantName && remoteParticipantName !== undefined) {
-				remoteParticipantName = this.$store.getters.getGuestName(
+				remoteParticipantName = this.guestNameStore.getGuestName(
 					this.$store.getters.getToken(),
 					this.remoteSessionHash,
 				)

src/components/CallView/shared/VideoVue.spec.js

@@ -21,6 +21,7 @@
 
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { cloneDeep } from 'lodash'
+import { createPinia, setActivePinia } from 'pinia'
 import Vuex from 'vuex'
 
 import VideoVue from './VideoVue.vue'
@@ -87,6 +88,7 @@ describe('VideoVue.vue', () => {
 	beforeEach(() => {
 		localVue = createLocalVue()
 		localVue.use(Vuex)
+		setActivePinia(createPinia())
 
 		testStoreConfig = cloneDeep(storeConfig)
 		// eslint-disable-next-line import/no-named-as-default-member

src/components/CallView/shared/VideoVue.vue

@@ -111,6 +111,7 @@ import VideoBottomBar from './VideoBottomBar.vue'
 import { ATTENDEE } from '../../../constants.js'
 import video from '../../../mixins/video.js'
 import { EventBus } from '../../../services/EventBus.js'
+import { useGuestNameStore } from '../../../stores/guestName.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
 
 export default {
@@ -187,6 +188,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	data() {
 		return {
 			videoAspectRatio: null,
@@ -393,7 +399,7 @@ export default {
 			// for registered users, so do not fall back to the guest name in
 			// the store either until the connection was made.
 			if (!this.model.attributes.userId && !participantName && participantName !== undefined) {
-				participantName = this.$store.getters.getGuestName(
+				participantName = this.guestNameStore.getGuestName(
 					this.$store.getters.getToken(),
 					this.sessionHash,
 				)

src/components/MediaSettings/MediaSettings.vue

@@ -208,6 +208,7 @@ import { CALL, VIRTUAL_BACKGROUND } from '../../constants.js'
 import { devices } from '../../mixins/devices.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
+import { useGuestNameStore } from '../../stores/guestName.js'
 import { localMediaModel } from '../../utils/webrtc/index.js'
 
 export default {
@@ -242,7 +243,8 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
-		return { isInCall }
+		const guestNameStore = useGuestNameStore()
+		return { isInCall, guestNameStore }
 	},
 
 	data() {
@@ -271,7 +273,7 @@ export default {
 		},
 
 		guestName() {
-			return this.$store.getters.getGuestName(
+			return this.guestNameStore.getGuestName(
 				this.$store.getters.getToken(),
 				this.$store.getters.getActorId(),
 			)

src/components/MessagesList/MessagesGroup/Message/Message.spec.js

@@ -1,6 +1,7 @@
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils'
 import flushPromises from 'flush-promises' // TODO fix after migration to @vue/test-utils v2.0.0
 import { cloneDeep } from 'lodash'
+import { createPinia, setActivePinia } from 'pinia'
 import vOutsideEvents from 'vue-outside-events'
 import Vuex, { Store } from 'vuex'
 
@@ -57,6 +58,7 @@ describe('Message.vue', () => {
 		localVue = createLocalVue()
 		localVue.use(vOutsideEvents)
 		localVue.use(Vuex)
+		setActivePinia(createPinia())
 
 		conversationProps = {
 			token: TOKEN,

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -263,6 +263,7 @@ import { useIsInCall } from '../../../../composables/useIsInCall.js'
 import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
 import participant from '../../../../mixins/participant.js'
 import { EventBus } from '../../../../services/EventBus.js'
+import { useGuestNameStore } from '../../../../stores/guestName.js'
 
 const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
 
@@ -437,7 +438,8 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
-		return { isInCall, isTranslationAvailable }
+		const guestNameStore = useGuestNameStore()
+		return { isInCall, isTranslationAvailable, guestNameStore }
 	},
 
 	expose: ['highlightMessage'],
@@ -856,7 +858,7 @@ export default {
 			const displayName = reaction.actorDisplayName.trim()
 
 			if (reaction.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
-				return this.$store.getters.getGuestNameWithGuestSuffix(this.token, reaction.actorId)
+				return this.guestNameStore.getGuestNameWithGuestSuffix(this.token, reaction.actorId)
 			}
 
 			if (displayName === '') {

src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js

@@ -1,27 +1,30 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { cloneDeep } from 'lodash'
+import { createPinia, setActivePinia } from 'pinia'
 import Vuex from 'vuex'
 
 import MessagesGroup from './MessagesGroup.vue'
 import MessagesSystemGroup from './MessagesSystemGroup.vue'
 
 import { ATTENDEE } from '../../../constants.js'
 import storeConfig from '../../../store/storeConfig.js'
+import { useGuestNameStore } from '../../../stores/guestName.js'
 
 describe('MessagesGroup.vue', () => {
 	const TOKEN = 'XXTOKENXX'
 	let store
 	let localVue
 	let testStoreConfig
-	let getGuestNameMock
+	let guestNameStore
 
 	beforeEach(() => {
 		localVue = createLocalVue()
 		localVue.use(Vuex)
+		setActivePinia(createPinia())
+
+		guestNameStore = useGuestNameStore()
 
 		testStoreConfig = cloneDeep(storeConfig)
-		getGuestNameMock = jest.fn()
-		testStoreConfig.modules.guestNameStore.getters.getGuestName = () => getGuestNameMock
 		// eslint-disable-next-line import/no-named-as-default-member
 		store = new Vuex.Store(testStoreConfig)
 	})
@@ -179,7 +182,13 @@ describe('MessagesGroup.vue', () => {
 	})
 
 	test('renders guest display name', () => {
-		getGuestNameMock.mockReturnValue('guest-one-display-name')
+		// Arrange
+		guestNameStore.addGuestName({
+			token: TOKEN,
+			actorId: 'actor-1',
+			actorDisplayName: 'guest-one-display-name',
+		}, { noUpdate: false })
+
 		const wrapper = shallowMount(MessagesGroup, {
 			localVue,
 			store,
@@ -232,8 +241,6 @@ describe('MessagesGroup.vue', () => {
 		message = messagesEl.at(1)
 		expect(message.attributes('id')).toBe('110')
 		expect(message.attributes('actorid')).toBe('actor-1')
-
-		expect(getGuestNameMock).toHaveBeenCalledWith(TOKEN, 'actor-1')
 	})
 
 	test('renders deleted guest display name', () => {

src/components/MessagesList/MessagesGroup/MessagesGroup.vue

@@ -48,6 +48,7 @@ import AuthorAvatar from './AuthorAvatar.vue'
 import Message from './Message/Message.vue'
 
 import { ATTENDEE } from '../../../constants.js'
+import { useGuestNameStore } from '../../../stores/guestName.js'
 
 export default {
 	name: 'MessagesGroup',
@@ -85,6 +86,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	expose: ['highlightMessage'],
 
 	computed: {
@@ -113,7 +119,7 @@ export default {
 			const displayName = this.messages[0].actorDisplayName.trim()
 
 			if (this.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
-				return this.$store.getters.getGuestName(this.token, this.actorId)
+				return this.guestNameStore.getGuestName(this.token, this.actorId)
 			}
 
 			if (displayName === '') {

src/components/NewMessage/NewMessageTypingIndicator.vue

@@ -45,6 +45,8 @@ import escapeHtml from 'escape-html'
 
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
+import { useGuestNameStore } from '../../stores/guestName.js'
+
 export default {
 	name: 'NewMessageTypingIndicator',
 	components: { AvatarWrapper },
@@ -59,6 +61,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	computed: {
 		isGuest() {
 			return this.$store.getters.getActorType() === 'guests'
@@ -131,7 +138,7 @@ export default {
 				return participant.displayName
 			}
 
-			return this.$store.getters.getGuestName(this.token, participant.actorId)
+			return this.guestNameStore.getGuestName(this.token, participant.actorId)
 		},
 	},
 }

src/components/SetGuestUsername.vue

@@ -55,6 +55,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { setGuestUserName } from '../services/participantsService.js'
+import { useGuestNameStore } from '../stores/guestName.js'
 
 export default {
 	name: 'SetGuestUsername',
@@ -65,6 +66,11 @@ export default {
 		Pencil,
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	data() {
 		return {
 			guestUserName: '',
@@ -121,11 +127,11 @@ export default {
 			const previousName = this.$store.getters.getDisplayName()
 			try {
 				this.$store.dispatch('setDisplayName', this.guestUserName)
-				this.$store.dispatch('forceGuestName', {
+				this.guestNameStore.addGuestName({
 					token: this.token,
 					actorId: this.$store.getters.getActorId(),
 					actorDisplayName: this.guestUserName,
-				})
+				}, { noUpdate: false })
 				await setGuestUserName(this.token, this.guestUserName)
 				if (this.guestUserName !== '') {
 					localStorage.setItem('nick', this.guestUserName)
@@ -135,11 +141,11 @@ export default {
 				this.isEditingUsername = false
 			} catch (exception) {
 				this.$store.dispatch('setDisplayName', previousName)
-				this.$store.dispatch('forceGuestName', {
+				this.guestNameStore.addGuestName({
 					token: this.token,
 					actorId: this.$store.getters.getActorId(),
 					actorDisplayName: previousName,
-				})
+				}, { noUpdate: false })
 				console.debug(exception)
 			}
 		},