1 import { Component, linkEvent } from 'inferno';
2 import { Subscription } from 'rxjs';
3 import { retryWhen, delay, take } from 'rxjs/operators';
4 import { Prompt } from 'inferno-router';
6 CommentNode as CommentNodeI,
7 CommentForm as CommentFormI,
11 } from '../interfaces';
13 capitalizeFirstLetter,
21 import { WebSocketService, UserService } from '../services';
22 import autosize from 'autosize';
23 import Tribute from 'tributejs/src/Tribute.js';
24 import { i18n } from '../i18next';
26 interface CommentFormProps {
29 onReplyCancel?(): any;
34 interface CommentFormState {
35 commentForm: CommentFormI;
39 imageLoading: boolean;
42 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
43 private id = `comment-textarea-${randomStr()}`;
44 private formId = `comment-form-${randomStr()}`;
45 private tribute: Tribute;
46 private subscription: Subscription;
47 private emptyState: CommentFormState = {
51 post_id: this.props.node
52 ? this.props.node.comment.post_id
54 creator_id: UserService.Instance.user
55 ? UserService.Instance.user.id
58 buttonTitle: !this.props.node
59 ? capitalizeFirstLetter(i18n.t('post'))
61 ? capitalizeFirstLetter(i18n.t('edit'))
62 : capitalizeFirstLetter(i18n.t('reply')),
68 constructor(props: any, context: any) {
69 super(props, context);
71 this.tribute = setupTribute();
72 this.state = this.emptyState;
74 if (this.props.node) {
75 if (this.props.edit) {
76 this.state.commentForm.edit_id = this.props.node.comment.id;
77 this.state.commentForm.parent_id = this.props.node.comment.parent_id;
78 this.state.commentForm.content = this.props.node.comment.content;
79 this.state.commentForm.creator_id = this.props.node.comment.creator_id;
81 // A reply gets a new parent id
82 this.state.commentForm.parent_id = this.props.node.comment.id;
86 this.subscription = WebSocketService.Instance.subject
87 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
89 msg => this.parseMessage(msg),
90 err => console.error(err),
91 () => console.log('complete')
96 var textarea: any = document.getElementById(this.id);
98 this.tribute.attach(textarea);
99 textarea.addEventListener('tribute-replaced', () => {
100 this.state.commentForm.content = textarea.value;
101 this.setState(this.state);
102 autosize.update(textarea);
106 componentWillUnmount() {
107 this.subscription.unsubscribe();
114 when={this.state.commentForm.content}
115 message={i18n.t('block_leaving')}
119 onSubmit={linkEvent(this, this.handleCommentSubmit)}
121 <div class="form-group row">
122 <div className={`col-sm-12`}>
125 className={`form-control ${this.state.previewMode && 'd-none'}`}
126 value={this.state.commentForm.content}
127 onInput={linkEvent(this, this.handleCommentContentChange)}
128 onPaste={linkEvent(this, this.handleImageUploadPaste)}
130 disabled={this.props.disabled}
134 {this.state.previewMode && (
137 dangerouslySetInnerHTML={mdToHtml(
138 this.state.commentForm.content
145 <div class="col-sm-12">
148 class="btn btn-sm btn-secondary mr-2"
149 disabled={this.props.disabled}
151 {this.state.loading ? (
152 <svg class="icon icon-spinner spin">
153 <use xlinkHref="#icon-spinner"></use>
156 <span>{this.state.buttonTitle}</span>
159 {this.state.commentForm.content && (
161 className={`btn btn-sm mr-2 btn-secondary ${this.state
162 .previewMode && 'active'}`}
163 onClick={linkEvent(this, this.handlePreviewToggle)}
168 {this.props.node && (
171 class="btn btn-sm btn-secondary mr-2"
172 onClick={linkEvent(this, this.handleReplyCancel)}
178 href={markdownHelpUrl}
180 class="d-inline-block float-right text-muted font-weight-bold"
181 title={i18n.t('formatting_help')}
183 <svg class="icon icon-inline">
184 <use xlinkHref="#icon-help-circle"></use>
187 <form class="d-inline-block mr-3 float-right text-muted font-weight-bold">
189 htmlFor={`file-upload-${this.id}`}
190 className={`${UserService.Instance.user && 'pointer'}`}
191 data-tippy-content={i18n.t('upload_image')}
193 <svg class="icon icon-inline">
194 <use xlinkHref="#icon-image"></use>
198 id={`file-upload-${this.id}`}
200 accept="image/*,video/*"
203 disabled={!UserService.Instance.user}
204 onChange={linkEvent(this, this.handleImageUpload)}
207 {this.state.imageLoading && (
208 <svg class="icon icon-spinner spin">
209 <use xlinkHref="#icon-spinner"></use>
220 this.state.previewMode = false;
221 this.state.loading = false;
222 this.state.commentForm.content = '';
223 this.setState(this.state);
224 let form: any = document.getElementById(this.formId);
226 if (this.props.node) {
227 this.props.onReplyCancel();
229 autosize.update(document.querySelector('textarea'));
230 this.setState(this.state);
233 handleCommentSubmit(i: CommentForm, event: any) {
234 event.preventDefault();
236 WebSocketService.Instance.editComment(i.state.commentForm);
238 WebSocketService.Instance.createComment(i.state.commentForm);
241 i.state.loading = true;
245 handleCommentContentChange(i: CommentForm, event: any) {
246 i.state.commentForm.content = event.target.value;
250 handlePreviewToggle(i: CommentForm, event: any) {
251 event.preventDefault();
252 i.state.previewMode = !i.state.previewMode;
256 handleReplyCancel(i: CommentForm) {
257 i.props.onReplyCancel();
260 handleImageUploadPaste(i: CommentForm, event: any) {
261 let image = event.clipboardData.files[0];
263 i.handleImageUpload(i, image);
267 handleImageUpload(i: CommentForm, event: any) {
270 event.preventDefault();
271 file = event.target.files[0];
276 const imageUploadUrl = `/pictshare/api/upload.php`;
277 const formData = new FormData();
278 formData.append('file', file);
280 i.state.imageLoading = true;
283 fetch(imageUploadUrl, {
287 .then(res => res.json())
289 let url = `${window.location.origin}/pictshare/${res.url}`;
291 res.filetype == 'mp4' ? `[vid](${url}/raw)` : `![](${url})`;
292 let content = i.state.commentForm.content;
293 content = content ? `${content}\n${imageMarkdown}` : imageMarkdown;
294 i.state.commentForm.content = content;
295 i.state.imageLoading = false;
297 let textarea: any = document.getElementById(i.id);
298 autosize.update(textarea);
301 i.state.imageLoading = false;
303 toast(error, 'danger');
307 parseMessage(msg: WebSocketJsonResponse) {
308 let res = wsJsonToRes(msg);
310 // Only do the showing and hiding if logged in
311 if (UserService.Instance.user) {
312 if (res.op == UserOperation.CreateComment) {
313 let data = res.data as CommentResponse;
314 if (data.comment.creator_id == UserService.Instance.user.id) {
315 this.handleFinished();
317 } else if (res.op == UserOperation.EditComment) {
318 let data = res.data as CommentResponse;
319 if (data.comment.creator_id == UserService.Instance.user.id) {
320 this.handleFinished();