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

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