Merge pull request #5494 from nextcloud/bug/5322/another-frontend-threading

Add threading to frontend

5 files changed, 163 insertions, 16 deletions

diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 5bbfea372..15dea0cdb 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -91,13 +91,16 @@ export default {
 			return parseInt(this.$route.params.threadId, 10)
 		},
 		thread() {
-			const envelopes = this.$store.getters.getEnvelopeThread(this.threadId)
-			const envelope = envelopes.find(envelope => envelope.databaseId === this.threadId)
-
+			const envelope = this.$store.getters.getEnvelope(this.threadId)
 			if (envelope === undefined) {
 				return []
 			}
 
+			const envelopes = this.$store.getters.getEnvelopesByThreadRootId(envelope.accountId, envelope.threadRootId)
+			if (envelopes.length === 0) {
+				return []
+			}
+
 			const currentMailbox = this.$store.getters.getMailbox(envelope.mailboxId)
 			const trashMailbox = this.$store.getters.getMailboxes(currentMailbox.accountId).find(mailbox => mailbox.specialRole === 'trash')
 
diff --git a/src/store/getters.js b/src/store/getters.js
index 9e4e59518..6d5204fd6 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -19,7 +19,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { defaultTo, head, sortBy, prop } from 'ramda'
+import { defaultTo, head, prop, sortBy } from 'ramda'
 
 import { UNIFIED_ACCOUNT_ID } from './constants'
 import { normalizedEnvelopeListId } from './normalization'
@@ -70,6 +70,12 @@ export const getters = {
 		const list = getters.getMailbox(mailboxId).envelopeLists[normalizedEnvelopeListId(query)] || []
 		return list.map((msgId) => state.envelopes[msgId])
 	},
+	getEnvelopesByThreadRootId: (state) => (accountId, threadRootId) => {
+		return sortBy(
+			prop('dateInt'),
+			Object.values(state.envelopes).filter(envelope => envelope.accountId === accountId && envelope.threadRootId === threadRootId)
+		)
+	},
 	getMessage: (state) => (id) => {
 		return state.messages[id]
 	},
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 17cbe5ef2..9c7e2d897 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -106,6 +106,27 @@ const normalizeTags = (state, envelope) => {
 	Vue.set(envelope, 'tags', tags)
 }
 
+/**
+ * Append or replace an envelope id for an existing message list
+ *
+ * If the given thread root id exist the message is replaced
+ * otherwise appended
+ *
+ * @param {Object} state vuex state
+ * @param {Array} existing list of envelope ids for a message list
+ * @param {Object} envelope envelope with tag objects
+ * @returns {Array} list of envelope ids
+ */
+const appendOrReplaceEnvelopeId = (state, existing, envelope) => {
+	const index = existing.findIndex((id) => state.envelopes[id].threadRootId === envelope.threadRootId)
+	if (index === -1) {
+		existing.push(envelope.databaseId)
+	} else {
+		existing[index] = envelope.databaseId
+	}
+	return existing
+}
+
 export default {
 	savePreference(state, { key, value }) {
 		Vue.set(state.preferences, key, value)
@@ -203,11 +224,13 @@ export default {
 		const mailbox = state.mailboxes[envelope.mailboxId]
 		Vue.set(state.envelopes, envelope.databaseId, Object.assign({}, state.envelopes[envelope.databaseId] || {}, envelope))
 		Vue.set(envelope, 'accountId', mailbox.accountId)
-		const listId = normalizedEnvelopeListId(query)
-		const existing = mailbox.envelopeLists[listId] || []
+
 		const idToDateInt = (id) => state.envelopes[id].dateInt
 		const orderByDateInt = orderBy(idToDateInt, 'desc')
-		Vue.set(mailbox.envelopeLists, listId, uniq(orderByDateInt(existing.concat([envelope.databaseId]))))
+
+		const listId = normalizedEnvelopeListId(query)
+		const existing = mailbox.envelopeLists[listId] || []
+		Vue.set(mailbox.envelopeLists, listId, uniq(orderByDateInt(appendOrReplaceEnvelopeId(state, existing, envelope))))
 
 		if (!addToUnifiedMailboxes) {
 			return
@@ -221,7 +244,7 @@ export default {
 				Vue.set(
 					mailbox.envelopeLists,
 					listId,
-					uniq(orderByDateInt(existing.concat([envelope.databaseId])))
+					uniq(orderByDateInt(appendOrReplaceEnvelopeId(state, existing, envelope)))
 				)
 			})
 	},
diff --git a/src/tests/unit/store/getters.spec.js b/src/tests/unit/store/getters.spec.js
index 3d6d70493..bc9798c1a 100644
--- a/src/tests/unit/store/getters.spec.js
+++ b/src/tests/unit/store/getters.spec.js
@@ -91,7 +91,7 @@ describe('Vuex store getters', () => {
 				1,
 				2,
 				3,
-			]
+			],
 		}
 		state.envelopes[2] = {
 			databaseId: 1,
@@ -117,7 +117,7 @@ describe('Vuex store getters', () => {
 					1,
 					2,
 					3,
-				]
+				],
 			},
 			{
 				databaseId: 1,
@@ -131,4 +131,65 @@ describe('Vuex store getters', () => {
 			},
 		])
 	})
+
+	it('return envelopes by thread root id', () => {
+		state.envelopes[0] = {
+			accountId: 1,
+			databaseId: 1,
+			uid: 101,
+			mailboxId: 13,
+			threadRootId: '123-456-789',
+		}
+		state.envelopes[1] = {
+			accountId: 1,
+			databaseId: 2,
+			uid: 102,
+			mailboxId: 13,
+			threadRootId: '123-456-789',
+		}
+		state.envelopes[2] = {
+			accountId: 1,
+			databaseId: 3,
+			uid: 103,
+			mailboxId: 13,
+			threadRootId: '234-567-890',
+		}
+		state.envelopes[3] = {
+			accountId: 1,
+			databaseId: 4,
+			uid: 104,
+			mailboxId: 13,
+			threadRootId: '234-567-890',
+		}
+		state.envelopes[4] = {
+			accountId: 2,
+			databaseId: 5,
+			uid: 105,
+			mailboxId: 23,
+			threadRootId: '123-456-789',
+		}
+		const getters = bindGetters()
+
+		const envelopesA = getters.getEnvelopesByThreadRootId(1, '123-456-789')
+		expect(envelopesA).to.be.length(2)
+		expect(envelopesA).to.deep.equal([
+			{
+				accountId: 1,
+				databaseId: 1,
+				uid: 101,
+				mailboxId: 13,
+				threadRootId: '123-456-789',
+			},
+			{
+				accountId: 1,
+				databaseId: 2,
+				uid: 102,
+				mailboxId: 13,
+				threadRootId: '123-456-789',
+			},
+		])
+
+		const envelopesB = getters.getEnvelopesByThreadRootId('345-678-901')
+		expect(envelopesB).to.be.empty
+	})
 })
diff --git a/src/tests/unit/store/mutations.spec.js b/src/tests/unit/store/mutations.spec.js
index fb1a611d5..c6be8b81a 100644
--- a/src/tests/unit/store/mutations.spec.js
+++ b/src/tests/unit/store/mutations.spec.js
@@ -189,7 +189,7 @@ describe('Vuex store mutations', () => {
 					envelopeLists: {},
 					path: 'INBOX.',
 					mailboxes: [],
-				}
+				},
 			},
 			tagList: [],
 			tags: {},
@@ -402,7 +402,7 @@ describe('Vuex store mutations', () => {
 					specialUse: ['archive'],
 					specialRole: 'archive',
 					mailboxes: [],
-				}
+				},
 			},
 			tagList: [],
 			tags: {},
@@ -418,7 +418,7 @@ describe('Vuex store mutations', () => {
 					delimiter: '.',
 					specialUse: ['archive'],
 					specialRole: 'archive',
-				}
+				},
 			})
 
 		expect(state).to.deep.equal({
@@ -493,7 +493,7 @@ describe('Vuex store mutations', () => {
 					specialUse: ['archive'],
 					specialRole: 'archive',
 					mailboxes: [],
-				}
+				},
 			},
 			tagList: [],
 			tags: {},
@@ -509,7 +509,7 @@ describe('Vuex store mutations', () => {
 					delimiter: '.',
 					specialUse: ['archive'],
 					specialRole: 'archive',
-				}
+				},
 			})
 
 		expect(state).to.deep.equal({
@@ -742,6 +742,7 @@ describe('Vuex store mutations', () => {
 				id: 123,
 				subject: 'henlo',
 				uid: 321,
+				threadRootId: '123-456-789',
 			},
 		})
 		mutations.addEnvelope(state, {
@@ -752,6 +753,7 @@ describe('Vuex store mutations', () => {
 				id: 124,
 				subject: 'henlo 2',
 				uid: 322,
+				threadRootId: '234-567-890',
 			},
 		})
 
@@ -771,6 +773,7 @@ describe('Vuex store mutations', () => {
 					id: 123,
 					subject: 'henlo',
 					tags: [],
+					threadRootId: '123-456-789',
 				},
 				12346: {
 					mailboxId: 27,
@@ -779,6 +782,7 @@ describe('Vuex store mutations', () => {
 					subject: 'henlo 2',
 					uid: 322,
 					tags: [],
+					threadRootId: '234-567-890',
 				},
 			},
 			mailboxes: {
@@ -1009,7 +1013,7 @@ describe('Vuex store mutations', () => {
 					databaseId: 124,
 					mailboxId: 27,
 					uid: 12346,
-				}
+				},
 			],
 		})
 
@@ -1432,4 +1436,54 @@ describe('Vuex store mutations', () => {
 			},
 		})
 	})
+
+	it('replace envelope for existing thread root id', () => {
+		const state = {
+			accounts: {
+				[UNIFIED_ACCOUNT_ID]: {
+					accountId: UNIFIED_ACCOUNT_ID,
+					id: UNIFIED_ACCOUNT_ID,
+					mailboxes: [],
+				},
+			},
+			envelopes: {},
+			mailboxes: {
+				27: {
+					name: 'INBOX',
+					accountId: 13,
+					envelopeLists: {},
+				},
+			},
+			tagList: [],
+			tags: {},
+		}
+
+		mutations.addEnvelope(state, {
+			query: undefined,
+			envelope: {
+				mailboxId: 27,
+				databaseId: 12345,
+				id: 123,
+				subject: 'henlo',
+				uid: 321,
+				threadRootId: '123-456-789',
+			},
+		})
+
+		expect(state.mailboxes[27].envelopeLists['']).to.be.length(1)
+
+		mutations.addEnvelope(state, {
+			query: undefined,
+			envelope: {
+				mailboxId: 27,
+				databaseId: 12347,
+				id: 234,
+				subject: 'henlo',
+				uid: 432,
+				threadRootId: '123-456-789',
+			},
+		})
+
+		expect(state.mailboxes[27].envelopeLists['']).to.be.length(1)
+	})
 })