ui/src/components/comment-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { CommentNode as CommentNodeI, CommentForm as CommentFormI } from '../interfaces';
   3 import { capitalizeFirstLetter } from '../utils';
   4 import { WebSocketService, UserService } from '../services';
   5 import * as autosize from 'autosize';
   6 import { i18n } from '../i18next';
   7 import { T } from 'inferno-i18next';
   8
   9 interface CommentFormProps {
  10   postId?: number;
  11   node?: CommentNodeI;
  12   onReplyCancel?(): any;
  13   edit?: boolean;
  14   disabled?: boolean;
  15 }
  16
  17 interface CommentFormState {
  18   commentForm: CommentFormI;
  19   buttonTitle: string;
  20 }
  21
  22 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
  23
  24   private emptyState: CommentFormState = {
  25     commentForm: {
  26       auth: null,
  27       content: null,
  28       post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId,
  29       creator_id: UserService.Instance.user ? UserService.Instance.user.id : null,
  30     },
  31     buttonTitle: !this.props.node ? capitalizeFirstLetter(i18n.t('post')) : this.props.edit ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('reply')),
  32   }
  33
  34   constructor(props: any, context: any) {
  35     super(props, context);
  36
  37
  38     this.state = this.emptyState;
  39
  40     if (this.props.node) {
  41       if (this.props.edit) {
  42         this.state.commentForm.edit_id = this.props.node.comment.id;
  43         this.state.commentForm.parent_id = this.props.node.comment.parent_id;
  44         this.state.commentForm.content = this.props.node.comment.content;
  45         this.state.commentForm.creator_id = this.props.node.comment.creator_id;
  46       } else {
  47         // A reply gets a new parent id
  48         this.state.commentForm.parent_id = this.props.node.comment.id;
  49       }
  50     }
  51   }
  52
  53   componentDidMount() {
  54     autosize(document.querySelectorAll('textarea'));
  55   }
  56
  57   render() {
  58     return (
  59       <div class="mb-3">
  60         <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
  61           <div class="form-group row">
  62             <div class="col-sm-12">
  63               <textarea class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required disabled={this.props.disabled} rows={2} maxLength={10000} />
  64             </div>
  65           </div>
  66           <div class="row">
  67             <div class="col-sm-12">
  68               <button type="submit" class="btn btn-sm btn-secondary mr-2" disabled={this.props.disabled}>{this.state.buttonTitle}</button>
  69               {this.props.node && <button type="button" class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.handleReplyCancel)}><T i18nKey="cancel">#</T></button>}
  70             </div>
  71           </div>
  72         </form>
  73       </div>
  74     );
  75   }
  76
  77   handleCommentSubmit(i: CommentForm, event: any) {
  78     event.preventDefault();
  79     if (i.props.edit) {
  80       WebSocketService.Instance.editComment(i.state.commentForm);
  81     } else {
  82       WebSocketService.Instance.createComment(i.state.commentForm);
  83     }
  84
  85     i.state.commentForm.content = undefined;
  86     i.setState(i.state);
  87     event.target.reset();
  88     if (i.props.node) {
  89       i.props.onReplyCancel();
  90     }
  91
  92     autosize.update(document.querySelector('textarea'));
  93   }
  94
  95   handleCommentContentChange(i: CommentForm, event: any) {
  96     i.state.commentForm.content = event.target.value;
  97     i.setState(i.state);
  98   }
  99
 100   handleReplyCancel(i: CommentForm) {
 101     i.props.onReplyCancel();
 102   }
 103 }