Use http client (#1081)

[lemmy-ui.git] / src / shared / components / private_message / create-private-message.tsx

diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index 327386cb665e88aa14fd576620cfe5a57fe5afd6..817cfd880d001181958b56edce97c340af245040 100644 (file)
--- a/src/shared/components/private_message/create-private-message.tsx
+++ b/src/shared/components/private_message/create-private-message.tsx
@@ -1,24 +1,19 @@
 import { Component } from "inferno";
 import {
+  CreatePrivateMessage as CreatePrivateMessageI,
   GetPersonDetails,
   GetPersonDetailsResponse,
   GetSiteResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   getRecipientIdFromProps,
-  isBrowser,
   myAuth,
   setIsoData,
   toast,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -26,9 +21,9 @@ import { PrivateMessageForm } from "./private-message-form";
 
 interface CreatePrivateMessageState {
   siteRes: GetSiteResponse;
-  recipientDetailsRes?: GetPersonDetailsResponse;
-  recipient_id: number;
-  loading: boolean;
+  recipientRes: RequestState<GetPersonDetailsResponse>;
+  recipientId: number;
+  isIsomorphic: boolean;
 }
 
 export class CreatePrivateMessage extends Component<
@@ -36,11 +31,11 @@ export class CreatePrivateMessage extends Component<
   CreatePrivateMessageState
 > {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: CreatePrivateMessageState = {
     siteRes: this.isoData.site_res,
-    recipient_id: getRecipientIdFromProps(this.props),
-    loading: true,
+    recipientRes: { state: "empty" },
+    recipientId: getRecipientIdFromProps(this.props),
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
@@ -48,35 +43,42 @@ export class CreatePrivateMessage extends Component<
     this.handlePrivateMessageCreate =
       this.handlePrivateMessageCreate.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
     // Only fetch the data if coming from another route
-    if (this.isoData.path == this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        recipientDetailsRes: this.isoData
-          .routeData[0] as GetPersonDetailsResponse,
-        loading: false,
+        recipientRes: this.isoData.routeData[0],
+        isIsomorphic: true,
       };
-    } else {
-      this.fetchPersonDetails();
     }
   }
 
-  fetchPersonDetails() {
-    let form: GetPersonDetails = {
-      person_id: this.state.recipient_id,
-      sort: "New",
-      saved_only: false,
-      auth: myAuth(false),
-    };
-    WebSocketService.Instance.send(wsClient.getPersonDetails(form));
+  async componentDidMount() {
+    if (!this.state.isIsomorphic) {
+      await this.fetchPersonDetails();
+    }
   }
 
-  static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
-    let person_id = Number(req.path.split("/").pop());
-    let form: GetPersonDetails = {
+  async fetchPersonDetails() {
+    this.setState({
+      recipientRes: { state: "loading" },
+    });
+
+    this.setState({
+      recipientRes: await HttpService.client.getPersonDetails({
+        person_id: this.state.recipientId,
+        sort: "New",
+        saved_only: false,
+        auth: myAuth(),
+      }),
+    });
+  }
+
+  static fetchInitialData(
+    req: InitialFetchRequest
+  ): Promise<RequestState<any>>[] {
+    const person_id = Number(req.path.split("/").pop());
+    const form: GetPersonDetails = {
       person_id,
       sort: "New",
       saved_only: false,
@@ -86,62 +88,59 @@ export class CreatePrivateMessage extends Component<
   }
 
   get documentTitle(): string {
-    let name_ = this.state.recipientDetailsRes?.person_view.person.name;
-    return name_ ? `${i18n.t("create_private_message")} - ${name_}` : "";
+    if (this.state.recipientRes.state == "success") {
+      const name_ = this.state.recipientRes.data.person_view.person.name;
+      return `${i18n.t("create_private_message")} - ${name_}`;
+    } else {
+      return "";
+    }
   }
 
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
+  renderRecipientRes() {
+    switch (this.state.recipientRes.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const res = this.state.recipientRes.data;
+        return (
+          <div className="row">
+            <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+              <h5>{i18n.t("create_private_message")}</h5>
+              <PrivateMessageForm
+                onCreate={this.handlePrivateMessageCreate}
+                recipient={res.person_view.person}
+              />
+            </div>
+          </div>
+        );
+      }
     }
   }
 
   render() {
-    let res = this.state.recipientDetailsRes;
     return (
       <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        {this.state.loading ? (
-          <h5>
-            <Spinner large />
-          </h5>
-        ) : (
-          res && (
-            <div className="row">
-              <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-                <h5>{i18n.t("create_private_message")}</h5>
-                <PrivateMessageForm
-                  onCreate={this.handlePrivateMessageCreate}
-                  recipient={res.person_view.person}
-                />
-              </div>
-            </div>
-          )
-        )}
+        {this.renderRecipientRes()}
       </div>
     );
   }
 
-  handlePrivateMessageCreate() {
-    toast(i18n.t("message_sent"));
+  async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
+    const res = await HttpService.client.createPrivateMessage(form);
 
-    // Navigate to the front
-    this.context.router.history.push("/");
-  }
+    if (res.state == "success") {
+      toast(i18n.t("message_sent"));
 
-  parseMessage(msg: any) {
-    let op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.GetPersonDetails) {
-      let data = wsJsonToRes<GetPersonDetailsResponse>(msg);
-      this.setState({ recipientDetailsRes: data, loading: false });
+      // Navigate to the front
+      this.context.router.history.push("/");
     }
   }
 }