1 import { Component } from "inferno";
3 CreatePrivateMessage as CreatePrivateMessageI,
5 GetPersonDetailsResponse,
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";
14 getRecipientIdFromProps,
19 import { HtmlTags } from "../common/html-tags";
20 import { Spinner } from "../common/icon";
21 import { PrivateMessageForm } from "./private-message-form";
23 type CreatePrivateMessageData = RouteDataResponse<{
24 recipientDetailsResponse: GetPersonDetailsResponse;
27 interface CreatePrivateMessageState {
28 siteRes: GetSiteResponse;
29 recipientRes: RequestState<GetPersonDetailsResponse>;
31 isIsomorphic: boolean;
34 export class CreatePrivateMessage extends Component<
36 CreatePrivateMessageState
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),
46 constructor(props: any, context: any) {
47 super(props, context);
48 this.handlePrivateMessageCreate =
49 this.handlePrivateMessageCreate.bind(this);
51 // Only fetch the data if coming from another route
52 if (FirstLoadService.isFirstLoad) {
55 recipientRes: this.isoData.routeData.recipientDetailsResponse,
61 async componentDidMount() {
62 if (!this.state.isIsomorphic) {
63 await this.fetchPersonDetails();
67 static async fetchInitialData({
71 }: InitialFetchRequest): Promise<CreatePrivateMessageData> {
72 const person_id = Number(path.split("/").pop());
74 const form: GetPersonDetails = {
82 recipientDetailsResponse: await client.getPersonDetails(form),
86 async fetchPersonDetails() {
88 recipientRes: { state: "loading" },
92 recipientRes: await HttpService.client.getPersonDetails({
93 person_id: this.state.recipientId,
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_}`;
110 renderRecipientRes() {
111 switch (this.state.recipientRes.state) {
119 const res = this.state.recipientRes.data;
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>
125 onCreate={this.handlePrivateMessageCreate}
126 recipient={res.person_view.person}
137 <div className="create-private-message container-lg">
139 title={this.documentTitle}
140 path={this.context.router.route.match.url}
142 {this.renderRecipientRes()}
147 async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
148 const res = await HttpService.client.createPrivateMessage(form);
150 if (res.state == "success") {
151 toast(i18n.t("message_sent"));
153 // Navigate to the front
154 this.context.router.history.push("/");