-import { Either, None, Option, Some } from "@sniptt/monads";
import { Component } from "inferno";
import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
-import {
- CommentNode as CommentNodeI,
- CommentResponse,
- CreateComment,
- EditComment,
- UserOperation,
- wsJsonToRes,
- wsUserOp,
-} from "lemmy-js-client";
-import { Subscription } from "rxjs";
+import { CreateComment, EditComment, Language } from "lemmy-js-client";
import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
-import {
- auth,
- capitalizeFirstLetter,
- wsClient,
- wsSubscribe,
-} 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";
/**
* Can either be the parent, or the editable comment. The right side is a postId.
*/
- node: Either<CommentNodeI, number>;
+ 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: Option<string>;
-}
-
-export class CommentForm extends Component<CommentFormProps, CommentFormState> {
- private subscription: Subscription;
- private emptyState: CommentFormState = {
- buttonTitle: this.props.node.isRight()
- ? capitalizeFirstLetter(i18n.t("post"))
- : this.props.edit
- ? capitalizeFirstLetter(i18n.t("save"))
- : capitalizeFirstLetter(i18n.t("reply")),
- finished: false,
- formId: None,
- };
-
+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() {
- let initialContent = this.props.node.match({
- left: node =>
- this.props.edit ? Some(node.comment_view.comment.content) : None,
- right: () => None,
- });
+ const initialContent =
+ typeof this.props.node !== "number"
+ ? this.props.edit
+ ? this.props.node.comment_view.comment.content
+ : undefined
+ : undefined;
+
return (
- <div className="mb-3">
- {UserService.Instance.myUserInfo.isSome() ? (
+ <div
+ className={["comment-form", "mb-3", this.props.containerClass].join(
+ " "
+ )}
+ >
+ {UserService.Instance.myUserInfo ? (
<MarkdownTextArea
initialContent={initialContent}
- buttonTitle={Some(this.state.buttonTitle)}
- maxLength={None}
- finished={this.state.finished}
- replyType={this.props.node.isLeft()}
+ 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}
- placeholder={Some(i18n.t("comment_here"))}
+ 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 }) {
- let content = msg.val;
- this.setState({ formId: Some(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"));
+ }
- this.props.node.match({
- left: node => {
- if (this.props.edit) {
- let form = new EditComment({
- content: Some(content),
- distinguished: None,
- form_id: this.state.formId,
- comment_id: node.comment_view.comment.id,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.editComment(form));
- } else {
- let form = new CreateComment({
- content,
- form_id: this.state.formId,
- post_id: node.comment_view.post.id,
- parent_id: Some(node.comment_view.comment.id),
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.createComment(form));
- }
- },
- right: postId => {
- let form = new 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,
- parent_id: None,
- auth: auth().unwrap(),
+ 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(),
});
- 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.isSome()) {
- if (
- op == UserOperation.CreateComment ||
- op == UserOperation.EditComment
- ) {
- let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
-
- // This only finishes this form, if the randomly generated form_id matches the one received
- if (this.state.formId.unwrapOr("") == data.form_id.unwrapOr("")) {
- this.setState({ finished: true });
-
- // Necessary because it broke tribute for some reason
- this.setState({ finished: false });
- }
}
}
}
projects / lemmy-ui.git / blobdiff