src/shared/components/private_message/create-private-message.tsx

   1 import { Component } from "inferno";
   2 import {
   3   GetPersonDetails,
   4   GetPersonDetailsResponse,
   5   GetSiteResponse,
   6   UserOperation,
   7   wsJsonToRes,
   8   wsUserOp,
   9 } from "lemmy-js-client";
  10 import { Subscription } from "rxjs";
  11 import { i18n } from "../../i18next";
  12 import { InitialFetchRequest } from "../../interfaces";
  13 import { WebSocketService } from "../../services";
  14 import {
  15   getRecipientIdFromProps,
  16   isBrowser,
  17   myAuth,
  18   setIsoData,
  19   toast,
  20   wsClient,
  21   wsSubscribe,
  22 } from "../../utils";
  23 import { HtmlTags } from "../common/html-tags";
  24 import { Spinner } from "../common/icon";
  25 import { PrivateMessageForm } from "./private-message-form";
  26
  27 interface CreatePrivateMessageState {
  28   siteRes: GetSiteResponse;
  29   recipientDetailsRes?: GetPersonDetailsResponse;
  30   recipient_id: number;
  31   loading: boolean;
  32 }
  33
  34 export class CreatePrivateMessage extends Component<
  35   any,
  36   CreatePrivateMessageState
  37 > {
  38   private isoData = setIsoData(this.context);
  39   private subscription?: Subscription;
  40   state: CreatePrivateMessageState = {
  41     siteRes: this.isoData.site_res,
  42     recipient_id: getRecipientIdFromProps(this.props),
  43     loading: true,
  44   };
  45
  46   constructor(props: any, context: any) {
  47     super(props, context);
  48     this.handlePrivateMessageCreate =
  49       this.handlePrivateMessageCreate.bind(this);
  50
  51     this.parseMessage = this.parseMessage.bind(this);
  52     this.subscription = wsSubscribe(this.parseMessage);
  53
  54     // Only fetch the data if coming from another route
  55     if (this.isoData.path == this.context.router.route.match.url) {
  56       this.state = {
  57         ...this.state,
  58         recipientDetailsRes: this.isoData
  59           .routeData[0] as GetPersonDetailsResponse,
  60         loading: false,
  61       };
  62     } else {
  63       this.fetchPersonDetails();
  64     }
  65   }
  66
  67   fetchPersonDetails() {
  68     let form: GetPersonDetails = {
  69       person_id: this.state.recipient_id,
  70       sort: "New",
  71       saved_only: false,
  72       auth: myAuth(false),
  73     };
  74     WebSocketService.Instance.send(wsClient.getPersonDetails(form));
  75   }
  76
  77   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
  78     let person_id = Number(req.path.split("/").pop());
  79     let form: GetPersonDetails = {
  80       person_id,
  81       sort: "New",
  82       saved_only: false,
  83       auth: req.auth,
  84     };
  85     return [req.client.getPersonDetails(form)];
  86   }
  87
  88   get documentTitle(): string {
  89     let name_ = this.state.recipientDetailsRes?.person_view.person.name;
  90     return name_ ? `${i18n.t("create_private_message")} - ${name_}` : "";
  91   }
  92
  93   componentWillUnmount() {
  94     if (isBrowser()) {
  95       this.subscription?.unsubscribe();
  96     }
  97   }
  98
  99   render() {
 100     let res = this.state.recipientDetailsRes;
 101     return (
 102       <div className="container-lg">
 103         <HtmlTags
 104           title={this.documentTitle}
 105           path={this.context.router.route.match.url}
 106         />
 107         {this.state.loading ? (
 108           <h5>
 109             <Spinner large />
 110           </h5>
 111         ) : (
 112           res && (
 113             <div className="row">
 114               <div className="col-12 col-lg-6 offset-lg-3 mb-4">
 115                 <h5>{i18n.t("create_private_message")}</h5>
 116                 <PrivateMessageForm
 117                   onCreate={this.handlePrivateMessageCreate}
 118                   recipient={res.person_view.person}
 119                 />
 120               </div>
 121             </div>
 122           )
 123         )}
 124       </div>
 125     );
 126   }
 127
 128   handlePrivateMessageCreate() {
 129     toast(i18n.t("message_sent"));
 130
 131     // Navigate to the front
 132     this.context.router.history.push("/");
 133   }
 134
 135   parseMessage(msg: any) {
 136     let op = wsUserOp(msg);
 137     console.log(msg);
 138     if (msg.error) {
 139       toast(i18n.t(msg.error), "danger");
 140       this.setState({ loading: false });
 141       return;
 142     } else if (op == UserOperation.GetPersonDetails) {
 143       let data = wsJsonToRes<GetPersonDetailsResponse>(msg);
 144       this.setState({ recipientDetailsRes: data, loading: false });
 145     }
 146   }
 147 }