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

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