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[];
38 siteLanguages: number[];
41 interface CommentFormState {
44 formId: Option<string>;
47 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
48 private subscription: Subscription;
49 private emptyState: CommentFormState = {
50 buttonTitle: this.props.node.isRight()
51 ? capitalizeFirstLetter(i18n.t("post"))
53 ? capitalizeFirstLetter(i18n.t("save"))
54 : capitalizeFirstLetter(i18n.t("reply")),
59 constructor(props: any, context: any) {
60 super(props, context);
62 this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
63 this.handleReplyCancel = this.handleReplyCancel.bind(this);
65 this.state = this.emptyState;
67 this.parseMessage = this.parseMessage.bind(this);
68 this.subscription = wsSubscribe(this.parseMessage);
71 componentWillUnmount() {
72 this.subscription.unsubscribe();
76 let initialContent = this.props.node.match({
78 this.props.edit ? Some(node.comment_view.comment.content) : None,
82 let selectedLang = this.props.node
84 .map(n => n.comment_view.comment.language_id)
86 myFirstDiscussionLanguageId(
87 this.props.allLanguages,
88 this.props.siteLanguages,
89 UserService.Instance.myUserInfo
94 <div className="mb-3">
95 {UserService.Instance.myUserInfo.isSome() ? (
97 initialContent={initialContent}
98 initialLanguageId={selectedLang}
100 buttonTitle={Some(this.state.buttonTitle)}
102 finished={this.state.finished}
103 replyType={this.props.node.isLeft()}
104 focus={this.props.focus}
105 disabled={this.props.disabled}
106 onSubmit={this.handleCommentSubmit}
107 onReplyCancel={this.handleReplyCancel}
108 placeholder={Some(i18n.t("comment_here"))}
109 allLanguages={this.props.allLanguages}
110 siteLanguages={this.props.siteLanguages}
113 <div className="alert alert-warning" role="alert">
114 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
115 <T i18nKey="must_login" class="d-inline">
117 <Link className="alert-link" to="/login">
127 handleCommentSubmit(msg: {
130 languageId: Option<number>;
132 let content = msg.val;
133 let language_id = msg.languageId;
134 this.setState({ formId: Some(msg.formId) });
136 this.props.node.match({
138 if (this.props.edit) {
139 let form = new EditComment({
142 form_id: this.state.formId,
143 comment_id: node.comment_view.comment.id,
145 auth: auth().unwrap(),
147 WebSocketService.Instance.send(wsClient.editComment(form));
149 let form = new CreateComment({
150 content: content.unwrap(),
151 form_id: this.state.formId,
152 post_id: node.comment_view.post.id,
153 parent_id: Some(node.comment_view.comment.id),
155 auth: auth().unwrap(),
157 WebSocketService.Instance.send(wsClient.createComment(form));
161 let form = new CreateComment({
162 content: content.unwrap(),
163 form_id: this.state.formId,
167 auth: auth().unwrap(),
169 WebSocketService.Instance.send(wsClient.createComment(form));
172 this.setState(this.state);
175 handleReplyCancel() {
176 this.props.onReplyCancel();
179 parseMessage(msg: any) {
180 let op = wsUserOp(msg);
183 // Only do the showing and hiding if logged in
184 if (UserService.Instance.myUserInfo.isSome()) {
186 op == UserOperation.CreateComment ||
187 op == UserOperation.EditComment
189 let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
191 // This only finishes this form, if the randomly generated form_id matches the one received
192 if (this.state.formId.unwrapOr("") == data.form_id.unwrapOr("")) {
193 this.setState({ finished: true });
195 // Necessary because it broke tribute for some reason
196 this.setState({ finished: false });