use true parent prop for replies

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

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

@@ -295,10 +295,9 @@ describe('Message.vue', () => {
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
 				messageParameters: {},
 				token: TOKEN,
-				parentId: -1,
 				reactions: '',
 			}
-			messageProps.parent = 120
+			messageProps.parent = parentMessage
 
 			const messageGetterMock = jest.fn().mockReturnValue(parentMessage)
 			testStoreConfig.modules.messagesStore.getters.message = jest.fn(() => messageGetterMock)
@@ -311,9 +310,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" :parent-id="parent" v-bind="quote" />
+					<Quote v-if="parent" v-bind="parent" />
 					<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" :parent-id="parent" v-bind="quote" />
+					<Quote v-if="parent" v-bind="parent" />
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
@@ -395,11 +395,11 @@ export default {
 			required: true,
 		},
 		/**
-		 * The parent message's id.
+		 * The parent message.
 		 */
 		parent: {
-			type: Number,
-			default: 0,
+			type: Object,
+			default: undefined,
 		},
 		/**
 		 * Is message allowed to render in markdown
@@ -493,10 +493,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/NewMessage/NewMessage.vue

@@ -79,9 +79,7 @@
 					</NcButton>
 				</div>
 				<div v-if="messageToBeReplied" class="new-message-form__quote">
-					<Quote is-new-message-quote
-						:parent-id="messageToBeReplied.id"
-						v-bind="messageToBeReplied" />
+					<Quote is-new-message-quote v-bind="messageToBeReplied" />
 				</div>
 				<NcRichContenteditable ref="richContenteditable"
 					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
@@ -548,11 +546,9 @@ export default {
 
 					// Restore the parent/quote message
 					if (temporaryMessage.parent) {
-						const temporaryParent = this.$store.getters.message(this.token, temporaryMessage.parent)
-
 						this.$store.dispatch('addMessageToBeReplied', {
-							token: temporaryParent.token,
-							id: temporaryParent.id,
+							token: this.token,
+							id: temporaryMessage.parent.id,
 						})
 					}
 

src/components/Quote.vue

@@ -139,13 +139,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		/**
-		 * The parent message's id
-		 */
-		parentId: {
-			type: Number,
-			required: true,
-		},
 	},
 	computed: {
 		/**
@@ -251,7 +244,14 @@ export default {
 		},
 
 		handleQuoteClick() {
-			EventBus.$emit('focus-message', this.parentId)
+			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/services/messagesService.js

@@ -98,7 +98,7 @@ const getMessageContext = async function({ token, messageId, limit = 50 }, optio
  * @param {string} param0.message The message object
  * @param {string} param0.actorDisplayName The display name of the actor
  * @param {string} param0.referenceId A reference id to identify the message later again
- * @param {number} param0.parent The id of the message to be replied to
+ * @param {object|undefined} param0.parent The message to be replied to
  * @param {object} options request options
  * @param {boolean} options.silent whether the message should trigger a notifications for the
  * recipients or not
@@ -108,7 +108,7 @@ const postNewMessage = async function({ token, message, actorDisplayName, refere
 		message,
 		actorDisplayName,
 		referenceId,
-		replyTo: parent,
+		replyTo: parent?.id,
 		silent: options.silent,
 	}, options)
 }

src/services/messagesService.spec.js

@@ -120,7 +120,7 @@ describe('messagesService', () => {
 			message: 'hello world!',
 			actorDisplayName: 'actor-display-name',
 			referenceId: 'reference-id',
-			parent: 111,
+			parent: { id: 111 },
 		}, {
 			dummyOption: true,
 		})

src/store/messagesStore.js

@@ -520,10 +520,10 @@ const actions = {
 						messageId: message.parent,
 					})
 				}
+				message.parent = message.parent.id
 				// Quit processing
 				return
 			}
-			message.parent = message.parent.id
 		}
 
 		if (message.referenceId) {
@@ -607,6 +607,7 @@ const actions = {
 	 */
 	createTemporaryMessage(context, { text, token, uploadId, index, file, localUrl, isVoiceMessage }) {
 		const parentId = context.getters.getMessageToBeReplied(token)
+		const parent = parentId && context.getters.message(token, parentId)
 		const date = new Date()
 		let tempId = 'temp-' + date.getTime()
 		const messageParameters = {}
@@ -636,7 +637,7 @@ const actions = {
 			message: text,
 			messageParameters,
 			token,
-			parent: parentId ?? 0,
+			parent,
 			isReplyable: false,
 			sendingFailure: '',
 			reactions: {},

src/store/messagesStore.spec.js

@@ -69,21 +69,25 @@ describe('messagesStore', () => {
 
 		test('doesn\'t add specific messages to the store', () => {
 			const messages = [{
-				id: 1,
+				id: 2,
 				token: TOKEN,
 				systemMessage: 'message_deleted',
+				parent: { id: 1 },
 			}, {
-				id: 2,
+				id: 3,
 				token: TOKEN,
 				systemMessage: 'reaction',
+				parent: { id: 1 },
 			}, {
-				id: 3,
+				id: 4,
 				token: TOKEN,
 				systemMessage: 'reaction_deleted',
+				parent: { id: 1 },
 			}, {
-				id: 4,
+				id: 5,
 				token: TOKEN,
 				systemMessage: 'reaction_revoked',
+				parent: { id: 1 },
 			}]
 
 			messages.forEach(message => {
@@ -93,7 +97,7 @@ describe('messagesStore', () => {
 			expect(store.getters.messagesList(TOKEN)).toHaveLength(0)
 		})
 
-		test('adds message with its parent to the list', () => {
+		test('adds user\'s message with included parent to the store', () => {
 			const parentMessage = {
 				id: 1,
 				token: TOKEN,
@@ -102,15 +106,11 @@ 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,
-				parent: 1,
-			})
+			expect(store.getters.messagesList(TOKEN)).toMatchObject([message1])
 		})
 
 		test('deletes matching temporary message when referenced', () => {
@@ -337,7 +337,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,
@@ -348,7 +348,6 @@ describe('messagesStore', () => {
 				message: 'blah',
 				messageParameters: {},
 				token: TOKEN,
-				parent: 0,
 				isReplyable: false,
 				sendingFailure: '',
 				reactions: {},
@@ -357,6 +356,14 @@ describe('messagesStore', () => {
 		})
 
 		test('creates temporary message with message to be replied', async () => {
+			const parent = {
+				id: 123,
+				token: TOKEN,
+				message: 'hello',
+			}
+
+			store.dispatch('processMessage', parent)
+
 			getMessageToBeRepliedMock.mockReset()
 			getMessageToBeRepliedMock.mockReturnValue(() => (123))
 
@@ -369,7 +376,7 @@ describe('messagesStore', () => {
 				localUrl: null,
 			})
 
-			expect(temporaryMessage).toStrictEqual({
+			expect(temporaryMessage).toMatchObject({
 				id: 'temp-1577908800000',
 				actorId: 'actor-id-1',
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
@@ -380,7 +387,7 @@ describe('messagesStore', () => {
 				message: 'blah',
 				messageParameters: {},
 				token: TOKEN,
-				parent: 123,
+				parent,
 				isReplyable: false,
 				sendingFailure: '',
 				reactions: {},
@@ -403,7 +410,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,
@@ -425,7 +432,6 @@ describe('messagesStore', () => {
 					},
 				},
 				token: TOKEN,
-				parent: 0,
 				isReplyable: false,
 				sendingFailure: '',
 				reactions: {},
@@ -445,7 +451,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,
@@ -456,7 +462,6 @@ describe('messagesStore', () => {
 				message: 'blah',
 				messageParameters: {},
 				token: TOKEN,
-				parent: 0,
 				isReplyable: false,
 				sendingFailure: '',
 				reactions: {},
@@ -469,7 +474,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,
@@ -480,7 +485,6 @@ describe('messagesStore', () => {
 				message: 'replaced',
 				messageParameters: {},
 				token: TOKEN,
-				parent: 0,
 				isReplyable: false,
 				sendingFailure: '',
 				reactions: {},
@@ -504,7 +508,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,
@@ -515,7 +519,6 @@ describe('messagesStore', () => {
 				message: 'blah',
 				messageParameters: {},
 				token: TOKEN,
-				parent: 0,
 				isReplyable: false,
 				sendingFailure: 'failure-reason',
 				reactions: {},
@@ -551,7 +554,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,
@@ -562,7 +565,6 @@ describe('messagesStore', () => {
 				message: 'blah',
 				messageParameters: {},
 				token: TOKEN,
-				parent: 0,
 				isReplyable: false,
 				sendingFailure: '',
 				reactions: {},