New React component: ConversationListItem, installed in left pane

When collecting a conversation's last message, we grab that message's
status as well (if outgoing) and show it.

js/views/conversation_list_item_view.js

@@ -1,4 +1,4 @@
-/* global Whisper, _, extension, Backbone, Mustache */
+/* global Whisper, Signal, Backbone */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -13,118 +13,38 @@
       return `conversation-list-item contact ${this.model.cid}`;
     },
     templateName: 'conversation-preview',
-    events: {
-      click: 'select',
-    },
     initialize() {
-      // auto update
-      this.listenTo(
-        this.model,
-        'change',
-        _.debounce(this.render.bind(this), 1000)
-      );
-      this.listenTo(this.model, 'destroy', this.remove); // auto update
-      this.listenTo(this.model, 'opened', this.markSelected); // auto update
-
-      const updateLastMessage = _.debounce(
-        this.model.updateLastMessage.bind(this.model),
-        1000
-      );
-      this.listenTo(
-        this.model.messageCollection,
-        'add remove',
-        updateLastMessage
-      );
-      this.listenTo(this.model, 'newmessage', updateLastMessage);
-
-      extension.windows.onClosed(() => {
-        this.stopListening();
-      });
-      this.timeStampView = new Whisper.TimestampView({ brief: true });
+      this.listenTo(this.model, 'destroy', this.remove);
       this.model.updateLastMessage();
     },
 
-    markSelected() {
-      this.$el
-        .addClass('selected')
-        .siblings('.selected')
-        .removeClass('selected');
-    },
-
-    select() {
-      this.markSelected();
-      this.$el.trigger('select', this.model);
-    },
-
     remove() {
-      if (this.nameView) {
-        this.nameView.remove();
-        this.nameView = null;
-      }
-      if (this.bodyView) {
-        this.bodyView.remove();
-        this.bodyView = null;
+      if (this.childView) {
+        this.childView.remove();
+        this.childView = null;
       }
       Backbone.View.prototype.remove.call(this);
     },
 
     render() {
-      const lastMessage = this.model.get('lastMessage');
-
-      this.$el.html(
-        Mustache.render(
-          _.result(this, 'template', ''),
-          {
-            last_message: Boolean(lastMessage),
-            last_message_timestamp: this.model.get('timestamp'),
-            number: this.model.getNumber(),
-            avatar: this.model.getAvatar(),
-            unreadCount: this.model.get('unreadCount'),
-          },
-          this.render_partials()
-        )
-      );
-      this.timeStampView.setElement(this.$('.last-timestamp'));
-      this.timeStampView.update();
-
-      if (this.nameView) {
-        this.nameView.remove();
-        this.nameView = null;
+      if (this.childView) {
+        this.childView.remove();
+        this.childView = null;
       }
-      this.nameView = new Whisper.ReactWrapperView({
-        className: 'name-wrapper',
-        Component: window.Signal.Components.ContactName,
-        props: {
-          phoneNumber: this.model.getNumber(),
-          name: this.model.getName(),
-          profileName: this.model.getProfileName(),
-        },
+
+      const props = this.model.getPropsForListItem();
+      this.childView = new Whisper.ReactWrapperView({
+        className: 'list-item-wrapper',
+        Component: Signal.Components.ConversationListItem,
+        props,
       });
-      this.$('.name').append(this.nameView.el);
 
-      if (lastMessage) {
-        if (this.bodyView) {
-          this.bodyView.remove();
-          this.bodyView = null;
-        }
-        this.bodyView = new Whisper.ReactWrapperView({
-          className: 'body-wrapper',
-          Component: window.Signal.Components.MessageBody,
-          props: {
-            text: lastMessage,
-            disableJumbomoji: true,
-            disableLinks: true,
-          },
-        });
-        this.$('.last-message').append(this.bodyView.el);
-      }
+      const update = () =>
+        this.childView.update(this.model.getPropsForListItem());
 
-      const unread = this.model.get('unreadCount');
-      if (unread > 0) {
-        this.$el.addClass('unread');
-      } else {
-        this.$el.removeClass('unread');
-      }
+      this.listenTo(this.model, 'change', update);
+
+      this.$el.append(this.childView.el);
 
       return this;
     },

js/views/inbox_view.js

@@ -107,11 +107,12 @@
 
       const inboxCollection = getInboxCollection();
 
-      inboxCollection.on('messageError', () => {
+      this.listenTo(inboxCollection, 'messageError', () => {
         if (this.networkStatusView) {
           this.networkStatusView.render();
         }
       });
+      this.listenTo(inboxCollection, 'select', this.openConversation);
 
       this.inboxListView = new Whisper.ConversationListView({
         el: this.$('.inbox'),
@@ -144,11 +145,7 @@
         this.searchView.$el.show();
         this.inboxListView.$el.hide();
       });
-      this.listenTo(
-        this.searchView,
-        'open',
-        this.openConversation.bind(this, null)
-      );
+      this.listenTo(this.searchView, 'open', this.openConversation);
 
       this.networkStatusView = new Whisper.NetworkStatusView();
       this.$el
@@ -175,7 +172,6 @@
       click: 'onClick',
       'click #header': 'focusHeader',
       'click .conversation': 'focusConversation',
-      'select .gutter .conversation-list-item': 'openConversation',
       'input input.search': 'filterContacts',
     },
     startConnectionListener() {
@@ -250,7 +246,9 @@
         input.removeClass('active');
       }
     },
-    openConversation(e, conversation) {
+    openConversation(conversation) {
+      ConversationController.markAsSelected(conversation);
+
       this.searchView.hideHints();
       if (conversation) {
         this.conversation_stack.open(