|
|
|
@ -12,6 +12,7 @@ import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
|
|
|
|
|
import { ConversationController } from '../../session/conversations';
|
|
|
|
|
import { PubKey } from '../../session/types';
|
|
|
|
|
import { ConversationType } from '../../models/conversation';
|
|
|
|
|
import autoBind from 'auto-bind';
|
|
|
|
|
|
|
|
|
|
export interface Props {
|
|
|
|
|
directContacts: Array<ReduxConversationType>;
|
|
|
|
@ -19,34 +20,10 @@ export interface Props {
|
|
|
|
|
openConversationExternal: (id: string, messageId?: string) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface State {
|
|
|
|
|
showAddContactView: boolean;
|
|
|
|
|
addContactRecipientID: string;
|
|
|
|
|
pubKeyPasted: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export class LeftPaneContactSection extends React.Component<Props, State> {
|
|
|
|
|
export class LeftPaneContactSection extends React.Component<Props> {
|
|
|
|
|
public constructor(props: Props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
showAddContactView: false,
|
|
|
|
|
addContactRecipientID: '',
|
|
|
|
|
pubKeyPasted: '',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
|
|
|
|
|
this.handleOnAddContact = this.handleOnAddContact.bind(this);
|
|
|
|
|
this.handleRecipientSessionIDChanged = this.handleRecipientSessionIDChanged.bind(this);
|
|
|
|
|
this.closeOverlay = this.closeOverlay.bind(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public componentDidMount() {
|
|
|
|
|
window.Whisper.events.on('calculatingPoW', this.closeOverlay);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public componentWillUnmount() {
|
|
|
|
|
this.setState({ addContactRecipientID: '' });
|
|
|
|
|
window.Whisper.events.off('calculatingPoW', this.closeOverlay);
|
|
|
|
|
autoBind(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public renderHeader(): JSX.Element | undefined {
|
|
|
|
@ -57,7 +34,7 @@ export class LeftPaneContactSection extends React.Component<Props, State> {
|
|
|
|
|
return (
|
|
|
|
|
<div className="left-pane-contact-section">
|
|
|
|
|
{this.renderHeader()}
|
|
|
|
|
{this.state.showAddContactView ? this.renderClosableOverlay() : this.renderContacts()}
|
|
|
|
|
{this.renderContacts()}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
@ -77,71 +54,8 @@ export class LeftPaneContactSection extends React.Component<Props, State> {
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
private renderClosableOverlay() {
|
|
|
|
|
return (
|
|
|
|
|
<SessionClosableOverlay
|
|
|
|
|
overlayMode={SessionClosableOverlayType.Contact}
|
|
|
|
|
onChangeSessionID={this.handleRecipientSessionIDChanged}
|
|
|
|
|
onCloseClick={this.handleToggleOverlay}
|
|
|
|
|
onButtonClick={this.handleOnAddContact}
|
|
|
|
|
theme={this.props.theme}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private closeOverlay({ pubKey }: { pubKey: string }) {
|
|
|
|
|
if (this.state.addContactRecipientID === pubKey) {
|
|
|
|
|
this.setState({ showAddContactView: false, addContactRecipientID: '' });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private handleToggleOverlay() {
|
|
|
|
|
this.setState((prevState: { showAddContactView: boolean }) => ({
|
|
|
|
|
showAddContactView: !prevState.showAddContactView,
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private handleOnAddContact() {
|
|
|
|
|
const sessionID = this.state.addContactRecipientID.trim();
|
|
|
|
|
const error = PubKey.validateWithError(sessionID, window.i18n);
|
|
|
|
|
|
|
|
|
|
if (error) {
|
|
|
|
|
ToastUtils.pushToastError('addContact', error);
|
|
|
|
|
} else {
|
|
|
|
|
void ConversationController.getInstance()
|
|
|
|
|
.getOrCreateAndWait(sessionID, ConversationType.PRIVATE)
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.props.openConversationExternal(sessionID);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private handleRecipientSessionIDChanged(value: string) {
|
|
|
|
|
this.setState({ addContactRecipientID: value });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderContacts() {
|
|
|
|
|
return (
|
|
|
|
|
<div className="left-pane-contact-content">
|
|
|
|
|
{this.renderList()}
|
|
|
|
|
{this.renderBottomButtons()}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderBottomButtons(): JSX.Element {
|
|
|
|
|
const addContact = window.i18n('addContact');
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="left-pane-contact-bottom-buttons">
|
|
|
|
|
<SessionButton
|
|
|
|
|
text={addContact}
|
|
|
|
|
buttonType={SessionButtonType.SquareOutline}
|
|
|
|
|
buttonColor={SessionButtonColor.Green}
|
|
|
|
|
onClick={this.handleToggleOverlay}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
return <div className="left-pane-contact-content">{this.renderList()}</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderList() {
|
|
|
|
|