don't add parent messages for replies to the messages store, keep the…

…m in child instead

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

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

@@ -297,7 +297,10 @@ describe('Message.vue', () => {
 				token: TOKEN,
 				reactions: '',
 			}
+
+			// parent message processed and added with the store action
 			messageProps.parent = 120
+			messageProps.parentMessage = parentMessage
 
 			const messageGetterMock = jest.fn().mockReturnValue(parentMessage)
 			testStoreConfig.modules.messagesStore.getters.message = jest.fn(() => messageGetterMock)
@@ -310,9 +313,6 @@ describe('Message.vue', () => {
 				provide: injected,
 			})
 
-			// parent message got queried from the store
-			expect(messageGetterMock).toHaveBeenCalledWith(TOKEN, 120)
-
 			const quote = wrapper.findComponent(Quote)
 			expect(quote.exists()).toBe(true)
 			expect(quote.attributes('message')).toBe('quoted text')

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

@@ -46,7 +46,7 @@ the main body of the message as well as a quote.
 				class="message-body__main">
 				<div v-if="isSingleEmoji"
 					class="message-body__main__text">
-					<Quote v-if="parent" v-bind="quote" />
+					<Quote v-if="parentMessage" v-bind="parentMessage" />
 					<div class="single-emoji">
 						{{ message }}
 					</div>
@@ -77,7 +77,7 @@ the main body of the message as well as a quote.
 						:reference-limit="0" />
 				</div>
 				<div v-else class="message-body__main__text message-body__main__text--markdown">
-					<Quote v-if="parent" v-bind="quote" />
+					<Quote v-if="parentMessage" v-bind="parentMessage" />
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
@@ -401,6 +401,13 @@ export default {
 			type: Number,
 			default: 0,
 		},
+		/**
+		 * The parent message.
+		 */
+		parentMessage: {
+			type: Object,
+			default: undefined,
+		},
 		/**
 		 * Is message allowed to render in markdown
 		 */
@@ -493,10 +500,6 @@ export default {
 			return moment(this.timestamp * 1000).format('LL')
 		},
 
-		quote() {
-			return this.parent && this.$store.getters.message(this.token, this.parent)
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},

src/components/Quote.vue

@@ -244,7 +244,14 @@ export default {
 		},
 
 		handleQuoteClick() {
-			EventBus.$emit('focus-message', this.id)
+			const parentHash = '#message_' + this.id
+			if (this.$route.hash !== parentHash) {
+				// Change route to trigger message fetch, if not fetched yet
+				this.$router.replace(parentHash)
+			} else {
+				// Already on this message route, just trigger highlight
+				EventBus.$emit('focus-message', this.id)
+			}
 		},
 	},
 }

src/store/messagesStore.js

@@ -481,7 +481,9 @@ const actions = {
 	 */
 	processMessage(context, message) {
 		if (message.parent) {
-			context.commit('addMessage', message.parent)
+			if (message.messageType === 'comment') {
+				message.parentMessage = message.parent
+			}
 			message.parent = message.parent.id
 		}
 
@@ -581,6 +583,7 @@ const actions = {
 	 */
 	createTemporaryMessage(context, { text, token, uploadId, index, file, localUrl, isVoiceMessage }) {
 		const parentId = context.getters.getMessageToBeReplied(token)
+		const parentMessage = parentId && context.getters.message(token, parentId)
 		const date = new Date()
 		let tempId = 'temp-' + date.getTime()
 		const messageParameters = {}
@@ -611,6 +614,7 @@ const actions = {
 			messageParameters,
 			token,
 			parent: parentId ?? 0,
+			parentMessage,
 			isReplyable: false,
 			sendingFailure: '',
 			reactions: {},

src/store/messagesStore.spec.js

@@ -76,15 +76,15 @@ describe('messagesStore', () => {
 				id: 2,
 				token: TOKEN,
 				parent: parentMessage,
+				messageType: 'comment',
 			}
 
 			store.dispatch('processMessage', message1)
-			expect(store.getters.messagesList(TOKEN)[0]).toBe(parentMessage)
-			expect(store.getters.messagesList(TOKEN)[1]).toStrictEqual({
-				id: 2,
-				token: TOKEN,
+			expect(store.getters.messagesList(TOKEN)).toStrictEqual([{
+				...message1,
 				parent: 1,
-			})
+				parentMessage,
+			}])
 		})
 
 		test('deletes matching temporary message when referenced', () => {
@@ -196,13 +196,15 @@ describe('messagesStore', () => {
 				data: {
 					ocs: {
 						data: {
-							id: 10,
+							id: 11,
 							token: TOKEN,
 							message: '(deleted)',
+							systemMessage: 'message_deleted',
 							parent: {
-								id: 5,
+								id: 10,
 								token: TOKEN,
 								message: 'parent message',
+								messageType: 'comment_deleted',
 							},
 						},
 					},
@@ -215,15 +217,16 @@ describe('messagesStore', () => {
 			expect(status).toBe(200)
 
 			expect(store.getters.messagesList(TOKEN)).toStrictEqual([{
-				id: 5,
+				id: 10,
 				token: TOKEN,
 				message: 'parent message',
+				messageType: 'comment_deleted',
 			}, {
-				id: 10,
+				id: 11,
 				token: TOKEN,
 				message: '(deleted)',
-				messageType: 'comment_deleted',
-				parent: 5,
+				systemMessage: 'message_deleted',
+				parent: 10,
 			}])
 		})
 
@@ -299,7 +302,7 @@ describe('messagesStore', () => {
 			expect(getActorTypeMock).toHaveBeenCalled()
 			expect(getDisplayNameMock).toHaveBeenCalled()
 
-			expect(temporaryMessage).toStrictEqual({
+			expect(temporaryMessage).toMatchObject({
 				id: 'temp-1577908800000',
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
@@ -319,6 +322,12 @@ describe('messagesStore', () => {
 		})
 
 		test('creates temporary message with message to be replied', async () => {
+			store.dispatch('processMessage', {
+				id: 123,
+				token: TOKEN,
+				message: 'hello',
+			})
+
 			getMessageToBeRepliedMock.mockReset()
 			getMessageToBeRepliedMock.mockReturnValue(() => (123))
 
@@ -331,7 +340,7 @@ describe('messagesStore', () => {
 				localUrl: null,
 			})
 
-			expect(temporaryMessage).toStrictEqual({
+			expect(temporaryMessage).toMatchObject({
 				id: 'temp-1577908800000',
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
@@ -365,7 +374,7 @@ describe('messagesStore', () => {
 				localUrl: 'local-url://original-name.txt',
 			})
 
-			expect(temporaryMessage).toStrictEqual({
+			expect(temporaryMessage).toMatchObject({
 				id: expect.stringMatching(/^temp-1577908800000-upload-id-1-0\.[0-9]*$/),
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
@@ -407,7 +416,7 @@ describe('messagesStore', () => {
 
 			store.dispatch('addTemporaryMessage', temporaryMessage)
 
-			expect(store.getters.messagesList(TOKEN)).toStrictEqual([{
+			expect(store.getters.messagesList(TOKEN)).toMatchObject([{
 				id: 'temp-1577908800000',
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
@@ -431,7 +440,7 @@ describe('messagesStore', () => {
 			temporaryMessage.message = 'replaced'
 			store.dispatch('addTemporaryMessage', temporaryMessage)
 
-			expect(store.getters.messagesList(TOKEN)).toStrictEqual([{
+			expect(store.getters.messagesList(TOKEN)).toMatchObject([{
 				id: 'temp-1577908800000',
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
@@ -466,7 +475,7 @@ describe('messagesStore', () => {
 				reason: 'failure-reason',
 			})
 
-			expect(store.getters.messagesList(TOKEN)).toStrictEqual([{
+			expect(store.getters.messagesList(TOKEN)).toMatchObject([{
 				id: 'temp-1577908800000',
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
@@ -513,7 +522,7 @@ describe('messagesStore', () => {
 
 			store.dispatch('addTemporaryMessage', temporaryMessage)
 
-			expect(store.getters.getTemporaryReferences(TOKEN, temporaryMessage.referenceId)).toStrictEqual([{
+			expect(store.getters.getTemporaryReferences(TOKEN, temporaryMessage.referenceId)).toMatchObject([{
 				id: 'temp-1577908800000',
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,