View All Media: Listen for updates to conversation, re-render

js/views/conversation_view.js

@@ -767,6 +767,8 @@
       const DEFAULT_DOCUMENTS_FETCH_COUNT = 150;
 
       const conversationId = this.model.get('id');
+
+      const getProps = async () => {
         const rawMedia = await Signal.Data.getMessagesWithVisualMediaAttachments(
           conversationId,
           {
@@ -804,7 +806,9 @@
             return (attachments || [])
               .filter(
                 attachment =>
-                attachment.thumbnail && !attachment.pending && !attachment.error
+                  attachment.thumbnail &&
+                  !attachment.pending &&
+                  !attachment.error
               )
               .map((attachment, index) => {
                 const { thumbnail } = attachment;
@@ -875,17 +879,29 @@
           }
         };
 
-      const view = new Whisper.ReactWrapperView({
-        className: 'panel-wrapper',
-        Component: Signal.Components.MediaGallery,
-        props: {
+        return {
           documents,
           media,
           onItemClick,
+        };
+      };
+
+      const view = new Whisper.ReactWrapperView({
+        className: 'panel-wrapper',
+        Component: Signal.Components.MediaGallery,
+        props: await getProps(),
+        onClose: () => {
+          this.stopListening(this.model.messageCollection, 'remove', update);
+          this.resetPanel();
         },
-        onClose: () => this.resetPanel(),
       });
 
+      const update = async () => {
+        view.update(await getProps());
+      };
+
+      this.listenTo(this.model.messageCollection, 'remove', update);
+
       this.listenBack(view);
     },
 
@@ -1294,20 +1310,23 @@
     },
 
     showMessageDetail(message) {
+      const onClose = () => {
+        this.stopListening(message, 'change', update);
+        this.resetPanel();
+        this.updateHeader();
+      };
+
       const props = message.getPropsForMessageDetail();
       const view = new Whisper.ReactWrapperView({
         className: 'message-detail-wrapper',
         Component: Signal.Components.MessageDetail,
         props,
-        onClose: () => {
-          this.stopListening(message, 'change', update);
-          this.resetPanel();
-          this.updateHeader();
-        },
+        onClose,
       });
 
       const update = () => view.update(message.getPropsForMessageDetail());
       this.listenTo(message, 'change', update);
+      this.listenTo(message, 'expired', onClose);
       // We could listen to all involved contacts, but we'll call that overkill
 
       this.listenBack(view);