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 { CreateComment, EditComment, Language } from "lemmy-js-client";
   5 import { i18n } from "../../i18next";
   6 import { CommentNodeI } from "../../interfaces";
   7 import { UserService } from "../../services";
   8 import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
   9 import { Icon } from "../common/icon";
  10 import { MarkdownTextArea } from "../common/markdown-textarea";
  11
  12 interface CommentFormProps {
  13   /**
  14    * Can either be the parent, or the editable comment. The right side is a postId.
  15    */
  16   node: CommentNodeI | number;
  17   finished?: boolean;
  18   edit?: boolean;
  19   disabled?: boolean;
  20   focus?: boolean;
  21   onReplyCancel?(): void;
  22   allLanguages: Language[];
  23   siteLanguages: number[];
  24   onUpsertComment(form: EditComment | CreateComment): void;
  25 }
  26
  27 export class CommentForm extends Component<CommentFormProps, any> {
  28   constructor(props: any, context: any) {
  29     super(props, context);
  30
  31     this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
  32   }
  33
  34   render() {
  35     const initialContent =
  36       typeof this.props.node !== "number"
  37         ? this.props.edit
  38           ? this.props.node.comment_view.comment.content
  39           : undefined
  40         : undefined;
  41
  42     return (
  43       <div className="mb-3">
  44         {UserService.Instance.myUserInfo ? (
  45           <MarkdownTextArea
  46             initialContent={initialContent}
  47             showLanguage
  48             buttonTitle={this.buttonTitle}
  49             finished={this.props.finished}
  50             replyType={typeof this.props.node !== "number"}
  51             focus={this.props.focus}
  52             disabled={this.props.disabled}
  53             onSubmit={this.handleCommentSubmit}
  54             onReplyCancel={this.props.onReplyCancel}
  55             placeholder={i18n.t("comment_here")}
  56             allLanguages={this.props.allLanguages}
  57             siteLanguages={this.props.siteLanguages}
  58           />
  59         ) : (
  60           <div className="alert alert-warning" role="alert">
  61             <Icon icon="alert-triangle" classes="icon-inline mr-2" />
  62             <T i18nKey="must_login" class="d-inline">
  63               #
  64               <Link className="alert-link" to="/login">
  65                 #
  66               </Link>
  67             </T>
  68           </div>
  69         )}
  70       </div>
  71     );
  72   }
  73
  74   get buttonTitle(): string {
  75     return typeof this.props.node === "number"
  76       ? capitalizeFirstLetter(i18n.t("post"))
  77       : this.props.edit
  78       ? capitalizeFirstLetter(i18n.t("save"))
  79       : capitalizeFirstLetter(i18n.t("reply"));
  80   }
  81
  82   handleCommentSubmit(content: string, form_id: string, language_id?: number) {
  83     const { node, onUpsertComment, edit } = this.props;
  84     if (typeof node === "number") {
  85       const post_id = node;
  86       onUpsertComment({
  87         content,
  88         post_id,
  89         language_id,
  90         form_id,
  91         auth: myAuthRequired(),
  92       });
  93     } else {
  94       if (edit) {
  95         const comment_id = node.comment_view.comment.id;
  96         onUpsertComment({
  97           content,
  98           comment_id,
  99           form_id,
 100           language_id,
 101           auth: myAuthRequired(),
 102         });
 103       } else {
 104         const post_id = node.comment_view.post.id;
 105         const parent_id = node.comment_view.comment.id;
 106         this.props.onUpsertComment({
 107           content,
 108           parent_id,
 109           post_id,
 110           form_id,
 111           language_id,
 112           auth: myAuthRequired(),
 113         });
 114       }
 115     }
 116   }
 117 }