src/shared/components/comment/comment-form.tsx

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