import { Component } from "inferno"; import { T } from "inferno-i18next-dess"; import { Link } from "inferno-router"; import { CommentResponse, CreateComment, EditComment, Language, UserOperation, wsJsonToRes, wsUserOp, } from "lemmy-js-client"; import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; import { CommentNodeI } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { capitalizeFirstLetter, myAuth, wsClient, wsSubscribe, } from "../../utils"; import { Icon } from "../common/icon"; import { MarkdownTextArea } from "../common/markdown-textarea"; interface CommentFormProps { /** * Can either be the parent, or the editable comment. The right side is a postId. */ node: CommentNodeI | number; edit?: boolean; disabled?: boolean; focus?: boolean; onReplyCancel?(): any; allLanguages: Language[]; siteLanguages: number[]; } interface CommentFormState { buttonTitle: string; finished: boolean; formId?: string; } export class CommentForm extends Component { private subscription?: Subscription; state: CommentFormState = { buttonTitle: typeof this.props.node === "number" ? capitalizeFirstLetter(i18n.t("post")) : this.props.edit ? capitalizeFirstLetter(i18n.t("save")) : capitalizeFirstLetter(i18n.t("reply")), finished: false, }; constructor(props: any, context: any) { super(props, context); this.handleCommentSubmit = this.handleCommentSubmit.bind(this); this.handleReplyCancel = this.handleReplyCancel.bind(this); this.parseMessage = this.parseMessage.bind(this); this.subscription = wsSubscribe(this.parseMessage); } componentWillUnmount() { this.subscription?.unsubscribe(); } render() { const initialContent = typeof this.props.node !== "number" ? this.props.edit ? this.props.node.comment_view.comment.content : undefined : undefined; return (
{UserService.Instance.myUserInfo ? ( ) : (
# #
)}
); } handleCommentSubmit(msg: { val: string; formId: string; languageId?: number; }) { const content = msg.val; const language_id = msg.languageId; const node = this.props.node; this.setState({ formId: msg.formId }); const auth = myAuth(); if (auth) { if (typeof node === "number") { const postId = node; const form: CreateComment = { content, form_id: this.state.formId, post_id: postId, language_id, auth, }; WebSocketService.Instance.send(wsClient.createComment(form)); } else { if (this.props.edit) { const form: EditComment = { content, form_id: this.state.formId, comment_id: node.comment_view.comment.id, language_id, auth, }; WebSocketService.Instance.send(wsClient.editComment(form)); } else { const form: CreateComment = { content, form_id: this.state.formId, post_id: node.comment_view.post.id, parent_id: node.comment_view.comment.id, language_id, auth, }; WebSocketService.Instance.send(wsClient.createComment(form)); } } } } handleReplyCancel() { this.props.onReplyCancel?.(); } parseMessage(msg: any) { const op = wsUserOp(msg); console.log(msg); // Only do the showing and hiding if logged in if (UserService.Instance.myUserInfo) { if ( op == UserOperation.CreateComment || op == UserOperation.EditComment ) { const data = wsJsonToRes(msg); // This only finishes this form, if the randomly generated form_id matches the one received if (this.state.formId && this.state.formId == data.form_id) { this.setState({ finished: true }); // Necessary because it broke tribute for some reason this.setState({ finished: false }); } } } } }