ui/src/components/comment-form.tsx

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