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';
24 interface CommentFormProps {
26 node?: CommentNodeI; // Can either be the parent, or the editable comment
30 onReplyCancel?(): any;
33 interface CommentFormState {
39 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
40 private subscription: Subscription;
41 private emptyState: CommentFormState = {
42 buttonTitle: !this.props.node
43 ? capitalizeFirstLetter(i18n.t('post'))
45 ? capitalizeFirstLetter(i18n.t('save'))
46 : capitalizeFirstLetter(i18n.t('reply')),
51 constructor(props: any, context: any) {
52 super(props, context);
54 this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
55 this.handleReplyCancel = this.handleReplyCancel.bind(this);
57 this.state = this.emptyState;
59 this.parseMessage = this.parseMessage.bind(this);
60 this.subscription = wsSubscribe(this.parseMessage);
63 componentWillUnmount() {
64 this.subscription.unsubscribe();
70 {UserService.Instance.user ? (
74 ? this.props.node.comment_view.comment.content
77 buttonTitle={this.state.buttonTitle}
78 finished={this.state.finished}
79 replyType={!!this.props.node}
80 focus={this.props.focus}
81 disabled={this.props.disabled}
82 onSubmit={this.handleCommentSubmit}
83 onReplyCancel={this.handleReplyCancel}
86 <div class="alert alert-light" role="alert">
87 <svg class="icon icon-inline mr-2">
88 <use xlinkHref="#icon-alert-triangle"></use>
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);
136 // Only do the showing and hiding if logged in
137 if (UserService.Instance.user) {
139 op == UserOperation.CreateComment ||
140 op == UserOperation.EditComment
142 let data = wsJsonToRes<CommentResponse>(msg).data;
144 // This only finishes this form, if the randomly generated form_id matches the one received
145 if (this.state.formId == data.form_id) {
146 this.setState({ finished: true });
148 // Necessary because it broke tribute for some reason
149 this.setState({ finished: false });