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

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