Refactor to remove duplicated code, lint/prettier fixes

This commit is contained in:
Scott Nonnenberg 2018-05-07 17:51:29 -07:00
parent f628df1035
commit 1fd487be3f
5 changed files with 99 additions and 157 deletions

View file

@ -15,6 +15,7 @@ test/test.js
ts/**/*.js
ts/protobuf/*.d.ts
ts/protobuf/*.js
stylesheets/manifest.css
# Third-party files
components/**
@ -37,3 +38,4 @@ _locales/**
# Symlink into third-party `components`:
stylesheets/_intlTelInput.scss

View file

@ -1,15 +1,22 @@
import React from 'react';
import {
AddressType,
Contact,
ContactType,
AddressType,
Phone,
Email,
Phone,
PostalAddress,
} from '../../types/Contact';
import { missingCaseError } from '../../util/missingCaseError';
import {
renderAvatar,
renderContactShorthand,
renderName,
renderSendMessage,
} from './EmbeddedContact';
type Localizer = (key: string, values?: Array<string>) => string;
interface Props {
@ -47,77 +54,7 @@ function getLabelForAddress(address: PostalAddress, i18n: Localizer) {
}
}
function getInitials(name: string): string {
return name.trim()[0] || '#';
}
function getName(contact: Contact): string {
const { name, organization } = contact;
return (name && name.displayName) || organization || '';
}
export class ContactDetail extends React.Component<Props, {}> {
public renderAvatar() {
const { contact } = this.props;
const { avatar } = contact;
const path = avatar && avatar.avatar && avatar.avatar.path;
if (!path) {
const name = getName(contact);
const initials = getInitials(name);
return (
<div className="image-container">
<div className="default-avatar">{initials}</div>
</div>
);
}
return (
<div className="image-container">
<img src={path} />
</div>
);
}
public renderName() {
const { contact } = this.props;
return <div className="contact-name">{getName(contact)}</div>;
}
public renderContactShorthand() {
const { contact } = this.props;
const { number, email } = contact;
const firstNumber = number && number[0] && number[0].value;
const firstEmail = email && email[0] && email[0].value;
return <div className="contact-method">{firstNumber || firstEmail}</div>;
}
public renderSendMessage() {
const { hasSignalAccount, i18n, onSendMessage } = this.props;
if (!hasSignalAccount) {
return null;
}
// We don't want the overall click handler for this element to fire, so we stop
// propagation before handing control to the caller's callback.
const onClick = (e: React.MouseEvent<{}>): void => {
e.stopPropagation();
onSendMessage();
};
return (
<div className="send-message" onClick={onClick}>
<button className="inner">
<div className="icon bubble-icon" />
{i18n('sendMessageToContact')}
</button>
</div>
);
}
public renderAdditionalContact(
items: Array<Phone | Email> | undefined,
i18n: Localizer
@ -191,14 +128,14 @@ export class ContactDetail extends React.Component<Props, {}> {
}
public render() {
const { contact, i18n } = this.props;
const { contact, hasSignalAccount, i18n, onSendMessage } = this.props;
return (
<div className="contact-detail">
{this.renderAvatar()}
{this.renderName()}
{this.renderContactShorthand()}
{this.renderSendMessage()}
{renderAvatar(contact)}
{renderName(contact)}
{renderContactShorthand(contact)}
{renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
{this.renderAdditionalContact(contact.number, i18n)}
{this.renderAdditionalContact(contact.email, i18n)}
{this.renderAddresses(contact.address, i18n)}

View file

@ -9,86 +9,94 @@ interface Props {
onOpenContact: () => void;
}
function getInitials(name: string): string {
return name.trim()[0] || '#';
}
export class EmbeddedContact extends React.Component<Props, {}> {
public renderAvatar() {
const { contact } = this.props;
const { avatar } = contact;
const path = avatar && avatar.avatar && avatar.avatar.path;
if (!path) {
const name = getName(contact);
const initials = getInitials(name || '');
return (
<div className="image-container">
<div className="default-avatar">{initials}</div>
</div>
);
}
return (
<div className="image-container">
<img src={path} />
</div>
);
}
public renderName() {
const { contact } = this.props;
return <div className="contact-name">{getName(contact)}</div>;
}
public renderContactShorthand() {
const { contact } = this.props;
const { number, email } = contact;
const firstNumber = number && number[0] && number[0].value;
const firstEmail = email && email[0] && email[0].value;
return <div className="contact-method">{firstNumber || firstEmail}</div>;
}
public renderSendMessage() {
const { hasSignalAccount, i18n, onSendMessage } = this.props;
if (!hasSignalAccount) {
return null;
}
// We don't want the overall click handler for this element to fire, so we stop
// propagation before handing control to the caller's callback.
const onClick = (e: React.MouseEvent<{}>): void => {
e.stopPropagation();
onSendMessage();
};
return (
<div className="send-message" onClick={onClick}>
<button className="inner">
<div className="icon bubble-icon" />
{i18n('sendMessageToContact')}
</button>
</div>
);
}
public render() {
const { onOpenContact } = this.props;
const {
contact,
hasSignalAccount,
i18n,
onOpenContact,
onSendMessage,
} = this.props;
return (
<div className="embedded-contact" onClick={onOpenContact}>
<div className="first-line">
{this.renderAvatar()}
{renderAvatar(contact)}
<div className="text-container">
{this.renderName()}
{this.renderContactShorthand()}
{renderName(contact)}
{renderContactShorthand(contact)}
</div>
</div>
{this.renderSendMessage()}
{renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
</div>
);
}
}
// Note: putting these below the main component so style guide picks up EmbeddedContact
function getInitials(name: string): string {
return name.trim()[0] || '#';
}
export function renderAvatar(contact: Contact) {
const { avatar } = contact;
const path = avatar && avatar.avatar && avatar.avatar.path;
if (!path) {
const name = getName(contact);
const initials = getInitials(name || '');
return (
<div className="image-container">
<div className="default-avatar">{initials}</div>
</div>
);
}
return (
<div className="image-container">
<img src={path} />
</div>
);
}
export function renderName(contact: Contact) {
return <div className="contact-name">{getName(contact)}</div>;
}
export function renderContactShorthand(contact: Contact) {
const { number: phoneNumber, email } = contact;
const firstNumber = phoneNumber && phoneNumber[0] && phoneNumber[0].value;
const firstEmail = email && email[0] && email[0].value;
return <div className="contact-method">{firstNumber || firstEmail}</div>;
}
export function renderSendMessage(props: {
hasSignalAccount: boolean;
i18n: (key: string, values?: Array<string>) => string;
onSendMessage: () => void;
}) {
const { hasSignalAccount, i18n, onSendMessage } = props;
if (!hasSignalAccount) {
return null;
}
// We don't want the overall click handler for this element to fire, so we stop
// propagation before handing control to the caller's callback.
const onClick = (e: React.MouseEvent<{}>): void => {
e.stopPropagation();
onSendMessage();
};
return (
<div className="send-message" onClick={onClick}>
<button className="inner">
<div className="icon bubble-icon" />
{i18n('sendMessageToContact')}
</button>
</div>
);
}

View file

@ -200,8 +200,8 @@ export { COLORS, CONTACTS, me, group };
parent.textsecure.storage.user.getNumber = () => ourNumber;
parent.textsecure.messaging = {
getProfile: async (number: string): Promise<Boolean> => {
if (parent.ConversationController.get(number)) {
getProfile: async (phoneNumber: string): Promise<boolean> => {
if (parent.ConversationController.get(phoneNumber)) {
return true;
}

View file

@ -1,15 +1,14 @@
import { toLogFormat } from '../../js/modules/types/errors';
import { instance, PhoneNumberFormat } from './libphonenumberInstance';
export function formatPhoneNumber(
number: string,
phoneNumber: string,
options: {
ourRegionCode: string;
}
) {
try {
const { ourRegionCode } = options;
const parsedNumber = instance.parse(number);
const parsedNumber = instance.parse(phoneNumber);
const regionCode = instance.getRegionCodeForNumber(parsedNumber);
if (ourRegionCode && regionCode === ourRegionCode) {
@ -18,10 +17,6 @@ export function formatPhoneNumber(
return instance.format(parsedNumber, PhoneNumberFormat.INTERNATIONAL);
} catch (error) {
console.log(
'formatPhoneNumber - had problems formatting number:',
toLogFormat(error)
);
return number;
return phoneNumber;
}
}