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

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