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),

js/views/message_view.js

@@ -15,6 +15,7 @@
       this.listenTo(this.model, 'change', this.onChange);
       this.listenTo(this.model, 'destroy', this.onDestroy);
       this.listenTo(this.model, 'unload', this.onUnload);
+      this.listenTo(this.model, 'expired', this.onExpired);
     },
     onChange() {
       this.addId();
@@ -27,6 +28,9 @@
       const { id } = this.model;
       this.$el.attr('id', id);
     },
+    onExpired() {
+      setTimeout(() => this.onUnload(), 1000);
+    },
     onUnload() {
       if (this.childView) {
         this.childView.remove();
@@ -93,6 +97,7 @@
       };
 
       this.listenTo(this.model, 'change', update);
+      this.listenTo(this.model, 'expired', update);
 
       this.conversation = this.model.getConversation();
       this.listenTo(this.conversation, 'change', update);

ts/components/conversation/Message.tsx

@@ -81,6 +81,7 @@ export interface Props {
     referencedMessageNotFound: boolean;
   };
   authorAvatarPath?: string;
+  isExpired: boolean;
   expirationLength?: number;
   expirationTimestamp?: number;
   onClickAttachment?: () => void;
@@ -211,15 +212,22 @@ export class Message extends React.Component<Props, State> {
     }
   }
 
+  public componentDidUpdate() {
+    this.checkExpired();
+  }
+
   public checkExpired() {
     const now = Date.now();
-    const { expirationTimestamp, expirationLength } = this.props;
+    const { isExpired, expirationTimestamp, expirationLength } = this.props;
 
     if (!expirationTimestamp || !expirationLength) {
       return;
     }
+    if (this.expiredTimeout) {
+      return;
+    }
 
-    if (now >= expirationTimestamp) {
+    if (isExpired || now >= expirationTimestamp) {
       this.setState({
         expiring: true,
       });