Move the submitGuestUsername to the store

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/GuestWelcomeWindow.vue

@@ -67,6 +67,8 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ConversationIcon from './ConversationIcon.vue'
 
+import { useGuestNameStore } from '../stores/guestName.js'
+
 export default {
 	name: 'GuestWelcomeWindow',
 
@@ -85,6 +87,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const guestNameStore = useGuestNameStore()
+		return { guestNameStore }
+	},
+
 	data() {
 		return {
 			guestUserName: '',
@@ -115,10 +122,7 @@ export default {
 
 	methods: {
 		handleChooseUserName() {
-			this.$store.dispatch('SubmitUserName', {
-				token: this.token,
-				name: this.guestUserName,
-			})
+			this.guestNameStore.submitUserName(this.token, this.guestUserName)
 		},
 	},
 }

src/components/SetGuestUsername.vue

@@ -54,7 +54,6 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 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 {
@@ -128,31 +127,9 @@ export default {
 	},
 
 	methods: {
-		async handleChooseUserName() {
-			const previousName = this.$store.getters.getDisplayName()
-			try {
-				this.$store.dispatch('setDisplayName', this.guestUserName)
-				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)
-				} else {
-					localStorage.removeItem('nick')
-				}
-				this.isEditingUsername = false
-			} catch (exception) {
-				this.$store.dispatch('setDisplayName', previousName)
-				this.guestNameStore.addGuestName({
-					token: this.token,
-					actorId: this.$store.getters.getActorId(),
-					actorDisplayName: previousName,
-				}, { noUpdate: false })
-				console.debug(exception)
-			}
+		handleChooseUserName() {
+			this.guestNameStore.submitUserName(this.token, this.guestUserName)
+			this.isEditingUsername = false
 		},
 
 		handleEditUsername() {

src/stores/guestName.js

@@ -23,6 +23,9 @@
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 
+import { setGuestUserName } from '../services/participantsService.js'
+import store from '../store/index.js'
+
 export const useGuestNameStore = defineStore('guestName', {
 	state: () => ({
 		guestNames: {},
@@ -83,5 +86,42 @@ export const useGuestNameStore = defineStore('guestName', {
 				Vue.set(this.guestNames[token], actorId, actorDisplayName)
 			}
 		},
+
+		/**
+		 * Add the submitted guest name to the store
+		 *
+		 * @param {string} token the token of the conversation
+		 * @param {string} name the new guest name
+		 */
+		async submitUserName(token, name) {
+			const actorId = store.getters.getActorId()
+			const previousName = this.getGuestName(token, actorId)
+
+			try {
+				store.dispatch('setDisplayName', name)
+				this.addGuestName({
+					token,
+					actorId,
+					actorDisplayName: name,
+				}, { noUpdate: false })
+
+				await setGuestUserName(token, name)
+
+				if (name !== '') {
+					localStorage.setItem('nick', name)
+				} else {
+					localStorage.removeItem('nick')
+				}
+
+			} catch (error) {
+				store.dispatch('setDisplayName', previousName)
+				this.addGuestName({
+					token,
+					actorId,
+					actorDisplayName: previousName,
+				}, { noUpdate: false })
+				console.debug(error)
+			}
+		},
 	},
 })