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   containerClass?: string;
  25   onUpsertComment(form: EditComment | CreateComment): void;
  26 }
  27
  28 export class CommentForm extends Component<CommentFormProps, any> {
  29   constructor(props: any, context: any) {
  30     super(props, context);
  31
  32     this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
  33   }
  34
  35   render() {
  36     const initialContent =
  37       typeof this.props.node !== "number"
  38         ? this.props.edit
  39           ? this.props.node.comment_view.comment.content
  40           : undefined
  41         : undefined;
  42
  43     return (
  44       <div className={["mb-3", this.props.containerClass].join(" ")}>
  45         {UserService.Instance.myUserInfo ? (
  46           <MarkdownTextArea
  47             initialContent={initialContent}
  48             showLanguage
  49             buttonTitle={this.buttonTitle}
  50             finished={this.props.finished}
  51             replyType={typeof this.props.node !== "number"}
  52             focus={this.props.focus}
  53             disabled={this.props.disabled}
  54             onSubmit={this.handleCommentSubmit}
  55             onReplyCancel={this.props.onReplyCancel}
  56             placeholder={i18n.t("comment_here")}
  57             allLanguages={this.props.allLanguages}
  58             siteLanguages={this.props.siteLanguages}
  59           />
  60         ) : (
  61           <div className="alert alert-warning" role="alert">
  62             <Icon icon="alert-triangle" classes="icon-inline me-2" />
  63             <T i18nKey="must_login" class="d-inline">
  64               #
  65               <Link className="alert-link" to="/login">
  66                 #
  67               </Link>
  68             </T>
  69           </div>
  70         )}
  71       </div>
  72     );
  73   }
  74
  75   get buttonTitle(): string {
  76     return typeof this.props.node === "number"
  77       ? capitalizeFirstLetter(i18n.t("post"))
  78       : this.props.edit
  79       ? capitalizeFirstLetter(i18n.t("save"))
  80       : capitalizeFirstLetter(i18n.t("reply"));
  81   }
  82
  83   handleCommentSubmit(content: string, form_id: string, language_id?: number) {
  84     const { node, onUpsertComment, edit } = this.props;
  85     if (typeof node === "number") {
  86       const post_id = node;
  87       onUpsertComment({
  88         content,
  89         post_id,
  90         language_id,
  91         form_id,
  92         auth: myAuthRequired(),
  93       });
  94     } else {
  95       if (edit) {
  96         const comment_id = node.comment_view.comment.id;
  97         onUpsertComment({
  98           content,
  99           comment_id,
 100           form_id,
 101           language_id,
 102           auth: myAuthRequired(),
 103         });
 104       } else {
 105         const post_id = node.comment_view.post.id;
 106         const parent_id = node.comment_view.comment.id;
 107         this.props.onUpsertComment({
 108           content,
 109           parent_id,
 110           post_id,
 111           form_id,
 112           language_id,
 113           auth: myAuthRequired(),
 114         });
 115       }
 116     }
 117   }
 118 }