1 import { getRecipientIdFromProps, myAuth, setIsoData } from "@utils/app";
2 import { isBrowser } from "@utils/browser";
3 import { RouteDataResponse } from "@utils/types";
4 import { Component } from "inferno";
6 CreatePrivateMessage as CreatePrivateMessageI,
8 GetPersonDetailsResponse,
10 } from "lemmy-js-client";
11 import { InitialFetchRequest } from "../../interfaces";
12 import { FirstLoadService, I18NextService } from "../../services";
13 import { HttpService, RequestState } from "../../services/HttpService";
14 import { toast } from "../../toast";
15 import { HtmlTags } from "../common/html-tags";
16 import { Spinner } from "../common/icon";
17 import { PrivateMessageForm } from "./private-message-form";
19 type CreatePrivateMessageData = RouteDataResponse<{
20 recipientDetailsResponse: GetPersonDetailsResponse;
23 interface CreatePrivateMessageState {
24 siteRes: GetSiteResponse;
25 recipientRes: RequestState<GetPersonDetailsResponse>;
27 isIsomorphic: boolean;
30 export class CreatePrivateMessage extends Component<
32 CreatePrivateMessageState
34 private isoData = setIsoData<CreatePrivateMessageData>(this.context);
35 state: CreatePrivateMessageState = {
36 siteRes: this.isoData.site_res,
37 recipientRes: { state: "empty" },
38 recipientId: getRecipientIdFromProps(this.props),
42 constructor(props: any, context: any) {
43 super(props, context);
44 this.handlePrivateMessageCreate =
45 this.handlePrivateMessageCreate.bind(this);
47 // Only fetch the data if coming from another route
48 if (!isBrowser() || FirstLoadService.isFirstLoad) {
51 recipientRes: this.isoData.routeData.recipientDetailsResponse,
57 async componentDidMount() {
58 if (!this.state.isIsomorphic) {
59 await this.fetchPersonDetails();
63 static async fetchInitialData({
67 }: InitialFetchRequest): Promise<CreatePrivateMessageData> {
68 const person_id = Number(path.split("/").pop());
70 const form: GetPersonDetails = {
78 recipientDetailsResponse: await client.getPersonDetails(form),
82 async fetchPersonDetails() {
84 recipientRes: { state: "loading" },
88 recipientRes: await HttpService.client.getPersonDetails({
89 person_id: this.state.recipientId,
97 get documentTitle(): string {
98 if (this.state.recipientRes.state == "success") {
99 const name_ = this.state.recipientRes.data.person_view.person.name;
100 return `${I18NextService.i18n.t("create_private_message")} - ${name_}`;
106 renderRecipientRes() {
107 switch (this.state.recipientRes.state) {
115 const res = this.state.recipientRes.data;
117 <div className="row">
118 <div className="col-12 col-lg-6 offset-lg-3 mb-4">
120 {I18NextService.i18n.t("create_private_message")}
123 onCreate={this.handlePrivateMessageCreate}
124 recipient={res.person_view.person}
135 <div className="create-private-message container-lg">
137 title={this.documentTitle}
138 path={this.context.router.route.match.url}
140 {this.renderRecipientRes()}
145 async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
146 const res = await HttpService.client.createPrivateMessage(form);
148 if (res.state == "success") {
149 toast(I18NextService.i18n.t("message_sent"));
151 // Navigate to the front
152 this.context.router.history.push("/");