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               <h1 className="h4 mb-4">
 119                 {I18NextService.i18n.t("create_private_message")}
 120               </h1>
 121               <PrivateMessageForm
 122                 onCreate={this.handlePrivateMessageCreate}
 123                 recipient={res.person_view.person}
 124               />
 125             </div>
 126           </div>
 127         );
 128       }
 129     }
 130   }
 131
 132   render() {
 133     return (
 134       <div className="create-private-message container-lg">
 135         <HtmlTags
 136           title={this.documentTitle}
 137           path={this.context.router.route.match.url}
 138         />
 139         {this.renderRecipientRes()}
 140       </div>
 141     );
 142   }
 143
 144   async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
 145     const res = await HttpService.client.createPrivateMessage(form);
 146
 147     if (res.state == "success") {
 148       toast(I18NextService.i18n.t("message_sent"));
 149
 150       // Navigate to the front
 151       this.context.router.history.push("/");
 152     }
 153   }
 154 }