1 import { Either, None, Option, Some } from "@sniptt/monads";
2 import { Component } from "inferno";
3 import { T } from "inferno-i18next-dess";
4 import { Link } from "inferno-router";
6 CommentNode as CommentNodeI,
14 } from "lemmy-js-client";
15 import { Subscription } from "rxjs";
16 import { i18n } from "../../i18next";
17 import { UserService, WebSocketService } from "../../services";
20 capitalizeFirstLetter,
21 myFirstDiscussionLanguageId,
25 import { Icon } from "../common/icon";
26 import { MarkdownTextArea } from "../common/markdown-textarea";
28 interface CommentFormProps {
30 * Can either be the parent, or the editable comment. The right side is a postId.
32 node: Either<CommentNodeI, number>;
36 onReplyCancel?(): any;
37 allLanguages: Language[];
40 interface CommentFormState {
43 formId: Option<string>;
46 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
47 private subscription: Subscription;
48 private emptyState: CommentFormState = {
49 buttonTitle: this.props.node.isRight()
50 ? capitalizeFirstLetter(i18n.t("post"))
52 ? capitalizeFirstLetter(i18n.t("save"))
53 : capitalizeFirstLetter(i18n.t("reply")),
58 constructor(props: any, context: any) {
59 super(props, context);
61 this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
62 this.handleReplyCancel = this.handleReplyCancel.bind(this);
64 this.state = this.emptyState;
66 this.parseMessage = this.parseMessage.bind(this);
67 this.subscription = wsSubscribe(this.parseMessage);
70 componentWillUnmount() {
71 this.subscription.unsubscribe();
75 let initialContent = this.props.node.match({
77 this.props.edit ? Some(node.comment_view.comment.content) : None,
81 let selectedLang = this.props.node
83 .map(n => n.comment_view.comment.language_id)
84 .or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo));
87 <div className="mb-3">
88 {UserService.Instance.myUserInfo.isSome() ? (
90 initialContent={initialContent}
91 initialLanguageId={selectedLang}
93 buttonTitle={Some(this.state.buttonTitle)}
95 finished={this.state.finished}
96 replyType={this.props.node.isLeft()}
97 focus={this.props.focus}
98 disabled={this.props.disabled}
99 onSubmit={this.handleCommentSubmit}
100 onReplyCancel={this.handleReplyCancel}
101 placeholder={Some(i18n.t("comment_here"))}
102 allLanguages={this.props.allLanguages}
105 <div className="alert alert-warning" role="alert">
106 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
107 <T i18nKey="must_login" class="d-inline">
109 <Link className="alert-link" to="/login">
119 handleCommentSubmit(msg: {
122 languageId: Option<number>;
124 let content = msg.val;
125 let language_id = msg.languageId;
126 this.setState({ formId: Some(msg.formId) });
128 this.props.node.match({
130 if (this.props.edit) {
131 let form = new EditComment({
134 form_id: this.state.formId,
135 comment_id: node.comment_view.comment.id,
137 auth: auth().unwrap(),
139 WebSocketService.Instance.send(wsClient.editComment(form));
141 let form = new CreateComment({
142 content: content.unwrap(),
143 form_id: this.state.formId,
144 post_id: node.comment_view.post.id,
145 parent_id: Some(node.comment_view.comment.id),
147 auth: auth().unwrap(),
149 WebSocketService.Instance.send(wsClient.createComment(form));
153 let form = new CreateComment({
154 content: content.unwrap(),
155 form_id: this.state.formId,
159 auth: auth().unwrap(),
161 WebSocketService.Instance.send(wsClient.createComment(form));
164 this.setState(this.state);
167 handleReplyCancel() {
168 this.props.onReplyCancel();
171 parseMessage(msg: any) {
172 let op = wsUserOp(msg);
175 // Only do the showing and hiding if logged in
176 if (UserService.Instance.myUserInfo.isSome()) {
178 op == UserOperation.CreateComment ||
179 op == UserOperation.EditComment
181 let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
183 // This only finishes this form, if the randomly generated form_id matches the one received
184 if (this.state.formId.unwrapOr("") == data.form_id.unwrapOr("")) {
185 this.setState({ finished: true });
187 // Necessary because it broke tribute for some reason
188 this.setState({ finished: false });