Merge pull request #11165 from nextcloud/feat/11053/migrate-quote-rep…

…ly-store

feat(Pinia): migrate quoteReplyStore (Vuex) to chatExtrasStore (Pinia)

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

@@ -283,6 +283,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 { useChatExtrasStore } from '../../../../stores/chatExtras.js'
 import { useGuestNameStore } from '../../../../stores/guestName.js'
 import { getItemTypeFromMessage } from '../../../../utils/getItemTypeFromMessage.js'
 
@@ -467,8 +468,15 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
+		const chatExtrasStore = useChatExtrasStore()
 		const guestNameStore = useGuestNameStore()
-		return { isInCall, isTranslationAvailable, guestNameStore }
+
+		return {
+			isInCall,
+			isTranslationAvailable,
+			chatExtrasStore,
+			guestNameStore
+		}
 	},
 
 	expose: ['highlightMessage'],
@@ -881,7 +889,7 @@ export default {
 		},
 
 		handleReply() {
-			this.$store.dispatch('addMessageToBeReplied', {
+			this.chatExtrasStore.setParentIdToReply({
 				token: this.token,
 				id: this.id,
 			})

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

@@ -106,8 +106,6 @@ describe('MessageButtonsBar.vue', () => {
 
 		describe('reply action', () => {
 			test('replies to message', async () => {
-				const replyAction = jest.fn()
-				testStoreConfig.modules.quoteReplyStore.actions.addMessageToBeReplied = replyAction
 				store = new Store(testStoreConfig)
 
 				const wrapper = shallowMount(MessageButtonsBar, {

src/components/NewMessage/NewMessage.vue

@@ -82,8 +82,8 @@
 						</template>
 					</NcButton>
 				</div>
-				<div v-if="messageToBeReplied" class="new-message-form__quote">
-					<Quote is-new-message-quote v-bind="messageToBeReplied" />
+				<div v-if="parentMessage" class="new-message-form__quote">
+					<Quote is-new-message-quote v-bind="parentMessage" />
 				</div>
 				<NcRichContenteditable ref="richContenteditable"
 					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
@@ -331,8 +331,8 @@ export default {
 			}
 		},
 
-		messageToBeReplied() {
-			const parentId = this.$store.getters.getMessageToBeReplied(this.token)
+		parentMessage() {
+			const parentId = this.chatExtrasStore.getParentIdToReply(this.token)
 			return parentId && this.$store.getters.message(this.token, parentId)
 		},
 
@@ -403,14 +403,14 @@ export default {
 		},
 
 		text(newValue) {
-			this.$store.dispatch('setCurrentMessageInput', { token: this.token, text: newValue })
+			this.chatExtrasStore.setChatInput({ token: this.token, text: newValue })
 		},
 
 		token: {
 			immediate: true,
 			handler(token) {
 				if (token) {
-					this.text = this.$store.getters.currentMessageInput(token)
+					this.text = this.chatExtrasStore.getChatInput(token)
 				} else {
 					this.text = ''
 				}
@@ -426,7 +426,7 @@ export default {
 		EventBus.$on('upload-start', this.handleUploadSideEffects)
 		EventBus.$on('upload-discard', this.handleUploadSideEffects)
 		EventBus.$on('retry-message', this.handleRetryMessage)
-		this.text = this.$store.getters.currentMessageInput(this.token)
+		this.text = this.chatExtrasStore.getChatInput(this.token)
 
 		if (!this.$store.getters.areFileTemplatesInitialised) {
 			this.$store.dispatch('getFileTemplates')
@@ -484,7 +484,7 @@ export default {
 			}
 			this.$nextTick(() => {
 				// reset or fill main input in chat view from the store
-				this.text = this.$store.getters.currentMessageInput(this.token)
+				this.text = this.chatExtrasStore.getChatInput(this.token)
 				// refocus input as the user might want to type further
 				this.focusInput()
 			})
@@ -516,7 +516,7 @@ export default {
 
 			if (this.upload) {
 				// Clear input content from store
-				this.$store.dispatch('setCurrentMessageInput', { token: this.token, text: '' })
+				this.chatExtrasStore.setChatInput({ token: this.token, text: '' })
 
 				if (this.$store.getters.getInitialisedUploads(this.$store.getters.currentUploadId).length) {
 					// If dialog contains files to upload, delegate sending
@@ -539,7 +539,7 @@ export default {
 				// Scrolls the message list to the last added message
 				EventBus.$emit('smooth-scroll-chat-to-bottom')
 				// Also remove the message to be replied for this conversation
-				await this.$store.dispatch('removeMessageToBeReplied', this.token)
+				this.chatExtrasStore.removeParentIdToReply(this.token)
 
 				this.broadcast
 					? await this.broadcastMessage(temporaryMessage, options)
@@ -592,7 +592,7 @@ export default {
 
 					// Restore the parent/quote message
 					if (temporaryMessage.parent) {
-						this.$store.dispatch('addMessageToBeReplied', {
+						this.chatExtrasStore.setParentIdToReply({
 							token: this.token,
 							id: temporaryMessage.parent.id,
 						})
@@ -837,9 +837,7 @@ export default {
 				})
 			} else {
 				// Remove stored absence status
-				this.chatExtrasStore.resetUserAbsence({
-					token: this.token,
-				})
+				this.chatExtrasStore.removeUserAbsence(this.token)
 			}
 		}
 	},

src/components/Quote.vue

@@ -76,6 +76,7 @@ import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePr
 
 import { AVATAR } from '../constants.js'
 import { EventBus } from '../services/EventBus.js'
+import { useChatExtrasStore } from '../stores/chatExtras.js'
 
 export default {
 	name: 'Quote',
@@ -143,7 +144,12 @@ export default {
 	},
 
 	setup() {
-		return { AVATAR }
+		const chatExtrasStore = useChatExtrasStore()
+
+		return {
+			AVATAR,
+			chatExtrasStore,
+		}
 	},
 
 	computed: {
@@ -243,12 +249,8 @@ export default {
 		},
 	},
 	methods: {
-		/**
-		 * Stops the quote-reply operation by removing the MessageToBeReplied from
-		 * the quoteReplyStore.
-		 */
 		handleAbortReply() {
-			this.$store.dispatch('removeMessageToBeReplied', this.token)
+			this.chatExtrasStore.removeParentIdToReply(this.token)
 			EventBus.$emit('focus-chat-input')
 		},
 

src/store/conversationsStore.js

@@ -65,6 +65,7 @@ import {
 	stopCallRecording,
 } from '../services/recordingService.js'
 import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
+import { useChatExtrasStore } from '../stores/chatExtras.js'
 
 const DUMMY_CONVERSATION = {
 	token: '',
@@ -317,10 +318,12 @@ const actions = {
 	 * Delete a conversation from the store.
 	 *
 	 * @param {object} context default store context;
-	 * @param {object} token the token of the conversation to be deleted;
+	 * @param {string} token the token of the conversation to be deleted;
 	 */
 	deleteConversation(context, token) {
 		// FIXME: rename to deleteConversationsFromStore or a better name
+		const chatExtrasStore = useChatExtrasStore()
+		chatExtrasStore.purgeChatExtras(token)
 		context.dispatch('deleteMessages', token)
 		context.commit('deleteConversation', token)
 	},
@@ -431,6 +434,8 @@ const actions = {
 	async clearConversationHistory(context, { token }) {
 		try {
 			const response = await clearConversationHistory(token)
+			const chatExtrasStore = useChatExtrasStore()
+			chatExtrasStore.removeParentIdToReply(token)
 			context.dispatch('deleteMessages', token)
 			return response
 		} catch (error) {

src/store/conversationsStore.spec.js

@@ -1,6 +1,7 @@
 import { createLocalVue } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import { cloneDeep } from 'lodash'
+import { createPinia, setActivePinia } from 'pinia'
 import Vuex from 'vuex'
 
 import { emit } from '@nextcloud/event-bus'
@@ -82,6 +83,7 @@ describe('conversationsStore', () => {
 	beforeEach(() => {
 		localVue = createLocalVue()
 		localVue.use(Vuex)
+		setActivePinia(createPinia())
 
 		testConversation = {
 			token: testToken,

src/store/messagesStore.js

@@ -43,6 +43,7 @@ import {
 	addReactionToMessage,
 	removeReactionFromMessage,
 } from '../services/messagesService.js'
+import { useChatExtrasStore } from '../stores/chatExtras.js'
 import { useGuestNameStore } from '../stores/guestName.js'
 import { useSharedItemsStore } from '../stores/sharedItems.js'
 import CancelableRequest from '../utils/cancelableRequest.js'
@@ -617,7 +618,8 @@ const actions = {
 	 * @return {object} temporary message
 	 */
 	createTemporaryMessage(context, { text, token, uploadId, index, file, localUrl, isVoiceMessage }) {
-		const parentId = context.getters.getMessageToBeReplied(token)
+		const chatExtrasStore = useChatExtrasStore()
+		const parentId = chatExtrasStore.getParentIdToReply(token)
 		const parent = parentId && context.getters.message(token, parentId)
 		const date = new Date()
 		let tempId = 'temp-' + date.getTime()

src/store/messagesStore.spec.js

@@ -25,6 +25,7 @@ import {
 	postNewMessage,
 	postRichObjectToConversation,
 } from '../services/messagesService.js'
+import { useChatExtrasStore } from '../stores/chatExtras.js'
 import { useGuestNameStore } from '../stores/guestName.js'
 import { generateOCSErrorResponse, generateOCSResponse } from '../test-helpers.js'
 import CancelableRequest from '../utils/cancelableRequest.js'
@@ -318,23 +319,22 @@ describe('messagesStore', () => {
 
 	describe('temporary messages', () => {
 		let mockDate
-		let getMessageToBeRepliedMock
 		let getActorIdMock
 		let getActorTypeMock
 		let getDisplayNameMock
+		let chatExtraStore
 
 		beforeEach(() => {
 			mockDate = new Date('2020-01-01 20:00:00')
 			jest.spyOn(global, 'Date')
 				.mockImplementation(() => mockDate)
 
 			testStoreConfig = cloneDeep(messagesStore)
+			chatExtraStore = useChatExtrasStore()
 
-			getMessageToBeRepliedMock = jest.fn().mockReturnValue(() => undefined)
 			getActorIdMock = jest.fn().mockReturnValue(() => 'actor-id-1')
 			getActorTypeMock = jest.fn().mockReturnValue(() => ATTENDEE.ACTOR_TYPE.USERS)
 			getDisplayNameMock = jest.fn().mockReturnValue(() => 'actor-display-name-1')
-			testStoreConfig.getters.getMessageToBeReplied = getMessageToBeRepliedMock
 			testStoreConfig.getters.getActorId = getActorIdMock
 			testStoreConfig.getters.getActorType = getActorTypeMock
 			testStoreConfig.getters.getDisplayName = getDisplayNameMock
@@ -353,7 +353,6 @@ describe('messagesStore', () => {
 				localUrl: null,
 			})
 
-			expect(getMessageToBeRepliedMock).toHaveBeenCalled()
 			expect(getActorIdMock).toHaveBeenCalled()
 			expect(getActorTypeMock).toHaveBeenCalled()
 			expect(getDisplayNameMock).toHaveBeenCalled()
@@ -384,9 +383,7 @@ describe('messagesStore', () => {
 			}
 
 			store.dispatch('processMessage', parent)
-
-			getMessageToBeRepliedMock.mockReset()
-			getMessageToBeRepliedMock.mockReturnValue(() => (123))
+			chatExtraStore.setParentIdToReply({ token: TOKEN, id: 123 })
 
 			const temporaryMessage = await store.dispatch('createTemporaryMessage', {
 				text: 'blah',