Use http client (#1081)

[lemmy-ui.git] / src / shared / components / comment / comment-form.tsx

diff --git a/src/shared/components/comment/comment-form.tsx b/src/shared/components/comment/comment-form.tsx
index 42ed226d28cc9c0cf9089774ad28091bc2126440..c60cde20161407905dd8f3ad977423e60c94392d 100644 (file)
--- a/src/shared/components/comment/comment-form.tsx
+++ b/src/shared/components/comment/comment-form.tsx
@@ -1,25 +1,11 @@
 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";
 
@@ -28,44 +14,21 @@ interface CommentFormProps {
    * 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[];
+  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() {
@@ -82,13 +45,13 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           <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}
@@ -108,77 +71,46 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     );
   }
 
-  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(),
+        });
       }
     }
   }