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