Re-render left pane and timeline items when group members change

ts/ConversationController.ts

@@ -822,6 +822,9 @@ export class ConversationController {
         await Promise.all(
           this._conversations.map(async conversation => {
             try {
+              // Hydrate contactCollection, now that initial fetch is complete
+              conversation.fetchContacts();
+
               const isChanged = await maybeDeriveGroupV2Id(conversation);
               if (isChanged) {
                 updateConversation(conversation.attributes);

ts/models/conversations.ts

@@ -218,20 +218,26 @@ export class ConversationModel extends window.Backbone.Model<
     //   our first save to the database. Or first fetch from the database.
     this.initialPromise = Promise.resolve();
 
+    this.throttledBumpTyping = window._.throttle(this.bumpTyping, 300);
+    this.debouncedUpdateLastMessage = window._.debounce(
+      this.updateLastMessage.bind(this),
+      200
+    );
+
     this.contactCollection = this.getContactCollection();
+    this.contactCollection.on(
+      'change:name change:profileName change:profileFamilyName change:e164',
+      this.debouncedUpdateLastMessage,
+      this
+    );
+
     this.messageCollection = new window.Whisper.MessageCollection([], {
       conversation: this,
     });
 
     this.messageCollection.on('change:errors', this.handleMessageError, this);
     this.messageCollection.on('send-error', this.onMessageError, this);
 
-    this.throttledBumpTyping = window._.throttle(this.bumpTyping, 300);
-    this.debouncedUpdateLastMessage = window._.debounce(
-      this.updateLastMessage.bind(this),
-      200
-    );
-
     this.listenTo(
       this.messageCollection,
       'add remove destroy content-changed',
@@ -258,6 +264,8 @@ export class ConversationModel extends window.Backbone.Model<
     this.unset('hasFetchedProfile');
     this.unset('tokens');
 
+    this.on('change:members change:membersV2', this.fetchContacts);
+
     this.typingRefreshTimer = null;
     this.typingPauseTimer = null;
 

ts/state/selectors/conversations.ts

@@ -559,10 +559,8 @@ export function _messageSelector(
   _ourNumber: string,
   _regionCode: string,
   interactionMode: 'mouse' | 'keyboard',
+  _getConversationById: GetConversationByIdType,
   _callsByConversation: CallsByConversationType,
-  _conversation?: ConversationType,
-  _author?: ConversationType,
-  _quoted?: ConversationType,
   selectedMessageId?: string,
   selectedMessageCounter?: number
 ): TimelineItemType {
@@ -598,10 +596,8 @@ type CachedMessageSelectorType = (
   ourNumber: string,
   regionCode: string,
   interactionMode: 'mouse' | 'keyboard',
+  getConversationById: GetConversationByIdType,
   callsByConversation: CallsByConversationType,
-  conversation?: ConversationType,
-  author?: ConversationType,
-  quoted?: ConversationType,
   selectedMessageId?: string,
   selectedMessageCounter?: number
 ) => TimelineItemType;
@@ -641,30 +637,13 @@ export const getMessageSelector = createSelector(
         return undefined;
       }
 
-      const { conversationId, source, type, quote } = message;
-      const conversation = conversationSelector(conversationId);
-      let author: ConversationType | undefined;
-      let quoted: ConversationType | undefined;
-
-      if (type === 'incoming') {
-        author = conversationSelector(source);
-      } else if (type === 'outgoing') {
-        author = conversationSelector(ourNumber);
-      }
-
-      if (quote && (quote.author || quote.authorUuid)) {
-        quoted = conversationSelector(quote.authorUuid || quote.author);
-      }
-
       return messageSelector(
         message,
         ourNumber,
         regionCode,
         interactionMode,
+        conversationSelector,
         callsByConversation,
-        conversation,
-        author,
-        quoted,
         selectedMessage ? selectedMessage.id : undefined,
         selectedMessage ? selectedMessage.counter : undefined
       );