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";
13 interface CommentFormProps {
15 * Can either be the parent, or the editable comment. The right side is a postId.
17 node: CommentNodeI | number;
22 onReplyCancel?(): void;
23 allLanguages: Language[];
24 siteLanguages: number[];
25 containerClass?: string;
26 onUpsertComment(form: EditComment | CreateComment): void;
29 export class CommentForm extends Component<CommentFormProps, any> {
30 constructor(props: any, context: any) {
31 super(props, context);
33 this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
37 const initialContent =
38 typeof this.props.node !== "number"
40 ? this.props.node.comment_view.comment.content
44 const userInterfaceLangId = !UserService.Instance.myUserInfo
46 : getUserInterfaceLangId({
47 myUserInfo: UserService.Instance.myUserInfo,
48 allLanguages: this.props.allLanguages,
53 className={["comment-form", "mb-3", this.props.containerClass].join(
57 {UserService.Instance.myUserInfo ? (
59 initialContent={initialContent}
60 initialLanguageId={userInterfaceLangId}
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}
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">
78 <Link className="alert-link" to="/login">
88 get buttonTitle(): string {
89 return typeof this.props.node === "number"
90 ? capitalizeFirstLetter(I18NextService.i18n.t("post"))
92 ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
93 : capitalizeFirstLetter(I18NextService.i18n.t("reply"));
96 handleCommentSubmit(content: string, form_id: string, language_id?: number) {
97 const { node, onUpsertComment, edit } = this.props;
98 if (typeof node === "number") {
105 auth: myAuthRequired(),
109 const comment_id = node.comment_view.comment.id;
115 auth: myAuthRequired(),
118 const post_id = node.comment_view.post.id;
119 const parent_id = node.comment_view.comment.id;
120 this.props.onUpsertComment({
126 auth: myAuthRequired(),