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

   1 import { myAuthRequired } from "@utils/app";
   2 import { capitalizeFirstLetter } from "@utils/helpers";
   3 import { Component } from "inferno";
   4 import { T } from "inferno-i18next-dess";
   5 import { Link } from "inferno-router";
   6 import { CreateComment, EditComment, Language } from "lemmy-js-client";
   7 import { CommentNodeI } from "../../interfaces";
   8 import { I18NextService, UserService } from "../../services";
   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
  45         className={["comment-form", "mb-3", this.props.containerClass].join(
  46           " ",
  47         )}
  48       >
  49         {UserService.Instance.myUserInfo ? (
  50           <MarkdownTextArea
  51             initialContent={initialContent}
  52             showLanguage
  53             buttonTitle={this.buttonTitle}
  54             finished={this.props.finished}
  55             replyType={typeof this.props.node !== "number"}
  56             focus={this.props.focus}
  57             disabled={this.props.disabled}
  58             onSubmit={this.handleCommentSubmit}
  59             onReplyCancel={this.props.onReplyCancel}
  60             placeholder={I18NextService.i18n.t("comment_here") ?? undefined}
  61             allLanguages={this.props.allLanguages}
  62             siteLanguages={this.props.siteLanguages}
  63           />
  64         ) : (
  65           <div className="alert alert-warning" role="alert">
  66             <Icon icon="alert-triangle" classes="icon-inline me-2" />
  67             <T i18nKey="must_login" class="d-inline">
  68               #
  69               <Link className="alert-link" to="/login">
  70                 #
  71               </Link>
  72             </T>
  73           </div>
  74         )}
  75       </div>
  76     );
  77   }
  78
  79   get buttonTitle(): string {
  80     return typeof this.props.node === "number"
  81       ? capitalizeFirstLetter(I18NextService.i18n.t("post"))
  82       : this.props.edit
  83       ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
  84       : capitalizeFirstLetter(I18NextService.i18n.t("reply"));
  85   }
  86
  87   handleCommentSubmit(content: string, form_id: string, language_id?: number) {
  88     const { node, onUpsertComment, edit } = this.props;
  89     if (typeof node === "number") {
  90       const post_id = node;
  91       onUpsertComment({
  92         content,
  93         post_id,
  94         language_id,
  95         form_id,
  96         auth: myAuthRequired(),
  97       });
  98     } else {
  99       if (edit) {
 100         const comment_id = node.comment_view.comment.id;
 101         onUpsertComment({
 102           content,
 103           comment_id,
 104           form_id,
 105           language_id,
 106           auth: myAuthRequired(),
 107         });
 108       } else {
 109         const post_id = node.comment_view.post.id;
 110         const parent_id = node.comment_view.comment.id;
 111         this.props.onUpsertComment({
 112           content,
 113           parent_id,
 114           post_id,
 115           form_id,
 116           language_id,
 117           auth: myAuthRequired(),
 118         });
 119       }
 120     }
 121   }
 122 }