WIP 2 ( commits will be organized later)

Signed-off-by: DorraJaouad <[email protected]>

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

@@ -22,7 +22,7 @@
 
 <template>
 	<!-- reactions buttons and popover with details -->
-	<div class="reactions-wrapper">
+	<div v-if="reactionsCount && reactionsSorted" class="reactions-wrapper">
 		<NcPopover v-for="reaction in reactionsSorted"
 			:key="reaction"
 			:delay="200"
@@ -175,11 +175,14 @@ export default {
 		},
 
 		reactionsSorted() {
-			return this.detailedReactions
-				? Object.keys(this.detailedReactions)
+			if (this.detailedReactions) {
+				return Object.keys(this.detailedReactions)
 					.sort((a, b) => this.detailedReactions[b].length - this.detailedReactions[a].length)
-				: Object.keys(this.plainReactions)
+			} else if (this.plainReactions) {
+				return Object.keys(this.plainReactions)
 					.sort((a, b) => this.plainReactions[b] - this.plainReactions[a])
+			}
+			return undefined
 		},
 
 		/**
@@ -245,7 +248,9 @@ export default {
 		reactionsCount(reaction) {
 			return this.detailedReactions
 				? this.detailedReactions[reaction]?.length
-				: this.plainReactions[reaction]
+				: this.plainReactions
+				? this.plainReactions[reaction]
+				: undefined
 		},
 
 		getReactionSummary(reaction) {

src/components/MessagesList/MessagesList.vue

@@ -34,25 +34,24 @@ get the messagesList array and loop through the list to generate the messages.
 		@scroll="debounceHandleScroll">
 		<div v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
 
-		<template v-for="[item, list] of Object.entries(messagesGroupedByDateByAuthor)">
-			<div :key="item" class="dates-group-wrapper">
-				<div class="messages-group__date">
-					<span class="messages-group__date-text" role="heading" aria-level="3">
-						{{ item }}
-					</span>
-				</div>
-				<template v-for="group of Object.values(list)">
-					<component :is="messagesGroupComponent(group)"
-						:key="group.id"
-						ref="messagesGroup"
-						class="messages-group"
-						:token="token"
-						:messages="group.messages"
-						:previous-message-id="group.previousMessageId"
-						:next-message-id="group.nextMessageId" />
-				</template>
+		<ul v-for="item of dateSeparatorsOrdered"
+			class="dates-group-wrapper">
+			<div :key="item" class="messages-group__date">
+				<span class="messages-group__date-text" role="heading" aria-level="3">
+					{{ item }}
+				</span>
 			</div>
-		</template>
+			<li v-for="group of Object.values(messagesGroupedByDateByAuthor[item])" :key="`${item}-${group.id}`">
+				<component :is="messagesGroupComponent(group)"
+					:key="group.id"
+					ref="messagesGroup"
+					class="messages-group"
+					:token="token"
+					:messages="group.messages"
+					:previous-message-id="group.previousMessageId"
+					:next-message-id="group.nextMessageId" />
+			</li>
+		</ul>
 
 		<template v-if="showLoadingAnimation">
 			<LoadingPlaceholder type="messages"
@@ -136,7 +135,7 @@ export default {
 	data() {
 		return {
 			/**
-			 * An array of messages grouped in nested arrays by same author.
+			 * An array of messages grouped in nested arrays by same day and then by author.
 			 */
 
 			messagesGroupedByDateByAuthor: {},
@@ -174,6 +173,8 @@ export default {
 			debounceUpdateReadMarkerPosition: () => {},
 
 			debounceHandleScroll: () => {},
+
+			dateSeparatorsList: [],
 		}
 	},
 
@@ -248,6 +249,13 @@ export default {
 		chatIdentifier() {
 			return this.token + ':' + this.isParticipant + ':' + this.viewId
 		},
+
+		dateSeparatorsOrdered() {
+			const orderedList = this.dateSeparatorsList.sort((a, b) => {
+				return moment(a.date, 'YYYY-DDD').diff(moment(b.date, 'YYYY-DDD'))
+			})
+			return orderedList.map(item => item.dateSeparator)
+		},
 	},
 
 	watch: {
@@ -273,15 +281,15 @@ export default {
 		token(newToken, oldToken) {
 			// Expire older messages when navigating to another conversation
 			this.$store.dispatch('easeMessageList', { token: oldToken })
+			this.messagesGroupedByDateByAuthor = this.prepareMessagesGroups(this.messagesList)
 		},
 
 		messagesList: {
 			immediate: true,
 			handler(messages) {
-				// TODO - soft update
-				this.messagesGroupedByDateByAuthor = this.prepareMessagesGroupsPart2(messages)
-				// const groups = this.prepareMessagesGroups(messages)
-				// this.messagesGroupedByAuthor = this.softUpdateMessagesGroups(this.messagesGroupedByAuthor, groups)
+				const groups = this.prepareMessagesGroups(messages)
+				this.messagesGroupedByDateByAuthor = groups
+				//this.softUpdateByDateGroups(this.messagesGroupedByDateByAuthor, groups)
 			},
 		},
 	},
@@ -335,7 +343,7 @@ export default {
 	},
 
 	methods: {
-		prepareMessagesGroupsPart2(messages) {
+		prepareMessagesGroups(messages) {
 			let prevGroupMap = {}
 			const groupsByDate = {}
 			let lastMessage = null
@@ -353,6 +361,7 @@ export default {
 					groupsByDate[daySeparator][groupId] = {
 						id: message.id,
 						messages: [message],
+						token: this.token,
 						dateSeparator: daySeparator,
 						previousMessageId: prevGroupMap.length
 							? groupsByDate[prevGroupMap.date][prevGroupMap.groupId].id
@@ -376,15 +385,40 @@ export default {
 			return groupsByDate
 		},
 
-		softUpdateMessagesGroups(oldGroups, newGroups) {
-			const oldGroupsMap = new Map(oldGroups.map(group => [group.id, group]))
+		softUpdateByDateGroups(oldGroups, newGroups) {
+			// Messages were just loaded, no need to compare
+			if (!Object.keys(oldGroups).length) {
+				this.messagesGroupedByDateByAuthor = newGroups
+				return
+			}
 
+			// If token has changed, we need to reset the groups
+			if (Object.values(oldGroups)?.at(-1).some(group => group.token !== this.token)) {
+				this.messagesGroupedByDateByAuthor = newGroups
+				return
+			}
+
+			const oldGroupsMap = new Map(Object.entries(oldGroups))
 			// Check if we have this group in the old list already and it is unchanged
-			return newGroups.map(newGroup => oldGroupsMap.has(newGroup.id)
-				&& this.areGroupsIdentical(newGroup, oldGroupsMap.get(newGroup.id))
-				? oldGroupsMap.get(newGroup.id)
-				: newGroup
-			).sort((a, b) => a.id - b.id)
+			return Object.keys(newGroups).forEach(date => {
+				if (oldGroupsMap.has(date)) {
+					this.softUpdateAuthorGroups(oldGroupsMap.get(date), newGroups[date])
+				} else {
+					this.messagesGroupedByDateByAuthor[date] = newGroups[date]
+				}
+			})
+		},
+
+		softUpdateAuthorGroups(oldGroups, newGroups) {
+			const oldGroupsMap = new Map(Object.entries(oldGroups))
+
+			Object.entries(newGroups).forEach(([id, newGroup]) => {
+				if (oldGroupsMap.has(id) && !this.areGroupsIdentical(newGroup, oldGroupsMap.get(id))) {
+					this.messagesGroupedByDateByAuthor[newGroup.dateSeparator][id] = newGroup
+				} else if (!oldGroupsMap.has(id)) {
+					this.messagesGroupedByDateByAuthor[newGroup.dateSeparator][id] = newGroup
+				}
+			})
 		},
 
 		areGroupsIdentical(group1, group2) {
@@ -505,14 +539,23 @@ export default {
 			}
 
 			// <Today>, <November 11th, 2019>
-			return t('spreed', '{relativeDate}, {absoluteDate}', {
+			const dateSeparator = t('spreed', '{relativeDate}, {absoluteDate}', {
 				relativeDate: relativePrefix,
 				// 'LL' formats a localized date including day of month, month
 				// name and year
 				absoluteDate: date.format('LL'),
 			}, undefined, {
 				escape: false, // French "Today" has a ' in it
 			})
+
+			if (!this.dateSeparatorsList.find(item => item.date === dayOfYear)) {
+				this.dateSeparatorsList.push({
+					date: dayOfYear,
+					dateSeparator,
+				})
+			}
+
+			return dateSeparator
 		},
 
 		/**
@@ -661,7 +704,7 @@ export default {
 		},
 
 		handleMessageEdited() {
-			this.messagesGroupedByDateByAuthor = this.prepareMessagesGroupsPart2(this.messagesList)
+			this.messagesGroupedByDateByAuthor = this.prepareMessagesGroups(this.messagesList)
 		},
 
 		/**