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

   1 import { getRecipientIdFromProps, myAuth, setIsoData } from "@utils/app";
   2 import { RouteDataResponse } from "@utils/types";
   3 import { Component } from "inferno";
   4 import {
   5   CreatePrivateMessage as CreatePrivateMessageI,
   6   GetPersonDetails,
   7   GetPersonDetailsResponse,
   8   GetSiteResponse,
   9 } from "lemmy-js-client";
  10 import { InitialFetchRequest } from "../../interfaces";
  11 import { FirstLoadService, I18NextService } from "../../services";
  12 import { HttpService, RequestState } from "../../services/HttpService";
  13 import { toast } from "../../toast";
  14 import { HtmlTags } from "../common/html-tags";
  15 import { Spinner } from "../common/icon";
  16 import { PrivateMessageForm } from "./private-message-form";
  17
  18 type CreatePrivateMessageData = RouteDataResponse<{
  19   recipientDetailsResponse: GetPersonDetailsResponse;
  20 }>;
  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<CreatePrivateMessageData>(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.recipientDetailsResponse,
  51         isIsomorphic: true,
  52       };
  53     }
  54   }
  55
  56   async componentDidMount() {
  57     if (!this.state.isIsomorphic) {
  58       await this.fetchPersonDetails();
  59     }
  60   }
  61
  62   static async fetchInitialData({
  63     client,
  64     path,
  65     auth,
  66   }: InitialFetchRequest): Promise<CreatePrivateMessageData> {
  67     const person_id = Number(path.split("/").pop());
  68
  69     const form: GetPersonDetails = {
  70       person_id,
  71       sort: "New",
  72       saved_only: false,
  73       auth,
  74     };
  75
  76     return {
  77       recipientDetailsResponse: await client.getPersonDetails(form),
  78     };
  79   }
  80
  81   async fetchPersonDetails() {
  82     this.setState({
  83       recipientRes: { state: "loading" },
  84     });
  85
  86     this.setState({
  87       recipientRes: await HttpService.client.getPersonDetails({
  88         person_id: this.state.recipientId,
  89         sort: "New",
  90         saved_only: false,
  91         auth: myAuth(),
  92       }),
  93     });
  94   }
  95
  96   get documentTitle(): string {
  97     if (this.state.recipientRes.state == "success") {
  98       const name_ = this.state.recipientRes.data.person_view.person.name;
  99       return `${I18NextService.i18n.t("create_private_message")} - ${name_}`;
 100     } else {
 101       return "";
 102     }
 103   }
 104
 105   renderRecipientRes() {
 106     switch (this.state.recipientRes.state) {
 107       case "loading":
 108         return (
 109           <h5>
 110             <Spinner large />
 111           </h5>
 112         );
 113       case "success": {
 114         const res = this.state.recipientRes.data;
 115         return (
 116           <div className="row">
 117             <div className="col-12 col-lg-6 offset-lg-3 mb-4">
 118               <h5>{I18NextService.i18n.t("create_private_message")}</h5>
 119               <PrivateMessageForm
 120                 onCreate={this.handlePrivateMessageCreate}
 121                 recipient={res.person_view.person}
 122               />
 123             </div>
 124           </div>
 125         );
 126       }
 127     }
 128   }
 129
 130   render() {
 131     return (
 132       <div className="create-private-message container-lg">
 133         <HtmlTags
 134           title={this.documentTitle}
 135           path={this.context.router.route.match.url}
 136         />
 137         {this.renderRecipientRes()}
 138       </div>
 139     );
 140   }
 141
 142   async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
 143     const res = await HttpService.client.createPrivateMessage(form);
 144
 145     if (res.state == "success") {
 146       toast(I18NextService.i18n.t("message_sent"));
 147
 148       // Navigate to the front
 149       this.context.router.history.push("/");
 150     }
 151   }
 152 }