Both UI timer and database timer will remove expired message

js/models/conversations.js

@@ -166,15 +166,18 @@
       this.updateLastMessage();
 
       const removeMessage = () => {
-        const existing = this.messageCollection.get(message.id);
+        const { id } = message;
+        const existing = this.messageCollection.get(id);
         if (!existing) {
           return;
         }
 
         window.log.info('Remove expired message from collection', {
-          sentAt: message.get('sent_at'),
+          sentAt: existing.get('sent_at'),
         });
-        this.messageCollection.remove(message.id);
+
+        this.messageCollection.remove(id);
+        existing.trigger('expired');
       };
 
       // If a fetch is in progress, then we need to wait until that's complete to

js/models/messages.js

@@ -83,6 +83,7 @@
       this.on('change:expirationStartTimestamp', this.setToExpire);
       this.on('change:expireTimer', this.setToExpire);
       this.on('unload', this.unload);
+      this.on('expired', this.onExpired);
       this.setToExpire();
     },
     idForLogging() {
@@ -233,7 +234,9 @@
         this.quotedMessage = null;
       }
     },
-
+    onExpired() {
+      this.hasExpired = true;
+    },
     getPropsForTimerNotification() {
       const { expireTimer, fromSync, source } = this.get(
         'expirationTimerUpdate'
@@ -424,6 +427,7 @@
         attachment: this.getPropsForAttachment(firstAttachment),
         quote: this.getPropsForQuote(),
         authorAvatarPath,
+        isExpired: this.hasExpired,
         expirationLength,
         expirationTimestamp,
         onReply: () => this.trigger('reply', this),