src/shared/components/comment-form.tsx

   1 import { Component } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { Subscription } from 'rxjs';
   4 import {
   5   CreateComment,
   6   EditComment,
   7   UserOperation,
   8   CommentResponse,
   9 } from 'lemmy-js-client';
  10 import { CommentNode as CommentNodeI } from '../interfaces';
  11 import {
  12   capitalizeFirstLetter,
  13   wsJsonToRes,
  14   wsSubscribe,
  15   wsUserOp,
  16 } from '../utils';
  17 import { WebSocketService, UserService } from '../services';
  18 import { i18n } from '../i18next';
  19 import { T } from 'inferno-i18next';
  20 import { MarkdownTextArea } from './markdown-textarea';
  21
  22 interface CommentFormProps {
  23   postId?: number;
  24   node?: CommentNodeI;
  25   onReplyCancel?(): any;
  26   edit?: boolean;
  27   disabled?: boolean;
  28   focus?: boolean;
  29 }
  30
  31 interface CommentFormState {
  32   buttonTitle: string;
  33   finished: boolean;
  34   formId: string;
  35 }
  36
  37 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
  38   private subscription: Subscription;
  39   private emptyState: CommentFormState = {
  40     buttonTitle: !this.props.node
  41       ? capitalizeFirstLetter(i18n.t('post'))
  42       : this.props.edit
  43       ? capitalizeFirstLetter(i18n.t('save'))
  44       : capitalizeFirstLetter(i18n.t('reply')),
  45     finished: false,
  46     formId: null,
  47   };
  48
  49   constructor(props: any, context: any) {
  50     super(props, context);
  51
  52     this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
  53     this.handleReplyCancel = this.handleReplyCancel.bind(this);
  54
  55     this.state = this.emptyState;
  56
  57     this.parseMessage = this.parseMessage.bind(this);
  58     this.subscription = wsSubscribe(this.parseMessage);
  59   }
  60
  61   componentWillUnmount() {
  62     this.subscription.unsubscribe();
  63   }
  64
  65   render() {
  66     return (
  67       <div class="mb-3">
  68         {UserService.Instance.user ? (
  69           <MarkdownTextArea
  70             initialContent={
  71               this.props.node
  72                 ? this.props.node.comment_view.comment.content
  73                 : null
  74             }
  75             buttonTitle={this.state.buttonTitle}
  76             finished={this.state.finished}
  77             replyType={!!this.props.node}
  78             focus={this.props.focus}
  79             disabled={this.props.disabled}
  80             onSubmit={this.handleCommentSubmit}
  81             onReplyCancel={this.handleReplyCancel}
  82           />
  83         ) : (
  84           <div class="alert alert-light" role="alert">
  85             <svg class="icon icon-inline mr-2">
  86               <use xlinkHref="#icon-alert-triangle"></use>
  87             </svg>
  88             <T i18nKey="must_login" class="d-inline">
  89               #
  90               <Link className="alert-link" to="/login">
  91                 #
  92               </Link>
  93             </T>
  94           </div>
  95         )}
  96       </div>
  97     );
  98   }
  99
 100   handleCommentSubmit(msg: { val: string; formId: string }) {
 101     let content = msg.val;
 102     this.state.formId = msg.formId;
 103
 104     let node = this.props.node;
 105
 106     if (this.props.edit) {
 107       let form: EditComment = {
 108         content,
 109         form_id: this.state.formId,
 110         edit_id: node.comment_view.comment.id,
 111         auth: UserService.Instance.authField(),
 112       };
 113       WebSocketService.Instance.client.editComment(form);
 114     } else {
 115       let form: CreateComment = {
 116         content,
 117         form_id: this.state.formId,
 118         post_id: node ? node.comment_view.post.id : this.props.postId,
 119         parent_id: node ? node.comment_view.comment.parent_id : null,
 120         auth: UserService.Instance.authField(),
 121       };
 122       WebSocketService.Instance.client.createComment(form);
 123     }
 124     this.setState(this.state);
 125   }
 126
 127   handleReplyCancel() {
 128     this.props.onReplyCancel();
 129   }
 130
 131   parseMessage(msg: any) {
 132     let op = wsUserOp(msg);
 133
 134     // Only do the showing and hiding if logged in
 135     if (UserService.Instance.user) {
 136       if (
 137         op == UserOperation.CreateComment ||
 138         op == UserOperation.EditComment
 139       ) {
 140         let data = wsJsonToRes<CommentResponse>(msg).data;
 141
 142         // This only finishes this form, if the randomly generated form_id matches the one received
 143         if (this.state.formId == data.form_id) {
 144           this.setState({ finished: true });
 145
 146           // Necessary because it broke tribute for some reason
 147           this.setState({ finished: false });
 148         }
 149       }
 150     }
 151   }
 152 }