Refactor: Push selector logic for quote props into Message model

js/models/messages.js

@@ -31,6 +31,8 @@
       this.on('change:expireTimer', this.setToExpire);
       this.on('unload', this.unload);
       this.setToExpire();
+
+      this.VOICE_FLAG = textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE;
     },
     idForLogging() {
       return `${this.get('source')}.${this.get('sourceDevice')} ${this.get('sent_at')}`;
@@ -200,6 +202,84 @@
       }
       return this.imageUrl;
     },
+    getQuoteObjectUrl() {
+      const fromDB = this.quotedMessageFromDatabase;
+      if (fromDB && fromDB.imageUrl) {
+        return fromDB.imageUrl;
+      }
+
+      const inMemory = this.quotedMessage;
+      if (inMemory && inMemory.imageUrl) {
+        return inMemory.imageUrl;
+      }
+
+      const thumbnail = this.quoteThumbnail;
+      if (thumbnail && thumbnail.objectUrl) {
+        return thumbnail.objectUrl;
+      }
+
+      return null;
+    },
+    getQuoteContact() {
+      const quote = this.get('quote');
+      if (!quote) {
+        return null;
+      }
+      const { author } = quote;
+      if (!author) {
+        return null;
+      }
+
+      return ConversationController.get(author);
+    },
+    processAttachment(attachment, objectUrl) {
+      const thumbnail = !objectUrl
+        ? null
+        : Object.assign({}, attachment.thumbnail || {}, {
+          objectUrl,
+        });
+
+      return Object.assign({}, attachment, {
+        // eslint-disable-next-line no-bitwise
+        isVoiceMessage: Boolean(attachment.flags & this.VOICE_FLAG),
+        thumbnail,
+      });
+    },
+    getPropsForQuote() {
+      const quote = this.get('quote');
+      if (!quote) {
+        return null;
+      }
+
+      const objectUrl = this.getQuoteObjectUrl();
+      const OUR_NUMBER = textsecure.storage.user.getNumber();
+      const { author } = quote;
+      const contact = this.getQuoteContact();
+
+      const authorTitle = contact ? contact.getTitle() : author;
+      const authorProfileName = contact ? contact.getProfileName() : null;
+      const authorColor = contact ? contact.getColor() : 'grey';
+      const isFromMe = contact ? contact.id === OUR_NUMBER : false;
+      const isIncoming = this.isIncoming();
+      const onClick = () => {
+        const { quotedMessage } = this;
+        if (quotedMessage) {
+          this.trigger('scroll-to-message', { id: quotedMessage.id });
+        }
+      };
+
+      return {
+        attachments: (quote.attachments || []).map(attachment =>
+          this.processAttachment(attachment, objectUrl)),
+        authorColor,
+        authorProfileName,
+        authorTitle,
+        isFromMe,
+        isIncoming,
+        onClick: this.quotedMessage ? onClick : null,
+        text: quote.text,
+      };
+    },
     getConversation() {
       // This needs to be an unsafe call, because this method is called during
       //   initial module setup. We may be in the middle of the initial fetch to

js/views/conversation_view.js

@@ -130,6 +130,7 @@
         'scroll-to-message',
         this.scrollToMessage
       );
+      this.listenTo(this.model.messageCollection, 'reply', this.setReplyMessage);
 
       this.lazyUpdateVerified = _.debounce(
         this.model.updateVerified.bind(this.model),
@@ -337,7 +338,6 @@
       }));
     },
 
-
     markAllAsApproved(untrusted) {
       return Promise.all(untrusted.map(contact => contact.setApproved()));
     },
@@ -1061,6 +1061,12 @@
       }
       this.focusMessageField();
     },
+
+    setMessageReply(message) {
+      this.quotedMessage = message;
+      console.log('setMessageReply', this.quotedMessage);
+    },
+
     async sendMessage(e) {
       this.removeLastSeenIndicator();
       this.closeEmojiPanel();

js/views/message_view.js

@@ -4,7 +4,6 @@
 /* global _: false */
 /* global emoji_util: false */
 /* global Mustache: false */
-/* global ConversationController: false */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -217,6 +216,7 @@
       'click .status': 'select',
       'click .some-failed': 'select',
       'click .error-message': 'select',
+      'click .hover-icon-container': 'onReply',
     },
     retryMessage() {
       const retrys = _.filter(
@@ -227,6 +227,10 @@
         this.model.resend(number);
       });
     },
+    onReply() {
+      console.log('onReply');
+      this.model.trigger('reply', this.model);
+    },
     onExpired() {
       this.$el.addClass('expired');
       this.$el.find('.bubble').one('webkitAnimationEnd animationend', (e) => {
@@ -366,75 +370,13 @@
       this.timerView.setElement(this.$('.timer'));
       this.timerView.update();
     },
-    getQuoteObjectUrl() {
-      const fromDB = this.model.quotedMessageFromDatabase;
-      if (fromDB && fromDB.imageUrl) {
-        return fromDB.imageUrl;
-      }
-
-      const inMemory = this.model.quotedMessage;
-      if (inMemory && inMemory.imageUrl) {
-        return inMemory.imageUrl;
-      }
-
-      const thumbnail = this.model.quoteThumbnail;
-      if (thumbnail && thumbnail.objectUrl) {
-        return thumbnail.objectUrl;
-      }
-
-      return null;
-    },
     renderQuote() {
-      const quote = this.model.get('quote');
+      const props = this.model.getPropsForQuote();
-      if (!quote) {
+      if (!props) {
         return;
       }
 
-      const VOICE_FLAG = textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE;
+      const contact = this.model.getQuoteContact();
-      const objectUrl = this.getQuoteObjectUrl();
-
-
-      function processAttachment(attachment) {
-        const thumbnail = !objectUrl
-          ? null
-          : Object.assign({}, attachment.thumbnail || {}, {
-            objectUrl,
-          });
-
-        return Object.assign({}, attachment, {
-          // eslint-disable-next-line no-bitwise
-          isVoiceMessage: Boolean(attachment.flags & VOICE_FLAG),
-          thumbnail,
-        });
-      }
-
-      const OUR_NUMBER = textsecure.storage.user.getNumber();
-      const { author } = quote;
-      const contact = ConversationController.get(author);
-
-      const authorTitle = contact ? contact.getTitle() : author;
-      const authorProfileName = contact ? contact.getProfileName() : null;
-      const authorColor = contact ? contact.getColor() : 'grey';
-      const isFromMe = contact ? contact.id === OUR_NUMBER : false;
-      const isIncoming = this.model.isIncoming();
-      const onClick = () => {
-        const { quotedMessage } = this.model;
-        if (quotedMessage) {
-          this.model.trigger('scroll-to-message', { id: quotedMessage.id });
-        }
-      };
-
-      const props = {
-        attachments: (quote.attachments || []).map(processAttachment),
-        authorColor,
-        authorProfileName,
-        authorTitle,
-        isFromMe,
-        isIncoming,
-        onClick: this.model.quotedMessage ? onClick : null,
-        text: quote.text,
-      };
-
       if (this.replyView) {
         this.replyView.remove();
         this.replyView = null;