62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import React, { FC, useCallback } from '../../../lib/teact/teact';
|
|
import { getDispatch, withGlobal } from '../../../lib/teact/teactn';
|
|
|
|
import { ApiUser, ApiContact, ApiCountryCode } from '../../../api/types';
|
|
|
|
import { selectUser } from '../../../modules/selectors';
|
|
import { formatPhoneNumberWithCode } from '../../../util/phoneNumber';
|
|
import buildClassName from '../../../util/buildClassName';
|
|
|
|
import Avatar from '../../common/Avatar';
|
|
|
|
import './Contact.scss';
|
|
|
|
type OwnProps = {
|
|
contact: ApiContact;
|
|
};
|
|
|
|
type StateProps = {
|
|
user?: ApiUser;
|
|
phoneCodeList: ApiCountryCode[];
|
|
};
|
|
|
|
const Contact: FC<OwnProps & StateProps> = ({
|
|
contact, user, phoneCodeList,
|
|
}) => {
|
|
const { openChat } = getDispatch();
|
|
|
|
const {
|
|
firstName,
|
|
lastName,
|
|
phoneNumber,
|
|
userId,
|
|
} = contact;
|
|
|
|
const handleClick = useCallback(() => {
|
|
openChat({ id: userId });
|
|
}, [openChat, userId]);
|
|
|
|
return (
|
|
<div
|
|
className={buildClassName('Contact', Boolean(userId) && 'interactive')}
|
|
onClick={userId ? handleClick : undefined}
|
|
>
|
|
<Avatar size="large" user={user} text={firstName || lastName} />
|
|
<div className="contact-info">
|
|
<div className="contact-name">{firstName} {lastName}</div>
|
|
<div className="contact-phone">{formatPhoneNumberWithCode(phoneCodeList, phoneNumber)}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withGlobal<OwnProps>(
|
|
(global, { contact }): StateProps => {
|
|
const { countryList: { phoneCodes: phoneCodeList } } = global;
|
|
return {
|
|
user: selectUser(global, contact.userId),
|
|
phoneCodeList,
|
|
};
|
|
},
|
|
)(Contact);
|