From 37821e5a1b579e219d542f836616d49be4932e3b Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Fri, 4 May 2018 18:19:54 -0700 Subject: [PATCH] Wire up all contact behaviors, refactor Contact type/selector --- js/background.js | 6 ++ js/modules/types/errors.d.ts | 1 + js/views/conversation_view.js | 19 ++-- js/views/message_view.js | 68 ++++--------- preload.js | 5 +- stylesheets/_conversation.scss | 11 ++- ts/components/conversation/ContactDetail.tsx | 72 ++------------ .../conversation/EmbeddedContact.tsx | 65 +----------- ts/styleguide/StyleGuideUtil.ts | 3 + ts/types/Contact.ts | 99 +++++++++++++++++++ ts/types/Message.ts | 8 ++ ts/util/formatPhoneNumber.ts | 27 +++++ ts/util/libphonenumberInstance.ts | 6 ++ 13 files changed, 198 insertions(+), 192 deletions(-) create mode 100644 js/modules/types/errors.d.ts create mode 100644 ts/types/Contact.ts create mode 100644 ts/util/formatPhoneNumber.ts create mode 100644 ts/util/libphonenumberInstance.ts diff --git a/js/background.js b/js/background.js index 5c0dc8878..eb6a50c8b 100644 --- a/js/background.js +++ b/js/background.js @@ -238,6 +238,12 @@ appView.openInbox(); } }); + Whisper.events.on('showConversation', function(conversation) { + if (appView) { + appView.openConversation(conversation); + } + }); + Whisper.Notifications.on('click', function(conversation) { showWindow(); if (conversation) { diff --git a/js/modules/types/errors.d.ts b/js/modules/types/errors.d.ts new file mode 100644 index 000000000..8c92c5564 --- /dev/null +++ b/js/modules/types/errors.d.ts @@ -0,0 +1 @@ +export function toLogFormat(error: any): string; diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 552d9091f..dc49b33ed 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -1007,15 +1007,17 @@ }, showContactDetail(contact) { - console.log('showContactDetail', contact); // TODO - - // TODO: need to run contact through selector to format email, get absolute path - // think it's probably time to move it to typescript + const regionCode = storage.get('regionCode'); + const { contactSelector } = Signal.Types.Contact; + const { getAbsoluteAttachmentPath } = window.Signal.Migrations; const view = new Whisper.ReactWrapperView({ - Component: Signal.Components.MediaGallery, + Component: Signal.Components.ContactDetail, props: { - contact, + contact: contactSelector(contact, { + regionCode, + getAbsoluteAttachmentPath, + }), hasSignalAccount: true, onSendMessage: () => { const number = @@ -1032,13 +1034,11 @@ }, async openConversation(number) { - console.log('openConversation', number); // TODO - const conversation = await window.ConversationController.getOrCreateAndWait( number, 'private' ); - window.Whisper.Events.trigger('click', conversation); + window.Whisper.events.trigger('showConversation', conversation); }, listenBack(view) { @@ -1244,7 +1244,6 @@ if (message) { const quote = await this.model.makeQuote(this.quotedMessage); - console.log({ quote }); this.quote = quote; this.focusMessageFieldAndClearDisabled(); diff --git a/js/views/message_view.js b/js/views/message_view.js index 994fddb49..8a6db544d 100644 --- a/js/views/message_view.js +++ b/js/views/message_view.js @@ -5,15 +5,17 @@ /* global emoji_util: false */ /* global Mustache: false */ /* global $: false */ -/* global libphonenumber: false */ /* global storage: false */ +/* global Signal: false */ // eslint-disable-next-line func-names (function() { 'use strict'; - const { Signal } = window; - const { loadAttachmentData } = window.Signal.Migrations; + const { + loadAttachmentData, + getAbsoluteAttachmentPath, + } = window.Signal.Migrations; window.Whisper = window.Whisper || {}; @@ -441,46 +443,6 @@ }); this.$('.inner-bubble').prepend(this.quoteView.el); }, - formatPhoneNumber(number, options = {}) { - const { ourRegionCode } = options; - const parsedNumber = libphonenumber.parse(number); - const regionCode = libphonenumber.getRegionCodeForNumber(parsedNumber); - if (ourRegionCode && regionCode === ourRegionCode) { - return libphonenumber.format( - parsedNumber, - libphonenumber.PhoneNumberFormat.NATIONAL - ); - } - return libphonenumber.format( - parsedNumber, - libphonenumber.PhoneNumberFormat.INTERNATIONAL - ); - }, - contactSelector(contact) { - const { getAbsoluteAttachmentPath } = Signal.Migrations; - const region = storage.get('regionCode'); - - let { avatar } = contact; - if (avatar && avatar.avatar && avatar.avatar.path) { - avatar = Object.assign({}, avatar, { - avatar: Object.assign({}, avatar.avatar, { - path: getAbsoluteAttachmentPath(avatar.avatar.path), - }), - }); - } - return Object.assign({}, contact, { - avatar, - number: - contact.number && - contact.number.map(item => - Object.assign({}, item, { - value: this.formatPhoneNumber(item.value, { - ourRegionCode: region, - }), - }) - ), - }); - }, renderContact() { const contacts = this.model.get('contact'); if (!contacts || !contacts.length) { @@ -488,6 +450,9 @@ } const contact = contacts[0]; + const regionCode = storage.get('regionCode'); + const { contactSelector } = Signal.Types.Contact; + const number = contact.number && contact.number[0] && contact.number[0].value; const haveConversation = @@ -503,14 +468,15 @@ this.model.trigger('show-contact-detail', contact); }; - const getProps = () => { - return { - contact: this.contactSelector(contact), - hasSignalAccount, - onSendMessage, - onOpenContact, - }; - }; + const getProps = () => ({ + contact: contactSelector(contact, { + regionCode, + getAbsoluteAttachmentPath, + }), + hasSignalAccount, + onSendMessage, + onOpenContact, + }); if (this.contactView) { this.contactView.remove(); diff --git a/preload.js b/preload.js index a0dfec638..3ea16a47f 100644 --- a/preload.js +++ b/preload.js @@ -172,10 +172,13 @@ const { Quote } = require('./ts/components/conversation/Quote'); const { EmbeddedContact, } = require('./ts/components/conversation/EmbeddedContact'); +const { ContactDetail } = require('./ts/components/conversation/ContactDetail'); const MediaGalleryMessage = require('./ts/components/conversation/media-gallery/types/Message'); window.Signal.Components = { + ContactDetail, + EmbeddedContact, Lightbox, LightboxGallery, MediaGallery, @@ -183,7 +186,6 @@ window.Signal.Components = { Message: MediaGalleryMessage, }, Quote, - EmbeddedContact, }; window.Signal.Migrations = {}; @@ -210,6 +212,7 @@ window.Signal.Startup = require('./js/modules/startup'); window.Signal.Types = {}; window.Signal.Types.Attachment = Attachment; +window.Signal.Types.Contact = require('./ts/types/Contact'); window.Signal.Types.Conversation = require('./ts/types/Conversation'); window.Signal.Types.Errors = require('./js/modules/types/errors'); diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 1b4ec5aef..a311c4f10 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -852,8 +852,11 @@ span.status { .send-message { color: white; - border-top: 1px solid rgba(255, 255, 255, 0.5); - border-bottom: 1px solid rgba(255, 255, 255, 0.5); + // We would like to use these border colors for incoming messages, but the version + // of Chromium in our Electron version doesn't render these appropriately. Both + // borders disappear for some reason, and it seems to have to do with transparency. + // border-top: 1px solid rgba(255, 255, 255, 0.5); + // border-bottom: 1px solid rgba(255, 255, 255, 0.5); .bubble-icon { background-color: white; @@ -963,6 +966,10 @@ span.status { } } +.conversation .contact-detail { + margin-top: 40px; +} + .quoted-message { @include message-replies-colors; @include twenty-percent-colors; diff --git a/ts/components/conversation/ContactDetail.tsx b/ts/components/conversation/ContactDetail.tsx index a9f0508c4..be6bf9654 100644 --- a/ts/components/conversation/ContactDetail.tsx +++ b/ts/components/conversation/ContactDetail.tsx @@ -1,5 +1,13 @@ import React from 'react'; +import { + Contact, + ContactType, + AddressType, + Phone, + Email, + PostalAddress, +} from '../../types/Contact'; import { missingCaseError } from '../../util/missingCaseError'; type Localizer = (key: string, values?: Array) => string; @@ -11,70 +19,6 @@ interface Props { onSendMessage: () => void; } -interface Contact { - name: Name; - number?: Array; - email?: Array; - address?: Array; - avatar?: Avatar; - organization?: string; -} - -interface Name { - givenName?: string; - familyName?: string; - prefix?: string; - suffix?: string; - middleName?: string; - displayName: string; -} - -enum ContactType { - HOME = 1, - MOBILE = 2, - WORK = 3, - CUSTOM = 4, -} - -enum AddressType { - HOME = 1, - WORK = 2, - CUSTOM = 3, -} - -interface Phone { - value: string; - type: ContactType; - label?: string; -} - -interface Email { - value: string; - type: ContactType; - label?: string; -} - -interface PostalAddress { - type: AddressType; - label?: string; - street?: string; - pobox?: string; - neighborhood?: string; - city?: string; - region?: string; - postcode?: string; - country?: string; -} - -interface Avatar { - avatar: Attachment; - isProfile: boolean; -} - -interface Attachment { - path: string; -} - function getLabelForContactMethod(method: Phone | Email, i18n: Localizer) { switch (method.type) { case ContactType.CUSTOM: diff --git a/ts/components/conversation/EmbeddedContact.tsx b/ts/components/conversation/EmbeddedContact.tsx index d9a6658f0..7c3736088 100644 --- a/ts/components/conversation/EmbeddedContact.tsx +++ b/ts/components/conversation/EmbeddedContact.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Contact } from '../../types/Contact'; interface Props { contact: Contact; @@ -8,70 +9,6 @@ interface Props { onOpenContact: () => void; } -interface Contact { - name: Name; - number?: Array; - email?: Array; - address?: Array; - avatar?: Avatar; - organization?: string; -} - -interface Name { - givenName?: string; - familyName?: string; - prefix?: string; - suffix?: string; - middleName?: string; - displayName: string; -} - -enum ContactType { - HOME = 1, - MOBILE = 2, - WORK = 3, - CUSTOM = 4, -} - -enum AddressType { - HOME = 1, - WORK = 2, - CUSTOM = 3, -} - -interface Phone { - value: string; - type: ContactType; - label?: string; -} - -interface Email { - value: string; - type: ContactType; - label?: string; -} - -interface PostalAddress { - type: AddressType; - label?: string; - street?: string; - pobox?: string; - neighborhood?: string; - city?: string; - region?: string; - postcode?: string; - country?: string; -} - -interface Avatar { - avatar: Attachment; - isProfile: boolean; -} - -interface Attachment { - path: string; -} - function getInitials(name: string): string { return name.trim()[0] || '#'; } diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 0e5b191e5..37ee9699d 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -19,6 +19,8 @@ export { BackboneWrapper } from '../components/utility/BackboneWrapper'; import { Quote } from '../components/conversation/Quote'; import { EmbeddedContact } from '../components/conversation/EmbeddedContact'; +import * as Contact from '../types/Contact'; + import * as HTML from '../html'; import * as Attachment from '../../ts/types/Attachment'; @@ -130,6 +132,7 @@ parent.ReactDOM = ReactDOM; parent.Signal.HTML = HTML; parent.Signal.Types.MIME = MIME; parent.Signal.Types.Attachment = Attachment; +parent.Signal.Types.Contact = Contact; parent.Signal.Components = { Quote, EmbeddedContact, diff --git a/ts/types/Contact.ts b/ts/types/Contact.ts new file mode 100644 index 000000000..114e32fc1 --- /dev/null +++ b/ts/types/Contact.ts @@ -0,0 +1,99 @@ +// @ts-ignore +import Attachments from '../../app/attachments'; +import { formatPhoneNumber } from '../util/formatPhoneNumber'; + +export interface Contact { + name: Name; + number?: Array; + email?: Array; + address?: Array; + avatar?: Avatar; + organization?: string; +} + +interface Name { + givenName?: string; + familyName?: string; + prefix?: string; + suffix?: string; + middleName?: string; + displayName: string; +} + +export enum ContactType { + HOME = 1, + MOBILE = 2, + WORK = 3, + CUSTOM = 4, +} + +export enum AddressType { + HOME = 1, + WORK = 2, + CUSTOM = 3, +} + +export interface Phone { + value: string; + type: ContactType; + label?: string; +} + +export interface Email { + value: string; + type: ContactType; + label?: string; +} + +export interface PostalAddress { + type: AddressType; + label?: string; + street?: string; + pobox?: string; + neighborhood?: string; + city?: string; + region?: string; + postcode?: string; + country?: string; +} + +interface Avatar { + avatar: Attachment; + isProfile: boolean; +} + +interface Attachment { + path: string; +} + +export function contactSelector( + contact: Contact, + options: { + regionCode: string; + getAbsoluteAttachmentPath: (path: string) => string; + } +) { + const { regionCode, getAbsoluteAttachmentPath } = options; + + let { avatar } = contact; + if (avatar && avatar.avatar && avatar.avatar.path) { + avatar = { + ...avatar, + avatar: { + ...avatar.avatar, + path: getAbsoluteAttachmentPath(avatar.avatar.path), + }, + }; + } + return Object.assign({}, contact, { + avatar, + number: + contact.number && + contact.number.map(item => ({ + ...item, + value: formatPhoneNumber(item.value, { + ourRegionCode: regionCode, + }), + })), + }); +} diff --git a/ts/types/Message.ts b/ts/types/Message.ts index 91c4e98b1..09f0f39de 100644 --- a/ts/types/Message.ts +++ b/ts/types/Message.ts @@ -1,4 +1,5 @@ import { Attachment } from './Attachment'; +import { Contact } from './Contact'; import { IndexableBoolean, IndexablePresence } from './IndexedDB'; export type Message = UserMessage | VerifiedChangeMessage; @@ -21,6 +22,7 @@ export type IncomingMessage = Readonly< sourceDevice?: number; } & SharedMessageProperties & MessageSchemaVersion5 & + MessageSchemaVersion6 & ExpirationTimerUpdate >; @@ -81,3 +83,9 @@ type MessageSchemaVersion5 = Partial< hasFileAttachments: IndexablePresence; }> >; + +type MessageSchemaVersion6 = Partial< + Readonly<{ + contact: Array; + }> +>; diff --git a/ts/util/formatPhoneNumber.ts b/ts/util/formatPhoneNumber.ts new file mode 100644 index 000000000..8fe50c96b --- /dev/null +++ b/ts/util/formatPhoneNumber.ts @@ -0,0 +1,27 @@ +import { toLogFormat } from '../../js/modules/types/errors'; +import { instance, PhoneNumberFormat } from './libphonenumberInstance'; + +export function formatPhoneNumber( + number: string, + options: { + ourRegionCode: string; + } +) { + try { + const { ourRegionCode } = options; + const parsedNumber = instance.parse(number); + const regionCode = instance.getRegionCodeForNumber(parsedNumber); + + if (ourRegionCode && regionCode === ourRegionCode) { + return instance.format(parsedNumber, PhoneNumberFormat.NATIONAL); + } + + return instance.format(parsedNumber, PhoneNumberFormat.INTERNATIONAL); + } catch (error) { + console.log( + 'formatPhoneNumber - had problems formatting number:', + toLogFormat(error) + ); + return number; + } +} diff --git a/ts/util/libphonenumberInstance.ts b/ts/util/libphonenumberInstance.ts new file mode 100644 index 000000000..40855ac23 --- /dev/null +++ b/ts/util/libphonenumberInstance.ts @@ -0,0 +1,6 @@ +import libphonenumber from 'google-libphonenumber'; + +const instance = libphonenumber.PhoneNumberUtil.getInstance(); +const PhoneNumberFormat = libphonenumber.PhoneNumberFormat; + +export { instance, PhoneNumberFormat };