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

@ -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;
},

View file

@ -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(