Fix message not found handling

When the server returns a 404 for an unknown messge the loading shinner
was shown indefinitely before because of a TypeError (the loaded message
can be undefined, thus the .uid access causes an error). This shows the
expected error page again.

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

1 files changed, 40 insertions, 42 deletions

diff --git a/src/components/Message.vue b/src/components/Message.vue
index 886d31fcf..73a53e314 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -135,7 +135,7 @@ export default {
 		this.fetchMessage()
 	},
 	methods: {
-		fetchMessage() {
+		async fetchMessage() {
 			this.loading = true
 			this.message = undefined
 			this.errorMessage = ''
@@ -145,51 +145,49 @@ export default {
 
 			const messageUid = this.$route.params.messageUid
 
-			this.$store
-				.dispatch('fetchMessage', messageUid)
-				.then(message => {
-					// TODO: add timeout so that message isn't flagged when only viewed
-					// for a few seconds
-					if (message.uid !== this.$route.params.messageUid) {
-						Logger.debug("User navigated away, loaded message won't be shown nor flagged as seen")
-						return
-					}
-
-					this.message = message
-
-					if (this.message === undefined) {
-						Logger.info('message could not be found', {messageUid})
-						this.errorMessage = getRandomMessageErrorMessage()
-						this.loading = false
-						return
-					}
-
-					const account = this.$store.getters.getAccount(message.accountId)
-					this.replyRecipient = buildReplyRecipients(message, {
-						label: account.name,
-						email: account.emailAddress,
-					})
-
-					this.replySubject = buildReplySubject(message.subject)
+			try {
+				const message = await this.$store.dispatch('fetchMessage', messageUid)
+				// TODO: add timeout so that message isn't flagged when only viewed
+				// for a few seconds
+				if (message && message.uid !== this.$route.params.messageUid) {
+					Logger.debug("User navigated away, loaded message won't be shown nor flagged as seen")
+					return
+				}
 
-					this.loading = false
+				this.message = message
 
-					this.envelope = this.$store.getters.getEnvelope(message.accountId, message.folderId, message.id)
-					if (!this.envelope.flags.unseen) {
-						// Already seen -> no change necessary
-						return
-					}
+				if (this.message === undefined) {
+					Logger.info('message could not be found', {messageUid})
+					this.errorMessage = getRandomMessageErrorMessage()
+					this.loading = false
+					return
+				}
 
-					return this.$store.dispatch('toggleEnvelopeSeen', this.envelope)
-				})
-				.catch(error => {
-					Logger.error('could not load message ', {messageUid, error})
-					if (error.isError) {
-						this.errorMessage = t('mail', 'Could not load your message')
-						this.error = error
-						this.loading = false
-					}
+				const account = this.$store.getters.getAccount(message.accountId)
+				this.replyRecipient = buildReplyRecipients(message, {
+					label: account.name,
+					email: account.emailAddress,
 				})
+
+				this.replySubject = buildReplySubject(message.subject)
+
+				this.loading = false
+
+				this.envelope = this.$store.getters.getEnvelope(message.accountId, message.folderId, message.id)
+				if (!this.envelope.flags.unseen) {
+					// Already seen -> no change necessary
+					return
+				}
+
+				return this.$store.dispatch('toggleEnvelopeSeen', this.envelope)
+			} catch (error) {
+				Logger.error('could not load message ', {messageUid, error})
+				if (error.isError) {
+					this.errorMessage = t('mail', 'Could not load your message')
+					this.error = error
+					this.loading = false
+				}
+			}
 		},
 		replyMessage() {
 			this.$router.push({