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