1 import { Component } from "inferno";
2 import { Link } from "inferno-router";
3 import { Subscription } from "rxjs";
9 } from "lemmy-js-client";
10 import { CommentNode as CommentNodeI } from "../interfaces";
13 capitalizeFirstLetter,
19 import { WebSocketService, UserService } from "../services";
20 import { i18n } from "../i18next";
21 import { T } from "inferno-i18next";
22 import { MarkdownTextArea } from "./markdown-textarea";
23 import { Icon } from "./icon";
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.user ? (
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}
87 <div class="alert alert-light" role="alert">
88 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
89 <T i18nKey="must_login" class="d-inline">
91 <Link className="alert-link" to="/login">
101 handleCommentSubmit(msg: { val: string; formId: string }) {
102 let content = msg.val;
103 this.state.formId = msg.formId;
105 let node = this.props.node;
107 if (this.props.edit) {
108 let form: EditComment = {
110 form_id: this.state.formId,
111 comment_id: node.comment_view.comment.id,
114 WebSocketService.Instance.send(wsClient.editComment(form));
116 let form: CreateComment = {
118 form_id: this.state.formId,
119 post_id: node ? node.comment_view.post.id : this.props.postId,
120 parent_id: node ? node.comment_view.comment.id : null,
123 WebSocketService.Instance.send(wsClient.createComment(form));
125 this.setState(this.state);
128 handleReplyCancel() {
129 this.props.onReplyCancel();
132 parseMessage(msg: any) {
133 let op = wsUserOp(msg);
135 // Only do the showing and hiding if logged in
136 if (UserService.Instance.user) {
138 op == UserOperation.CreateComment ||
139 op == UserOperation.EditComment
141 let data = wsJsonToRes<CommentResponse>(msg).data;
143 // This only finishes this form, if the randomly generated form_id matches the one received
144 if (this.state.formId == data.form_id) {
145 this.setState({ finished: true });
147 // Necessary because it broke tribute for some reason
148 this.setState({ finished: false });