import { Component } from "inferno";
-import { T } from "inferno-i18next";
+import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
-import {
- CommentResponse,
- CreateComment,
- EditComment,
- UserOperation,
-} from "lemmy-js-client";
-import { Subscription } from "rxjs";
+import { CreateComment, EditComment, Language } from "lemmy-js-client";
import { i18n } from "../../i18next";
-import { CommentNode as CommentNodeI } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
-import {
- authField,
- capitalizeFirstLetter,
- wsClient,
- wsJsonToRes,
- wsSubscribe,
- wsUserOp,
-} from "../../utils";
+import { CommentNodeI } from "../../interfaces";
+import { UserService } from "../../services";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
import { Icon } from "../common/icon";
import { MarkdownTextArea } from "../common/markdown-textarea";
interface CommentFormProps {
- postId?: number;
- node?: CommentNodeI; // Can either be the parent, or the editable comment
+ /**
+ * 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;
- private emptyState: CommentFormState = {
- buttonTitle: !this.props.node
- ? capitalizeFirstLetter(i18n.t("post"))
- : this.props.edit
- ? capitalizeFirstLetter(i18n.t("save"))
- : capitalizeFirstLetter(i18n.t("reply")),
- finished: false,
- formId: "empty_form",
- };
-
+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.state = this.emptyState;
-
- this.parseMessage = this.parseMessage.bind(this);
- this.subscription = wsSubscribe(this.parseMessage);
- }
-
- componentWillUnmount() {
- this.subscription.unsubscribe();
}
render() {
+ const initialContent =
+ typeof this.props.node !== "number"
+ ? this.props.edit
+ ? this.props.node.comment_view.comment.content
+ : undefined
+ : undefined;
+
return (
- <div class="mb-3">
+ <div
+ className={["comment-form", "mb-3", this.props.containerClass].join(
+ " "
+ )}
+ >
{UserService.Instance.myUserInfo ? (
<MarkdownTextArea
- initialContent={
- this.props.edit
- ? this.props.node.comment_view.comment.content
- : null
- }
- buttonTitle={this.state.buttonTitle}
- finished={this.state.finished}
- replyType={!!this.props.node}
+ initialContent={initialContent}
+ showLanguage
+ 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 class="alert alert-light" role="alert">
- <Icon icon="alert-triangle" classes="icon-inline mr-2" />
+ <div className="alert alert-warning" role="alert">
+ <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 }) {
- let content = msg.val;
- this.state.formId = msg.formId;
-
- let node = this.props.node;
+ get buttonTitle(): string {
+ return typeof this.props.node === "number"
+ ? capitalizeFirstLetter(i18n.t("post"))
+ : this.props.edit
+ ? capitalizeFirstLetter(i18n.t("save"))
+ : capitalizeFirstLetter(i18n.t("reply"));
+ }
- if (this.props.edit) {
- let form: EditComment = {
+ 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,
- form_id: this.state.formId,
- comment_id: node.comment_view.comment.id,
- auth: authField(),
- };
- WebSocketService.Instance.send(wsClient.editComment(form));
+ post_id,
+ language_id,
+ form_id,
+ auth: myAuthRequired(),
+ });
} else {
- let form: CreateComment = {
- content,
- form_id: this.state.formId,
- post_id: node ? node.comment_view.post.id : this.props.postId,
- parent_id: node ? node.comment_view.comment.id : null,
- auth: authField(),
- };
- WebSocketService.Instance.send(wsClient.createComment(form));
- }
- this.setState(this.state);
- }
-
- handleReplyCancel() {
- this.props.onReplyCancel();
- }
-
- parseMessage(msg: any) {
- let 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
- ) {
- let data = wsJsonToRes<CommentResponse>(msg).data;
-
- // This only finishes this form, if the randomly generated form_id matches the one received
- if (this.state.formId == data.form_id) {
- this.setState({ finished: true });
-
- // Necessary because it broke tribute for some reason
- this.setState({ finished: false });
- }
+ if (edit) {
+ const comment_id = node.comment_view.comment.id;
+ onUpsertComment({
+ content,
+ comment_id,
+ form_id,
+ language_id,
+ auth: myAuthRequired(),
+ });
+ } else {
+ 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(),
+ });
}
}
}
projects / lemmy-ui.git / blobdiff