You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
session-desktop/ts/components/conversation/FriendRequest.tsx

95 lines
2.7 KiB
TypeScript

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>
);
}
}