1 import { Component } from "inferno";
2 import { T } from "inferno-i18next-dess";
3 import { Link } from "inferno-router";
9 } from "lemmy-js-client";
10 import { Subscription } from "rxjs";
11 import { i18n } from "../../i18next";
12 import { CommentNode as CommentNodeI } from "../../interfaces";
13 import { UserService, WebSocketService } from "../../services";
16 capitalizeFirstLetter,
22 import { Icon } from "../common/icon";
23 import { MarkdownTextArea } from "../common/markdown-textarea";
25 interface CommentFormProps {
27 node?: CommentNodeI; // Can either be the parent, or the editable comment
31 onReplyCancel?(): any;
34 interface CommentFormState {
40 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
41 private subscription: Subscription;
42 private emptyState: CommentFormState = {
43 buttonTitle: !this.props.node
44 ? capitalizeFirstLetter(i18n.t("post"))
46 ? capitalizeFirstLetter(i18n.t("save"))
47 : capitalizeFirstLetter(i18n.t("reply")),
52 constructor(props: any, context: any) {
53 super(props, context);
55 this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
56 this.handleReplyCancel = this.handleReplyCancel.bind(this);
58 this.state = this.emptyState;
60 this.parseMessage = this.parseMessage.bind(this);
61 this.subscription = wsSubscribe(this.parseMessage);
64 componentWillUnmount() {
65 this.subscription.unsubscribe();
71 {UserService.Instance.myUserInfo ? (
75 ? this.props.node.comment_view.comment.content
78 buttonTitle={this.state.buttonTitle}
79 finished={this.state.finished}
80 replyType={!!this.props.node}
81 focus={this.props.focus}
82 disabled={this.props.disabled}
83 onSubmit={this.handleCommentSubmit}
84 onReplyCancel={this.handleReplyCancel}
85 placeholder={i18n.t("comment_here")}
88 <div class="alert alert-light" role="alert">
89 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
90 <T i18nKey="must_login" class="d-inline">
92 <Link className="alert-link" to="/login">
102 handleCommentSubmit(msg: { val: string; formId: string }) {
103 let content = msg.val;
104 this.state.formId = msg.formId;
106 let node = this.props.node;
108 if (this.props.edit) {
109 let form: EditComment = {
111 form_id: this.state.formId,
112 comment_id: node.comment_view.comment.id,
115 WebSocketService.Instance.send(wsClient.editComment(form));
117 let form: CreateComment = {
119 form_id: this.state.formId,
120 post_id: node ? node.comment_view.post.id : this.props.postId,
121 parent_id: node ? node.comment_view.comment.id : null,
124 WebSocketService.Instance.send(wsClient.createComment(form));
126 this.setState(this.state);
129 handleReplyCancel() {
130 this.props.onReplyCancel();
133 parseMessage(msg: any) {
134 let op = wsUserOp(msg);
137 // Only do the showing and hiding if logged in
138 if (UserService.Instance.myUserInfo) {
140 op == UserOperation.CreateComment ||
141 op == UserOperation.EditComment
143 let data = wsJsonToRes<CommentResponse>(msg).data;
145 // This only finishes this form, if the randomly generated form_id matches the one received
146 if (this.state.formId == data.form_id) {
147 this.setState({ finished: true });
149 // Necessary because it broke tribute for some reason
150 this.setState({ finished: false });