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