Move left pane entirely to React

js/models/conversations.js

@@ -1,12 +1,14 @@
-/* global _: false */
-/* global Backbone: false */
-/* global libphonenumber: false */
-
-/* global ConversationController: false */
-/* global libsignal: false */
-/* global storage: false */
-/* global textsecure: false */
-/* global Whisper: false */
+/* global
+  _,
+  i18n,
+  Backbone,
+  libphonenumber,
+  ConversationController,
+  libsignal,
+  storage,
+  textsecure,
+  Whisper
+*/
 
 /* eslint-disable more/no-then */
 
@@ -138,6 +140,13 @@
 
       this.typingRefreshTimer = null;
       this.typingPauseTimer = null;
+
+      // Keep props ready
+      const generateProps = () => {
+        this.cachedProps = this.getProps();
+      };
+      this.on('change', generateProps);
+      generateProps();
     },
 
     isMe() {
@@ -292,40 +301,37 @@
     },
 
     format() {
+      return this.cachedProps;
+    },
+    getProps() {
       const { format } = PhoneNumber;
       const regionCode = storage.get('regionCode');
       const color = this.getColor();
-
-      return {
-        phoneNumber: format(this.id, {
-          ourRegionCode: regionCode,
-        }),
-        color,
-        avatarPath: this.getAvatarPath(),
-        name: this.getName(),
-        profileName: this.getProfileName(),
-        title: this.getTitle(),
-      };
-    },
-    getPropsForListItem() {
       const typingKeys = Object.keys(this.contactTypingTimers || {});
 
       const result = {
-        ...this.format(),
+        id: this.id,
+
+        activeAt: this.get('active_at'),
+        avatarPath: this.getAvatarPath(),
+        color,
+        type: this.isPrivate() ? 'direct' : 'group',
         isMe: this.isMe(),
-        conversationType: this.isPrivate() ? 'direct' : 'group',
-
-        lastUpdated: this.get('timestamp'),
-        unreadCount: this.get('unreadCount') || 0,
-        isSelected: this.isSelected,
-
         isTyping: typingKeys.length > 0,
+        lastUpdated: this.get('timestamp'),
+        name: this.getName(),
+        profileName: this.getProfileName(),
+        timestamp: this.get('timestamp'),
+        title: this.getTitle(),
+        unreadCount: this.get('unreadCount') || 0,
+
+        phoneNumber: format(this.id, {
+          ourRegionCode: regionCode,
+        }),
         lastMessage: {
           status: this.get('lastMessageStatus'),
           text: this.get('lastMessage'),
         },
-
-        onClick: () => this.trigger('select', this),
       };
 
       return result;
@@ -572,8 +578,8 @@
     onMemberVerifiedChange() {
       // If the verified state of a member changes, our aggregate state changes.
       // We trigger both events to replicate the behavior of Backbone.Model.set()
-      this.trigger('change:verified');
-      this.trigger('change');
+      this.trigger('change:verified', this);
+      this.trigger('change', this);
     },
     toggleVerified() {
       if (this.isVerified()) {
@@ -1798,7 +1804,7 @@
       if (this.isPrivate()) {
         return this.get('name');
       }
-      return this.get('name') || 'Unknown group';
+      return this.get('name') || i18n('unknownGroup');
     },
 
     getTitle() {
@@ -1990,14 +1996,14 @@
         if (!record) {
           // User was not previously typing before. State change!
           this.trigger('typing-update');
-          this.trigger('change');
+          this.trigger('change', this);
         }
       } else {
         delete this.contactTypingTimers[identifier];
         if (record) {
           // User was previously typing, and is no longer. State change!
           this.trigger('typing-update');
-          this.trigger('change');
+          this.trigger('change', this);
         }
       }
     },
@@ -2012,7 +2018,7 @@
 
         // User was previously typing, but timed out or we received message. State change!
         this.trigger('typing-update');
-        this.trigger('change');
+        this.trigger('change', this);
       }
     },
   });
@@ -2034,21 +2040,6 @@
       );
       this.reset([]);
     },
-
-    async search(providedQuery) {
-      let query = providedQuery.trim().toLowerCase();
-      query = query.replace(/[+-.()]*/g, '');
-
-      if (query.length === 0) {
-        return;
-      }
-
-      const collection = await window.Signal.Data.searchConversations(query, {
-        ConversationCollection: Whisper.ConversationCollection,
-      });
-
-      this.reset(collection.models);
-    },
   });
 
   Whisper.Conversation.COLORS = COLORS.concat(['grey', 'default']).join(' ');

js/models/messages.js

@@ -83,6 +83,42 @@
       this.on('unload', this.unload);
       this.on('expired', this.onExpired);
       this.setToExpire();
+
+      // Keep props ready
+      const generateProps = () => {
+        if (this.isExpirationTimerUpdate()) {
+          this.propsForTimerNotification = this.getPropsForTimerNotification();
+        } else if (this.isKeyChange()) {
+          this.propsForSafetyNumberNotification = this.getPropsForSafetyNumberNotification();
+        } else if (this.isVerifiedChange()) {
+          this.propsForVerificationNotification = this.getPropsForVerificationNotification();
+        } else if (this.isEndSession()) {
+          this.propsForResetSessionNotification = this.getPropsForResetSessionNotification();
+        } else if (this.isGroupUpdate()) {
+          this.propsForGroupNotification = this.getPropsForGroupNotification();
+        } else {
+          this.propsForSearchResult = this.getPropsForSearchResult();
+          this.propsForMessage = this.getPropsForMessage();
+        }
+      };
+      this.on('change', generateProps);
+
+      const applicableConversationChanges =
+        'change:color change:name change:number change:profileName change:profileAvatar';
+
+      const conversation = this.getConversation();
+      const fromContact = this.getIncomingContact();
+
+      this.listenTo(conversation, applicableConversationChanges, generateProps);
+      if (fromContact) {
+        this.listenTo(
+          fromContact,
+          applicableConversationChanges,
+          generateProps
+        );
+      }
+
+      generateProps();
     },
     idForLogging() {
       return `${this.get('source')}.${this.get('sourceDevice')} ${this.get(
@@ -387,6 +423,35 @@
 
       return 'sending';
     },
+    getPropsForSearchResult() {
+      const fromNumber = this.getSource();
+      const from = this.findAndFormatContact(fromNumber);
+      if (fromNumber === this.OUR_NUMBER) {
+        from.isMe = true;
+      }
+
+      const toNumber = this.get('conversationId');
+      let to = this.findAndFormatContact(toNumber);
+      if (toNumber === this.OUR_NUMBER) {
+        to.isMe = true;
+      } else if (fromNumber === toNumber) {
+        to = {
+          isMe: true,
+        };
+      }
+
+      return {
+        from,
+        to,
+
+        isSelected: this.isSelected,
+
+        id: this.id,
+        conversationId: this.get('conversationId'),
+        receivedAt: this.get('received_at'),
+        snippet: this.get('snippet'),
+      };
+    },
     getPropsForMessage() {
       const phoneNumber = this.getSource();
       const contact = this.findAndFormatContact(phoneNumber);
@@ -495,7 +560,7 @@
       // Would be nice to do this before render, on initial load of message
       if (!window.isSignalAccountCheckComplete(firstNumber)) {
         window.checkForSignalAccount(firstNumber).then(() => {
-          this.trigger('change');
+          this.trigger('change', this);
         });
       }