|
|
|
import React from 'react';
|
|
|
|
// import classNames from 'classnames';
|
|
|
|
|
|
|
|
import { Localizer } from '../../types/Util';
|
|
|
|
import { MessageBody } from './MessageBody';
|
|
|
|
|
|
|
|
interface Contact {
|
|
|
|
phoneNumber: string;
|
|
|
|
profileName?: string;
|
|
|
|
name?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
text?: string;
|
|
|
|
direction: 'incoming' | 'outgoing';
|
|
|
|
source: Contact;
|
|
|
|
target: Contact;
|
|
|
|
i18n: Localizer;
|
|
|
|
friendStatus: 'pending' | 'accepted' | 'declined';
|
|
|
|
onAccept: () => void;
|
|
|
|
onDecline: () => void;
|
|
|
|
onDelete: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class FriendRequest extends React.Component<Props> {
|
|
|
|
public getStringId() {
|
|
|
|
const { friendStatus, direction } = this.props;
|
|
|
|
|
|
|
|
switch (friendStatus) {
|
|
|
|
case 'pending':
|
|
|
|
return `${direction}FriendRequestPending`;
|
|
|
|
case 'accepted':
|
|
|
|
return `friendRequestAccepted`;
|
|
|
|
case 'declined':
|
|
|
|
return `friendRequestDeclined`;
|
|
|
|
default:
|
|
|
|
throw new Error(`Invalid friend request status: ${friendStatus}`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
public renderContents() {
|
|
|
|
const { direction, i18n, text } = this.props;
|
|
|
|
const id = this.getStringId();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div className={`module-friend-request__title module-friend-request__title--${direction}`}>{i18n(id)}</div>
|
|
|
|
{!!text &&
|
|
|
|
<div dir="auto">
|
|
|
|
<MessageBody text={text || ''} i18n={i18n} />
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
public renderButtons() {
|
|
|
|
const { friendStatus, direction, onAccept, onDecline, onDelete } = this.props;
|
|
|
|
|
|
|
|
if (direction === 'incoming') {
|
|
|
|
if (friendStatus === 'pending') {
|
|
|
|
return (
|
|
|
|
<div className={`module-message__metadata module-friend-request__buttonContainer module-friend-request__buttonContainer--${direction}`}>
|
|
|
|
<button onClick={onAccept}>Accept</button>
|
|
|
|
<button onClick={onDecline}>Decline</button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else if (friendStatus === 'declined') {
|
|
|
|
return (
|
|
|
|
<div className={`module-message__metadata module-friend-request__buttonContainer module-friend-request__buttonContainer--${direction}`}>
|
|
|
|
<button onClick={onDelete}>Delete Conversation</button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
public render() {
|
|
|
|
const { direction } = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={`module-message module-message--${direction} module-message-friend-request`}>
|
|
|
|
<div className={`module-message__container module-message__container--${direction} module-message-friend-request__container`}>
|
|
|
|
<div className={`module-message__text module-message__text--${direction}`}>
|
|
|
|
{this.renderContents()}
|
|
|
|
{this.renderButtons()}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|