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.
This commit is contained in:
Scott Nonnenberg 2018-07-17 20:25:55 -07:00
parent 7e2d7b5e60
commit 675e34fc8d
17 changed files with 713 additions and 303 deletions

View file

@ -26,6 +26,7 @@
Errors,
Message,
VisualAttachment,
PhoneNumber,
} = window.Signal.Types;
const { upgradeMessageSchema, loadAttachmentData } = window.Signal.Migrations;
@ -110,6 +111,17 @@
this.messageCollection.on('change:errors', this.handleMessageError, this);
this.messageCollection.on('send-error', this.onMessageError, this);
const debouncedUpdateLastMessage = _.debounce(
this.updateLastMessage.bind(this),
1000
);
this.listenTo(
this.messageCollection,
'add remove',
debouncedUpdateLastMessage
);
this.listenTo(this.model, 'newmessage', debouncedUpdateLastMessage);
this.on('change:avatar', this.updateAvatarUrl);
this.on('change:profileAvatar', this.updateAvatarUrl);
this.on('change:profileKey', this.onChangeProfileKey);
@ -119,6 +131,7 @@
this.on('newmessage', this.addSingleMessage);
this.on('delivered', this.updateMessage);
this.on('read', this.updateMessage);
this.on('sent', this.updateLastMessage);
this.on('expired', this.onExpired);
this.listenTo(
this.messageCollection,
@ -158,6 +171,7 @@
// Used to update existing messages when updated from out-of-band db access,
// like read and delivery receipts.
updateMessage(message) {
this.updateLastMessage();
this.messageCollection.add(message, { merge: true });
},
@ -168,6 +182,43 @@
return model;
},
format() {
const { format } = PhoneNumber;
const regionCode = storage.get('regionCode');
const avatar = this.getAvatar();
const color = this.getColor();
return {
phoneNumber: format(this.id, {
ourRegionCode: regionCode,
}),
color,
avatarPath: avatar ? avatar.url : null,
name: this.getName(),
profileName: this.getProfileName(),
title: this.getTitle(),
};
},
getPropsForListItem() {
const result = {
...this.format(),
lastUpdated: this.get('timestamp'),
hasUnread: Boolean(this.get('unreadCount')),
isSelected: this.isSelected,
lastMessage: {
status: this.get('lastMessageStatus'),
text: this.get('lastMessage'),
},
onClick: () => this.trigger('select', this),
};
return result;
},
onMessageError() {
this.updateVerified();
},
@ -850,6 +901,7 @@
active_at: now,
timestamp: now,
lastMessage: message.getNotificationText(),
lastMessageStatus: 'sending',
});
const conversationType = this.get('type');
@ -889,10 +941,14 @@
const lastMessage = collection.at(0);
const lastMessageJSON = lastMessage ? lastMessage.toJSON() : null;
const lastMessageStatus = lastMessage
? lastMessage.getMessagePropStatus()
: null;
const lastMessageUpdate = Conversation.createLastMessageUpdate({
currentLastMessageText: this.get('lastMessage') || null,
currentTimestamp: this.get('timestamp') || null,
lastMessage: lastMessageJSON,
lastMessageStatus,
lastMessageNotificationText: lastMessage
? lastMessage.getNotificationText()
: null,

View file

@ -422,6 +422,10 @@
};
},
getMessagePropStatus() {
if (!this.isOutgoing()) {
return null;
}
if (this.hasErrors()) {
return 'error';
}
@ -763,6 +767,7 @@
sent: true,
expirationStartTimestamp: now,
});
this.trigger('sent', this);
this.sendSyncMessage();
})
.catch(result => {