diff options
Diffstat (limited to 'ui/src/components/comment-form.tsx')
| -rw-r--r-- | ui/src/components/comment-form.tsx | 100 |
1 files changed, 84 insertions, 16 deletions
diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index eaa054d8..ae3e7cfc 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -1,7 +1,13 @@ import { Component, linkEvent } from 'inferno'; +import { Subscription } from 'rxjs'; +import { retryWhen, delay, take } from 'rxjs/operators'; +import { Prompt } from 'inferno-router'; import { CommentNode as CommentNodeI, CommentForm as CommentFormI, + WebSocketJsonResponse, + UserOperation, + CommentResponse, } from '../interfaces'; import { capitalizeFirstLetter, @@ -10,6 +16,7 @@ import { markdownHelpUrl, toast, setupTribute, + wsJsonToRes, } from '../utils'; import { WebSocketService, UserService } from '../services'; import autosize from 'autosize'; @@ -28,12 +35,15 @@ interface CommentFormState { commentForm: CommentFormI; buttonTitle: string; previewMode: boolean; + loading: boolean; imageLoading: boolean; } export class CommentForm extends Component<CommentFormProps, CommentFormState> { - private id = `comment-form-${randomStr()}`; + private id = `comment-textarea-${randomStr()}`; + private formId = `comment-form-${randomStr()}`; private tribute: Tribute; + private subscription: Subscription; private emptyState: CommentFormState = { commentForm: { auth: null, @@ -51,6 +61,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('reply')), previewMode: false, + loading: false, imageLoading: false, }; @@ -71,6 +82,14 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { this.state.commentForm.parent_id = this.props.node.comment.id; } } + + 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() { @@ -84,10 +103,21 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { }); } + componentWillUnmount() { + this.subscription.unsubscribe(); + } + render() { return ( <div class="mb-3"> - <form onSubmit={linkEvent(this, this.handleCommentSubmit)}> + <Prompt + when={this.state.commentForm.content} + message={i18n.t('block_leaving')} + /> + <form + id={this.formId} + onSubmit={linkEvent(this, this.handleCommentSubmit)} + > <div class="form-group row"> <div className={`col-sm-12`}> <textarea @@ -118,7 +148,13 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { class="btn btn-sm btn-secondary mr-2" disabled={this.props.disabled} > - {this.state.buttonTitle} + {this.state.loading ? ( + <svg class="icon icon-spinner spin"> + <use xlinkHref="#icon-spinner"></use> + </svg> + ) : ( + <span>{this.state.buttonTitle}</span> + )} </button> {this.state.commentForm.content && ( <button @@ -141,16 +177,22 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { <a href={markdownHelpUrl} target="_blank" - class="d-inline-block float-right text-muted small font-weight-bold" + class="d-inline-block float-right text-muted font-weight-bold" + title={i18n.t('formatting_help')} > - {i18n.t('formatting_help')} + <svg class="icon icon-inline"> + <use xlinkHref="#icon-help-circle"></use> + </svg> </a> - <form class="d-inline-block mr-2 float-right text-muted small font-weight-bold"> + <form class="d-inline-block mr-3 float-right text-muted font-weight-bold"> <label htmlFor={`file-upload-${this.id}`} className={`${UserService.Instance.user && 'pointer'}`} + data-tippy-content={i18n.t('upload_image')} > - {i18n.t('upload_image')} + <svg class="icon icon-inline"> + <use xlinkHref="#icon-image"></use> + </svg> </label> <input id={`file-upload-${this.id}`} @@ -174,6 +216,20 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { ); } + handleFinished() { + this.state.previewMode = false; + this.state.loading = false; + this.state.commentForm.content = ''; + this.setState(this.state); + let form: any = document.getElementById(this.formId); + form.reset(); + if (this.props.node) { + this.props.onReplyCancel(); + } + autosize.update(document.querySelector('textarea')); + this.setState(this.state); + } + handleCommentSubmit(i: CommentForm, event: any) { event.preventDefault(); if (i.props.edit) { @@ -182,15 +238,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { WebSocketService.Instance.createComment(i.state.commentForm); } - i.state.previewMode = false; - i.state.commentForm.content = undefined; - event.target.reset(); + i.state.loading = true; i.setState(i.state); - if (i.props.node) { - i.props.onReplyCancel(); - } - - autosize.update(document.querySelector('textarea')); } handleCommentContentChange(i: CommentForm, event: any) { @@ -245,7 +294,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { i.state.commentForm.content = content; i.state.imageLoading = false; i.setState(i.state); - var textarea: any = document.getElementById(i.id); + let textarea: any = document.getElementById(i.id); autosize.update(textarea); }) .catch(error => { @@ -254,4 +303,23 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { toast(error, 'danger'); }); } + + parseMessage(msg: WebSocketJsonResponse) { + let res = wsJsonToRes(msg); + + // Only do the showing and hiding if logged in + if (UserService.Instance.user) { + if (res.op == UserOperation.CreateComment) { + let data = res.data as CommentResponse; + if (data.comment.creator_id == UserService.Instance.user.id) { + this.handleFinished(); + } + } else if (res.op == UserOperation.EditComment) { + let data = res.data as CommentResponse; + if (data.comment.creator_id == UserService.Instance.user.id) { + this.handleFinished(); + } + } + } + } } |