Emojification now all done with react via a few new components

Three locations were changed:
  1. a group update, which lists a set of contacts
  2. the contact name in the left pane
  3. the conversation title

Three new components were added to window.Signal.Components to support
these scenarios, respectively:
  1. Emojify
  2. ContactName
  3. ConversationTitle

Note that there are a number of other places in the app that should be
emojified, but never have been before. Essentially any place that a
contact name might be shown. A non-exhaustive list:
  - Show group members
  - Show safety number
  - Verified change notification
  - Disappearing timer change notification
  - Contact verification notification
  - Quote contact name

js/signal.js

@@ -16,9 +16,14 @@ const Util = require('../ts/util');
 const {
   ContactDetail,
 } = require('../ts/components/conversation/ContactDetail');
+const { ContactName } = require('../ts/components/conversation/ContactName');
+const {
+  ConversationTitle,
+} = require('../ts/components/conversation/ConversationTitle');
 const {
   EmbeddedContact,
 } = require('../ts/components/conversation/EmbeddedContact');
+const { Emojify } = require('../ts/components/conversation/Emojify');
 const { Lightbox } = require('../ts/components/Lightbox');
 const { LightboxGallery } = require('../ts/components/LightboxGallery');
 const {
@@ -56,7 +61,10 @@ exports.setup = (options = {}) => {
 
   const Components = {
     ContactDetail,
+    ContactName,
+    ConversationTitle,
     EmbeddedContact,
+    Emojify,
     Lightbox,
     LightboxGallery,
     MediaGallery,

js/views/conversation_list_item_view.js

@@ -54,6 +54,18 @@
       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;
+      }
+      Backbone.View.prototype.remove.call(this);
+    },
+
     render: function() {
       const lastMessage = this.model.get('lastMessage');
 
@@ -61,12 +73,10 @@
         Mustache.render(
           _.result(this, 'template', ''),
           {
-            title: this.model.getTitle(),
             last_message: Boolean(lastMessage),
             last_message_timestamp: this.model.get('timestamp'),
             number: this.model.getNumber(),
             avatar: this.model.getAvatar(),
-            profileName: this.model.getProfileName(),
             unreadCount: this.model.get('unreadCount'),
           },
           this.render_partials()
@@ -75,6 +85,20 @@
       this.timeStampView.setElement(this.$('.last-timestamp'));
       this.timeStampView.update();
 
+      if (this.nameView) {
+        this.nameView.remove();
+        this.nameView = 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(),
+        },
+      });
+      this.$('.name').append(this.nameView.el);
 
       if (lastMessage) {
         if (this.bodyView) {

js/views/conversation_view.js

@@ -1,11 +1,8 @@
 /* global $: false */
 /* global _: false */
-/* global emoji: false */
-/* global emoji_util: false */
 /* global emojiData: false */
 /* global EmojiPanel: false */
 /* global moment: false */
-
 /* global extension: false */
 /* global i18n: false */
 /* global Signal: false */
@@ -75,22 +72,6 @@
     className: 'conversation-loading-screen',
   });
 
-  Whisper.ConversationTitleView = Whisper.View.extend({
-    templateName: 'conversation-title',
-    initialize() {
-      this.listenTo(this.model, 'change', this.render);
-    },
-    render_attributes() {
-      return {
-        isVerified: this.model.isVerified(),
-        verified: i18n('verified'),
-        name: this.model.getName(),
-        number: this.model.getNumber(),
-        profileName: this.model.getProfileName(),
-      };
-    },
-  });
-
   Whisper.ConversationView = Whisper.View.extend({
     className() {
       return ['conversation', this.model.get('type')].join(' ');
@@ -177,18 +158,27 @@
         model: this.model,
       });
 
-
       this.window = options.window;
       this.fileInput = new Whisper.FileInputView({
         el: this.$('form.send'),
         window: this.window,
       });
 
-      this.titleView = new Whisper.ConversationTitleView({
-        el: this.$('.conversation-title'),
-        model: this.model,
+      const getTitleProps = model => ({
+        isVerified: model.isVerified(),
+        name: model.getName(),
+        phoneNumber: model.getNumber(),
+        profileName: model.getProfileName(),
       });
-      this.titleView.render();
+      this.titleView = new Whisper.ReactWrapperView({
+        className: 'title-wrapper',
+        Component: window.Signal.Components.ConversationTitle,
+        props: getTitleProps(this.model),
+      });
+      this.listenTo(this.model, 'change', () =>
+        this.titleView.update(getTitleProps(this.model))
+      );
+      this.$('.conversation-title').prepend(this.titleView.el);
 
       this.view = new Whisper.MessageListView({
         collection: this.model.messageCollection,
@@ -1358,17 +1348,6 @@
       }
     },
 
-    replace_colons(str) {
-      return str.replace(emoji.rx_colons, m => {
-        const idx = m.substr(1, m.length - 2);
-        const val = emoji.map.colons[idx];
-        if (val) {
-          return emoji.data[val][0][0];
-        }
-        return m;
-      });
-    },
-
     updateColor(model, color) {
       const header = this.$('.conversation-header');
       header.removeClass(Whisper.Conversation.COLORS);

js/views/message_view.js

@@ -2,7 +2,6 @@
 /* global i18n: false */
 /* global textsecure: false */
 /* global _: false */
-/* global emoji_util: false */
 /* global Mustache: false */
 /* global $: false */
 /* global storage: false */
@@ -279,24 +278,30 @@
       if (this.avatarView) {
         this.avatarView.remove();
       }
+      if (this.bodyView) {
+        this.bodyView.remove();
+      }
+      if (this.contactView) {
+        this.contactView.remove();
+      }
+      if (this.controlView) {
+        this.controlView.remove();
+      }
       if (this.errorIconView) {
         this.errorIconView.remove();
       }
       if (this.networkErrorView) {
         this.networkErrorView.remove();
       }
+      if (this.quoteView) {
+        this.quoteView.remove();
+      }
       if (this.someFailedView) {
         this.someFailedView.remove();
       }
       if (this.timeStampView) {
         this.timeStampView.remove();
       }
-      if (this.quoteView) {
-        this.quoteView.remove();
-      }
-      if (this.contactView) {
-        this.contactView.remove();
-      }
 
       // NOTE: We have to do this in the background (`then` instead of `await`)
       // as our tests rely on `onUnload` synchronously removing the view from
@@ -406,8 +411,20 @@
     renderControl() {
       if (this.model.isEndSession() || this.model.isGroupUpdate()) {
         this.$el.addClass('control');
-        const content = this.$('.content');
-        content.text(this.model.getDescription());
+
+        if (this.controlView) {
+          this.controlView.remove();
+          this.controlView = null;
+        }
+
+        this.controlView = new Whisper.ReactWrapperView({
+          className: 'content-wrapper',
+          Component: window.Signal.Components.Emojify,
+          props: {
+            text: this.model.getDescription(),
+          },
+        });
+        this.$('.content').prepend(this.controlView.el);
       } else {
         this.$el.removeClass('control');
       }