import { Component } from "inferno";
import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
-import {
- CommentResponse,
- CreateComment,
- EditComment,
- Language,
- UserOperation,
- wsJsonToRes,
- wsUserOp,
-} from "lemmy-js-client";
-import { Subscription } from "rxjs";
+import { CreateComment, EditComment, Language } from "lemmy-js-client";
import { i18n } from "../../i18next";
import { CommentNodeI } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
-import {
- capitalizeFirstLetter,
- myAuth,
- wsClient,
- wsSubscribe,
-} from "../../utils";
+import { UserService } from "../../services";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
import { Icon } from "../common/icon";
import { MarkdownTextArea } from "../common/markdown-textarea";
* Can either be the parent, or the editable comment. The right side is a postId.
*/
node: CommentNodeI | number;
+ finished?: boolean;
edit?: boolean;
disabled?: boolean;
focus?: boolean;
- onReplyCancel?(): any;
+ onReplyCancel?(): void;
allLanguages: Language[];
siteLanguages: number[];
+ containerClass?: string;
+ onUpsertComment(form: EditComment | CreateComment): void;
}
-interface CommentFormState {
- buttonTitle: string;
- finished: boolean;
- formId?: string;
-}
-
-export class CommentForm extends Component<CommentFormProps, CommentFormState> {
- private subscription?: Subscription;
- state: CommentFormState = {
- buttonTitle:
- typeof this.props.node === "number"
- ? capitalizeFirstLetter(i18n.t("post"))
- : this.props.edit
- ? capitalizeFirstLetter(i18n.t("save"))
- : capitalizeFirstLetter(i18n.t("reply")),
- finished: false,
- };
-
+export class CommentForm extends Component<CommentFormProps, any> {
constructor(props: any, context: any) {
super(props, context);
this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
- this.handleReplyCancel = this.handleReplyCancel.bind(this);
-
- this.parseMessage = this.parseMessage.bind(this);
- this.subscription = wsSubscribe(this.parseMessage);
- }
-
- componentWillUnmount() {
- this.subscription?.unsubscribe();
}
render() {
: undefined;
return (
- <div className="mb-3">
+ <div
+ className={["comment-form", "mb-3", this.props.containerClass].join(
+ " "
+ )}
+ >
{UserService.Instance.myUserInfo ? (
<MarkdownTextArea
initialContent={initialContent}
showLanguage
- buttonTitle={this.state.buttonTitle}
- finished={this.state.finished}
+ buttonTitle={this.buttonTitle}
+ finished={this.props.finished}
replyType={typeof this.props.node !== "number"}
focus={this.props.focus}
disabled={this.props.disabled}
onSubmit={this.handleCommentSubmit}
- onReplyCancel={this.handleReplyCancel}
+ onReplyCancel={this.props.onReplyCancel}
placeholder={i18n.t("comment_here")}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
/>
) : (
<div className="alert alert-warning" role="alert">
- <Icon icon="alert-triangle" classes="icon-inline mr-2" />
+ <Icon icon="alert-triangle" classes="icon-inline me-2" />
<T i18nKey="must_login" class="d-inline">
#
<Link className="alert-link" to="/login">
);
}
- handleCommentSubmit(msg: {
- val: string;
- formId: string;
- languageId?: number;
- }) {
- const content = msg.val;
- const language_id = msg.languageId;
- const node = this.props.node;
-
- this.setState({ formId: msg.formId });
+ get buttonTitle(): string {
+ return typeof this.props.node === "number"
+ ? capitalizeFirstLetter(i18n.t("post"))
+ : this.props.edit
+ ? capitalizeFirstLetter(i18n.t("save"))
+ : capitalizeFirstLetter(i18n.t("reply"));
+ }
- const auth = myAuth();
- if (auth) {
- if (typeof node === "number") {
- const postId = node;
- const form: CreateComment = {
+ handleCommentSubmit(content: string, form_id: string, language_id?: number) {
+ const { node, onUpsertComment, edit } = this.props;
+ if (typeof node === "number") {
+ const post_id = node;
+ onUpsertComment({
+ content,
+ post_id,
+ language_id,
+ form_id,
+ auth: myAuthRequired(),
+ });
+ } else {
+ if (edit) {
+ const comment_id = node.comment_view.comment.id;
+ onUpsertComment({
content,
- form_id: this.state.formId,
- post_id: postId,
+ comment_id,
+ form_id,
language_id,
- auth,
- };
- WebSocketService.Instance.send(wsClient.createComment(form));
+ auth: myAuthRequired(),
+ });
} else {
- if (this.props.edit) {
- const form: EditComment = {
- content,
- form_id: this.state.formId,
- comment_id: node.comment_view.comment.id,
- language_id,
- auth,
- };
- WebSocketService.Instance.send(wsClient.editComment(form));
- } else {
- const form: CreateComment = {
- content,
- form_id: this.state.formId,
- post_id: node.comment_view.post.id,
- parent_id: node.comment_view.comment.id,
- language_id,
- auth,
- };
- WebSocketService.Instance.send(wsClient.createComment(form));
- }
- }
- }
- }
-
- handleReplyCancel() {
- this.props.onReplyCancel?.();
- }
-
- parseMessage(msg: any) {
- const op = wsUserOp(msg);
- console.log(msg);
-
- // Only do the showing and hiding if logged in
- if (UserService.Instance.myUserInfo) {
- if (
- op == UserOperation.CreateComment ||
- op == UserOperation.EditComment
- ) {
- const data = wsJsonToRes<CommentResponse>(msg);
-
- // This only finishes this form, if the randomly generated form_id matches the one received
- if (this.state.formId && this.state.formId == data.form_id) {
- this.setState({ finished: true });
-
- // Necessary because it broke tribute for some reason
- this.setState({ finished: false });
- }
+ const post_id = node.comment_view.post.id;
+ const parent_id = node.comment_view.comment.id;
+ this.props.onUpsertComment({
+ content,
+ parent_id,
+ post_id,
+ form_id,
+ language_id,
+ auth: myAuthRequired(),
+ });
}
}
}