From 675e34fc8d8d16e1c2c6811ed47b26c5feb4b3d4 Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Tue, 17 Jul 2018 20:25:55 -0700 Subject: [PATCH] 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. --- js/conversation_controller.js | 12 ++ js/models/conversations.js | 56 ++++++ js/models/messages.js | 5 + js/modules/signal.js | 4 + js/views/conversation_list_item_view.js | 118 ++--------- js/views/inbox_view.js | 14 +- stylesheets/_global.scss | 47 ----- stylesheets/_modules.scss | 177 +++++++++++++++++ stylesheets/_theme_dark.scss | 83 ++++++-- ts/components/ConversationListItem.md | 186 ++++++++++++++++++ ts/components/ConversationListItem.tsx | 159 +++++++++++++++ .../conversation/GroupNotification.tsx | 4 +- ts/components/conversation/Message.tsx | 1 + ts/components/conversation/Timestamp.tsx | 10 +- ts/selectors/message.ts | 127 ------------ ts/test/types/Conversation_test.ts | 8 + ts/types/Conversation.ts | 5 + 17 files changed, 713 insertions(+), 303 deletions(-) create mode 100644 ts/components/ConversationListItem.md create mode 100644 ts/components/ConversationListItem.tsx delete mode 100644 ts/selectors/message.ts diff --git a/js/conversation_controller.js b/js/conversation_controller.js index ab4edd570..b7c776fd0 100644 --- a/js/conversation_controller.js +++ b/js/conversation_controller.js @@ -78,6 +78,18 @@ window.getInboxCollection = () => inboxCollection; window.ConversationController = { + markAsSelected(toSelect) { + conversations.each(conversation => { + const current = conversation.isSelected || false; + const newValue = conversation.id === toSelect.id; + + // eslint-disable-next-line no-param-reassign + conversation.isSelected = newValue; + if (current !== newValue) { + conversation.trigger('change'); + } + }); + }, get(id) { if (!this._initialFetchComplete) { throw new Error( diff --git a/js/models/conversations.js b/js/models/conversations.js index 1a9be8e5d..db803e89a 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -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, diff --git a/js/models/messages.js b/js/models/messages.js index c26d08005..0bc89b8c9 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -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 => { diff --git a/js/modules/signal.js b/js/modules/signal.js index 6fa6608d2..3ebabc498 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -19,6 +19,9 @@ const { ContactName } = require('../../ts/components/conversation/ContactName'); const { ConversationHeader, } = require('../../ts/components/conversation/ConversationHeader'); +const { + ConversationListItem, +} = require('../../ts/components/ConversationListItem'); const { EmbeddedContact, } = require('../../ts/components/conversation/EmbeddedContact'); @@ -151,6 +154,7 @@ exports.setup = (options = {}) => { ContactListItem, ContactName, ConversationHeader, + ConversationListItem, EmbeddedContact, Emojify, GroupNotification, diff --git a/js/views/conversation_list_item_view.js b/js/views/conversation_list_item_view.js index b4bf605ab..530b955c5 100644 --- a/js/views/conversation_list_item_view.js +++ b/js/views/conversation_list_item_view.js @@ -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; }, diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 0f7ca1f14..d8fe04c0d 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -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( diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index e959d7cf8..15d25c0d8 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -207,53 +207,6 @@ $avatar-size: 44px; $unread-badge-size: 21px; -.conversation-list-item { - cursor: pointer; - color: $color-light-90; - - &:hover { - background: $color-black-008; - } - - .number { - display: none; - } - - .unread-count { - float: right; - margin: 3px 10px 0 20px; - display: inline-block; - padding: 0 3px; - min-width: $unread-badge-size; - height: $unread-badge-size; - line-height: $unread-badge-size; - font-size: 12px; - font-weight: bold; - text-align: center; - border-radius: $border-radius; - background-color: $blue; - color: white; - border: solid 1px rgba(255, 255, 255, 0.6); - } -} -.inactive .contact.selected { - padding-left: 8px; - border-left: 4px solid $blue; -} -.contact { - padding: 12px; - white-space: nowrap; - overflow: hidden; - - &:first-child { - margin-top: 0; - } - - &:last-child::after { - display: none; - } -} - .banner { // what's the right color? background-color: $blue_l; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index d9ce26c42..7f76594eb 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1823,6 +1823,183 @@ color: $color-light-45; } +// Module: Conversation List Item + +.module-conversation-list-item { + max-width: 300px; + display: flex; + flex-direction: row; + padding-right: 16px; + padding-left: 16px; + align-items: center; + + cursor: pointer; + + &:hover { + background-color: $color-black-008; + } +} + +.module-conversation-list-item--has-unread { + padding-left: 12px; + border-left: 4px solid $color-signal-blue; +} + +.module-conversation-list-item--is-selected { + background-color: $color-black-008; +} + +.module-conversation-list-item__avatar { + margin-top: 8px; + margin-bottom: 8px; + height: 48px; + width: 48px; + border-radius: 24px; + min-width: 48px; + + object-fit: cover; +} +.module-conversation-list-item__default-avatar { + color: white; + font-size: 26px; + line-height: 48px; + text-align: center; + + background-color: $color-conversation-grey; +} + +.module-conversation-list-item__default-avatar--blue { + background-color: $color-conversation-blue; +} +.module-conversation-list-item__default-avatar--cyan { + background-color: $color-conversation-cyan; +} +.module-conversation-list-item__default-avatar--deep_orange { + background-color: $color-conversation-deep_orange; +} +.module-conversation-list-item__default-avatar--green { + background-color: $color-conversation-green; +} +.module-conversation-list-item__default-avatar--indigo { + background-color: $color-conversation-indigo; +} +.module-conversation-list-item__default-avatar--pink { + background-color: $color-conversation-pink; +} +.module-conversation-list-item__default-avatar--purple { + background-color: $color-conversation-purple; +} +.module-conversation-list-item__default-avatar--red { + background-color: $color-conversation-red; +} +.module-conversation-list-item__default-avatar--teal { + background-color: $color-conversation-teal; +} + +.module-conversation-list-item__content { + flex-grow: 1; + margin-left: 12px; + // 300 - 32px (left/right margin) - 48px (for avatar) - 12px (our margin) + max-width: 208px; + + display: flex; + flex-direction: column; + align-items: stretch; +} + +.module-conversation-list-item__header { + display: flex; + flex-direction: row; + align-items: center; +} + +.module-conversation-list-item__header__name { + flex-grow: 1; + flex-shrink: 1; + font-size: 14px; + line-height: 18px; + font-weight: 300; + + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.module-conversation-list-item__header__timestamp { + flex-shrink: 0; + margin-left: 6px; + + font-size: 11px; + line-height: 16px; + letter-spacing: 0.3px; + font-weight: 300; + + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + text-transform: uppercase; +} + +.module-conversation-list-item__message { + display: flex; + flex-direction: row; + align-items: center; +} + +.module-conversation-list-item__message__text { + flex-grow: 1; + flex-shrink: 1; + + margin-top: 3px; + font-size: 13px; + line-height: 18px; + + height: 1.2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.module-conversation-list-item__message__text--has-unread { + font-weight: 300; +} + +.module-conversation-list-item__message__status-icon { + flex-shrink: 0; + + margin-top: 2px; + width: 12px; + height: 12px; + display: inline-block; + margin-left: 6px; +} + +.module-conversation-list-item__message__status-icon--sending { + @include color-svg('../images/sending.svg', $color-light-60); + animation: module-conversation-list-item__message__status-icon--spinning 4s + linear infinite; +} + +@keyframes module-conversation-list-item__message__status-icon--spinning { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.module-conversation-list-item__message__status-icon--sent { + @include color-svg('../images/check-circle-outline.svg', $color-light-35); +} +.module-conversation-list-item__message__status-icon--delivered { + @include color-svg('../images/double-check.svg', $color-light-35); + width: 18px; +} +.module-conversation-list-item__message__status-icon--read { + @include color-svg('../images/read.svg', $color-light-35); + width: 18px; +} + // Third-party module: react-contextmenu .react-contextmenu { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index d09f42556..4a98d3a8b 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -236,20 +236,6 @@ body.dark-theme { } } - .conversation-list-item { - color: $color-dark-05; - - &:hover { - background: $color-dark-70; - } - - .unread-count { - background-color: $blue; - color: white; - border: solid 1px rgba(255, 255, 255, 0.6); - } - } - .banner { // what's the right color? background-color: $blue_l; @@ -739,7 +725,7 @@ body.dark-theme { } .module-message__metadata__status-icon--sending { - @include color-svg('../images/sending.svg', $color-dark-30); + @include color-svg('../images/sending.svg', $color-light-35); } .module-message__metadata__status-icon--sent { @@ -1238,7 +1224,7 @@ body.dark-theme { } .module-message-detail__contact__status-icon--sending { - @include color-svg('../images/sending.svg', $color-dark-30); + @include color-svg('../images/sending.svg', $color-light-35); } .module-message-detail__contact__status-icon--sent { @@ -1295,6 +1281,71 @@ body.dark-theme { color: $color-dark-55; } + // Module: Conversation List Item + + .module-conversation-list-item { + &:hover { + background-color: $color-dark-70; + } + } + + .module-conversation-list-item--has-unread { + border-left: 4px solid $color-signal-blue; + } + + .module-conversation-list-item--is-selected { + background-color: $color-dark-70; + } + + .module-conversation-list-item__default-avatar { + color: white; + background-color: $color-conversation-grey; + } + + .module-conversation-list-item__default-avatar--blue { + background-color: $color-conversation-blue; + } + .module-conversation-list-item__default-avatar--cyan { + background-color: $color-conversation-cyan; + } + .module-conversation-list-item__default-avatar--deep_orange { + background-color: $color-conversation-deep_orange; + } + .module-conversation-list-item__default-avatar--green { + background-color: $color-conversation-green; + } + .module-conversation-list-item__default-avatar--indigo { + background-color: $color-conversation-indigo; + } + .module-conversation-list-item__default-avatar--pink { + background-color: $color-conversation-pink; + } + .module-conversation-list-item__default-avatar--purple { + background-color: $color-conversation-purple; + } + .module-conversation-list-item__default-avatar--red { + background-color: $color-conversation-red; + } + .module-conversation-list-item__default-avatar--teal { + background-color: $color-conversation-teal; + } + + .module-conversation-list-item__message__status-icon--sending { + @include color-svg('../images/sending.svg', $color-light-35); + } + + .module-conversation-list-item__message__status-icon--sent { + @include color-svg('../images/check-circle-outline.svg', $color-light-35); + } + .module-conversation-list-item__message__status-icon--delivered { + @include color-svg('../images/double-check.svg', $color-light-35); + width: 18px; + } + .module-conversation-list-item__message__status-icon--read { + @include color-svg('../images/read.svg', $color-light-35); + width: 18px; + } + // Third-party module: react-contextmenu .react-contextmenu { diff --git a/ts/components/ConversationListItem.md b/ts/components/ConversationListItem.md new file mode 100644 index 000000000..67cc729b9 --- /dev/null +++ b/ts/components/ConversationListItem.md @@ -0,0 +1,186 @@ +#### With name and profile + +```jsx + console.log('onClick')} + i18n={util.i18n} +/> +``` + +#### Profile, with name, no avatar + +```jsx + console.log('onClick')} + i18n={util.i18n} +/> +``` + +#### With unread + +```jsx + console.log('onClick')} + i18n={util.i18n} +/> +``` + +#### Selected + +```jsx + console.log('onClick')} + i18n={util.i18n} +/> +``` + +#### With emoji/links in message, no status + +We don't want Jumbomoji or links. + +```jsx +
+ console.log('onClick')} + i18n={util.i18n} + /> + console.log('onClick')} + i18n={util.i18n} + /> +
+``` + +#### Long content + +We only show one line. + +```jsx +
+ console.log('onClick')} + i18n={util.i18n} + /> + console.log('onClick')} + i18n={util.i18n} + /> + console.log('onClick')} + i18n={util.i18n} + /> + + console.log('onClick')} + i18n={util.i18n} + /> + console.log('onClick')} + i18n={util.i18n} + /> +
+``` + +#### With various ages + +```jsx +
+ console.log('onClick')} + i18n={util.i18n} + /> + console.log('onClick')} + i18n={util.i18n} + /> + console.log('onClick')} + i18n={util.i18n} + /> + console.log('onClick')} + i18n={util.i18n} + /> +
+``` diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx new file mode 100644 index 000000000..d1e8b1d64 --- /dev/null +++ b/ts/components/ConversationListItem.tsx @@ -0,0 +1,159 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { MessageBody } from './conversation/MessageBody'; +import { Timestamp } from './conversation/Timestamp'; +import { ContactName } from './conversation/ContactName'; +import { Localizer } from '../types/Util'; + +interface Props { + phoneNumber: string; + profileName?: string; + name?: string; + color?: string; + avatarPath?: string; + + lastUpdated: number; + hasUnread: boolean; + isSelected: boolean; + + lastMessage?: { + status: 'sending' | 'sent' | 'delivered' | 'read' | 'error'; + text: string; + }; + + i18n: Localizer; + onClick?: () => void; +} + +function getInitial(name: string): string { + return name.trim()[0] || '#'; +} + +export class ConversationListItem extends React.Component { + public renderAvatar() { + const { + avatarPath, + color, + i18n, + name, + phoneNumber, + profileName, + } = this.props; + + if (!avatarPath) { + const initial = getInitial(name || ''); + + return ( +
+ {initial} +
+ ); + } + + const title = `${name || phoneNumber}${ + !name && profileName ? ` ~${profileName}` : '' + }`; + + return ( + {i18n('contactAvatarAlt', + ); + } + + public renderHeader() { + const { i18n, lastUpdated, name, phoneNumber, profileName } = this.props; + + return ( +
+
+ +
+
+ +
+
+ ); + } + + public renderMessage() { + const { lastMessage, hasUnread, i18n } = this.props; + + if (!lastMessage) { + return null; + } + + return ( +
+ {lastMessage.text ? ( +
+ +
+ ) : null} + {lastMessage.status ? ( +
+ ) : null} +
+ ); + } + + public render() { + const { hasUnread, onClick, isSelected } = this.props; + + return ( +
+ {this.renderAvatar()} +
+ {this.renderHeader()} + {this.renderMessage()} +
+
+ ); + } +} diff --git a/ts/components/conversation/GroupNotification.tsx b/ts/components/conversation/GroupNotification.tsx index 79f330eb4..4f0d94739 100644 --- a/ts/components/conversation/GroupNotification.tsx +++ b/ts/components/conversation/GroupNotification.tsx @@ -98,8 +98,8 @@ export class GroupNotification extends React.Component { return (
- {(changes || []).map(change => ( -
+ {(changes || []).map((change, index) => ( +
{this.renderChange(change)}
))} diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index b2fe8ed33..fed07a3e4 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -291,6 +291,7 @@ export class Message extends React.Component { { module, timestamp, withImageNoCaption, + extended, } = this.props; const moduleName = module || 'module-timestamp'; @@ -54,12 +56,12 @@ export class Timestamp extends React.Component { - {formatRelativeTime(timestamp, { i18n, extended: true })} + {formatRelativeTime(timestamp, { i18n, extended })} ); } diff --git a/ts/selectors/message.ts b/ts/selectors/message.ts deleted file mode 100644 index 059ac1c05..000000000 --- a/ts/selectors/message.ts +++ /dev/null @@ -1,127 +0,0 @@ -export function messageSelector({ model, view }: { model: any; view: any }) { - // tslint:disable-next-line - console.log({ model, view }); - - return null; - // const avatar = this.model.getAvatar(); - // const avatarPath = avatar && avatar.url; - // const color = avatar && avatar.color; - // const isMe = this.ourNumber === this.model.id; - - // const attachments = this.model.get('attachments') || []; - // const loadedAttachmentViews = Promise.all( - // attachments.map( - // attachment => - // new Promise(async resolve => { - // const attachmentWithData = await loadAttachmentData(attachment); - // const view = new Whisper.AttachmentView({ - // model: attachmentWithData, - // timestamp: this.model.get('sent_at'), - // }); - - // this.listenTo(view, 'update', () => { - // // NOTE: Can we do without `updated` flag now that we use promises? - // view.updated = true; - // resolve(view); - // }); - - // view.render(); - // }) - // ) - // ); - - // Wiring up TimerNotification - - // this.conversation = this.model.getExpirationTimerUpdateSource(); - // this.listenTo(this.conversation, 'change', this.render); - // this.listenTo(this.model, 'unload', this.remove); - // this.listenTo(this.model, 'change', this.onChange); - - // Wiring up SafetyNumberNotification - - // this.conversation = this.model.getModelForKeyChange(); - // this.listenTo(this.conversation, 'change', this.render); - // this.listenTo(this.model, 'unload', this.remove); - - // Wiring up VerificationNotification - - // this.conversation = this.model.getModelForVerifiedChange(); - // this.listenTo(this.conversation, 'change', this.render); - // this.listenTo(this.model, 'unload', this.remove); - - // this.contactView = new Whisper.ReactWrapperView({ - // className: 'contact-wrapper', - // Component: window.Signal.Components.ContactListItem, - // props: { - // isMe, - // color, - // avatarPath, - // phoneNumber: model.getNumber(), - // name: model.getName(), - // profileName: model.getProfileName(), - // verified: model.isVerified(), - // onClick: showIdentity, - // }, - // }); - - // this.$el.append(this.contactView.el); -} - -// We actually don't listen to the model telling us that it's gone if it's disappearing -// onDestroy() { -// if (this.$el.hasClass('expired')) { -// return; -// } -// this.onUnload(); -// }, - -// The backflips required to maintain scroll position when loading images -// Key is only adding the img to the DOM when the image has loaded. -// -// How might we get similar behavior with React? -// -// this.trigger('beforeChangeHeight'); -// this.$('.attachments').append(view.el); -// view.setElement(view.el); -// this.trigger('afterChangeHeight'); - -// Timer code - -// if (this.model.isExpired()) { -// return this; -// } -// if (this.model.isExpiring()) { -// this.render(); -// const totalTime = this.model.get('expireTimer') * 1000; -// const remainingTime = this.model.msTilExpire(); -// const elapsed = (totalTime - remainingTime) / totalTime; -// this.$('.sand').css('transform', `translateY(${elapsed * 100}%)`); -// this.$el.css('display', 'inline-block'); -// this.timeout = setTimeout( -// this.update.bind(this), -// Math.max(totalTime / 100, 500) -// ); -// } - -// Expiring message - -// this.$el.addClass('expired'); -// this.$el.find('.bubble').one('webkitAnimationEnd animationend', e => { -// if (e.target === this.$('.bubble')[0]) { -// this.remove(); -// } -// }); - -// // Failsafe: if in the background, animation events don't fire -// setTimeout(this.remove.bind(this), 1000); - -// Retrying a message -// retryMessage() { -// const retrys = _.filter( -// this.model.get('errors'), -// this.model.isReplayableError.bind(this.model) -// ); -// _.map(retrys, 'number').forEach(number => { -// this.model.resend(number); -// }); -// }, diff --git a/ts/test/types/Conversation_test.ts b/ts/test/types/Conversation_test.ts index 7ff2330bf..8e2b6b4b5 100644 --- a/ts/test/types/Conversation_test.ts +++ b/ts/test/types/Conversation_test.ts @@ -14,10 +14,12 @@ describe('Conversation', () => { currentLastMessageText: null, currentTimestamp: null, lastMessage: null, + lastMessageStatus: null, lastMessageNotificationText: null, }; const expected = { lastMessage: '', + lastMessageStatus: null, timestamp: null, }; @@ -30,6 +32,7 @@ describe('Conversation', () => { const input = { currentLastMessageText: 'Existing message', currentTimestamp: 555, + lastMessageStatus: 'read', lastMessage: { type: 'outgoing', conversationId: 'foo', @@ -40,6 +43,7 @@ describe('Conversation', () => { }; const expected = { lastMessage: 'New outgoing message', + lastMessageStatus: 'read', timestamp: 666, }; @@ -52,6 +56,7 @@ describe('Conversation', () => { const input = { currentLastMessageText: 'bingo', currentTimestamp: 555, + lastMessageStatus: null, lastMessage: { type: 'verified-change', conversationId: 'foo', @@ -62,6 +67,7 @@ describe('Conversation', () => { }; const expected = { lastMessage: 'bingo', + lastMessageStatus: null, timestamp: 555, }; @@ -75,6 +81,7 @@ describe('Conversation', () => { const input = { currentLastMessageText: 'I am expired', currentTimestamp: 555, + lastMessageStatus: null, lastMessage: { type: 'incoming', conversationId: 'foo', @@ -90,6 +97,7 @@ describe('Conversation', () => { }; const expected = { lastMessage: 'Last message before expired', + lastMessageStatus: null, timestamp: 555, }; diff --git a/ts/types/Conversation.ts b/ts/types/Conversation.ts index 78d781440..e77ef41cc 100644 --- a/ts/types/Conversation.ts +++ b/ts/types/Conversation.ts @@ -3,6 +3,7 @@ import { Message } from './Message'; interface ConversationLastMessageUpdate { lastMessage: string | null; + lastMessageStatus: string | null; timestamp: number | null; } @@ -10,16 +11,19 @@ export const createLastMessageUpdate = ({ currentLastMessageText, currentTimestamp, lastMessage, + lastMessageStatus, lastMessageNotificationText, }: { currentLastMessageText: string | null; currentTimestamp: number | null; lastMessage: Message | null; + lastMessageStatus: string | null; lastMessageNotificationText: string | null; }): ConversationLastMessageUpdate => { if (lastMessage === null) { return { lastMessage: '', + lastMessageStatus: null, timestamp: null, }; } @@ -40,6 +44,7 @@ export const createLastMessageUpdate = ({ return { lastMessage: newLastMessageText, + lastMessageStatus, timestamp: newTimestamp, }; };