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 { UserService, 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     if (!UserService.Instance.myUserInfo && isBrowser()) {
  55       toast(i18n.t("not_logged_in"), "danger");
  56       this.context.router.history.push(`/login`);
  57     }
  58
  59     // Only fetch the data if coming from another route
  60     if (this.isoData.path == this.context.router.route.match.url) {
  61       this.state = {
  62         ...this.state,
  63         recipientDetailsRes: this.isoData
  64           .routeData[0] as GetPersonDetailsResponse,
  65         loading: false,
  66       };
  67     } else {
  68       this.fetchPersonDetails();
  69     }
  70   }
  71
  72   fetchPersonDetails() {
  73     let form: GetPersonDetails = {
  74       person_id: this.state.recipient_id,
  75       sort: "New",
  76       saved_only: false,
  77       auth: myAuth(false),
  78     };
  79     WebSocketService.Instance.send(wsClient.getPersonDetails(form));
  80   }
  81
  82   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
  83     let person_id = Number(req.path.split("/").pop());
  84     let form: GetPersonDetails = {
  85       person_id,
  86       sort: "New",
  87       saved_only: false,
  88       auth: req.auth,
  89     };
  90     return [req.client.getPersonDetails(form)];
  91   }
  92
  93   get documentTitle(): string {
  94     let name_ = this.state.recipientDetailsRes?.person_view.person.name;
  95     return name_ ? `${i18n.t("create_private_message")} - ${name_}` : "";
  96   }
  97
  98   componentWillUnmount() {
  99     if (isBrowser()) {
 100       this.subscription?.unsubscribe();
 101     }
 102   }
 103
 104   render() {
 105     let res = this.state.recipientDetailsRes;
 106     return (
 107       <div className="container-lg">
 108         <HtmlTags
 109           title={this.documentTitle}
 110           path={this.context.router.route.match.url}
 111         />
 112         {this.state.loading ? (
 113           <h5>
 114             <Spinner large />
 115           </h5>
 116         ) : (
 117           res && (
 118             <div className="row">
 119               <div className="col-12 col-lg-6 offset-lg-3 mb-4">
 120                 <h5>{i18n.t("create_private_message")}</h5>
 121                 <PrivateMessageForm
 122                   onCreate={this.handlePrivateMessageCreate}
 123                   recipient={res.person_view.person}
 124                 />
 125               </div>
 126             </div>
 127           )
 128         )}
 129       </div>
 130     );
 131   }
 132
 133   handlePrivateMessageCreate() {
 134     toast(i18n.t("message_sent"));
 135
 136     // Navigate to the front
 137     this.context.router.history.push("/");
 138   }
 139
 140   parseMessage(msg: any) {
 141     let op = wsUserOp(msg);
 142     console.log(msg);
 143     if (msg.error) {
 144       toast(i18n.t(msg.error), "danger");
 145       this.setState({ loading: false });
 146       return;
 147     } else if (op == UserOperation.GetPersonDetails) {
 148       let data = wsJsonToRes<GetPersonDetailsResponse>(msg);
 149       this.setState({ recipientDetailsRes: data, loading: false });
 150     }
 151   }
 152 }