import { Component, linkEvent } from 'inferno'; import { Prompt } from 'inferno-router'; import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; import { PrivateMessageForm as PrivateMessageFormI, EditPrivateMessageForm, PrivateMessageFormParams, PrivateMessage, PrivateMessageResponse, UserView, UserOperation, UserDetailsResponse, GetUserDetailsForm, SortType, WebSocketJsonResponse, } from 'lemmy-js-client'; import { WebSocketService } from '../services'; import { capitalizeFirstLetter, wsJsonToRes, toast, setupTippy, } from '../utils'; import { UserListing } from './user-listing'; import { MarkdownTextArea } from './markdown-textarea'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; interface PrivateMessageFormProps { privateMessage?: PrivateMessage; // If a pm is given, that means this is an edit params?: PrivateMessageFormParams; onCancel?(): any; onCreate?(message: PrivateMessage): any; onEdit?(message: PrivateMessage): any; } interface PrivateMessageFormState { privateMessageForm: PrivateMessageFormI; recipient: UserView; loading: boolean; previewMode: boolean; showDisclaimer: boolean; } export class PrivateMessageForm extends Component< PrivateMessageFormProps, PrivateMessageFormState > { private subscription: Subscription; private emptyState: PrivateMessageFormState = { privateMessageForm: { content: null, recipient_id: null, }, recipient: null, loading: false, previewMode: false, showDisclaimer: false, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleContentChange = this.handleContentChange.bind(this); if (this.props.privateMessage) { this.state.privateMessageForm = { content: this.props.privateMessage.content, recipient_id: this.props.privateMessage.recipient_id, }; } if (this.props.params) { this.state.privateMessageForm.recipient_id = this.props.params.recipient_id; let form: GetUserDetailsForm = { user_id: this.state.privateMessageForm.recipient_id, sort: SortType.New, saved_only: false, }; WebSocketService.Instance.getUserDetails(form); } this.subscription = WebSocketService.Instance.subject .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) .subscribe( msg => this.parseMessage(msg), err => console.error(err), () => console.log('complete') ); } componentDidMount() { setupTippy(); } componentDidUpdate() { if (!this.state.loading && this.state.privateMessageForm.content) { window.onbeforeunload = () => true; } else { window.onbeforeunload = undefined; } } componentWillUnmount() { this.subscription.unsubscribe(); window.onbeforeunload = null; } render() { return (
{!this.props.privateMessage && (
{this.state.recipient && (
)}
)}
{this.state.showDisclaimer && (
)}
{this.props.privateMessage && ( )}
); } handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) { event.preventDefault(); if (i.props.privateMessage) { let editForm: EditPrivateMessageForm = { edit_id: i.props.privateMessage.id, content: i.state.privateMessageForm.content, }; WebSocketService.Instance.editPrivateMessage(editForm); } else { WebSocketService.Instance.createPrivateMessage( i.state.privateMessageForm ); } i.state.loading = true; i.setState(i.state); } handleRecipientChange(i: PrivateMessageForm, event: any) { i.state.recipient = event.target.value; i.setState(i.state); } handleContentChange(val: string) { this.state.privateMessageForm.content = val; this.setState(this.state); } handleCancel(i: PrivateMessageForm) { i.props.onCancel(); } handlePreviewToggle(i: PrivateMessageForm, event: any) { event.preventDefault(); i.state.previewMode = !i.state.previewMode; i.setState(i.state); } handleShowDisclaimer(i: PrivateMessageForm) { i.state.showDisclaimer = !i.state.showDisclaimer; i.setState(i.state); } parseMessage(msg: WebSocketJsonResponse) { let res = wsJsonToRes(msg); if (msg.error) { toast(i18n.t(msg.error), 'danger'); this.state.loading = false; this.setState(this.state); return; } else if ( res.op == UserOperation.EditPrivateMessage || res.op == UserOperation.DeletePrivateMessage || res.op == UserOperation.MarkPrivateMessageAsRead ) { let data = res.data as PrivateMessageResponse; this.state.loading = false; this.props.onEdit(data.message); } else if (res.op == UserOperation.GetUserDetails) { let data = res.data as UserDetailsResponse; this.state.recipient = data.user; this.state.privateMessageForm.recipient_id = data.user.id; this.setState(this.state); } else if (res.op == UserOperation.CreatePrivateMessage) { let data = res.data as PrivateMessageResponse; this.state.loading = false; this.props.onCreate(data.message); this.setState(this.state); } } }