import { Component } from "inferno";
import {
+ CreatePrivateMessage as CreatePrivateMessageI,
GetPersonDetails,
GetPersonDetailsResponse,
GetSiteResponse,
- UserOperation,
- wsJsonToRes,
- wsUserOp,
} from "lemmy-js-client";
-import { Subscription } from "rxjs";
import { i18n } from "../../i18next";
import { InitialFetchRequest } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
import {
getRecipientIdFromProps,
- isBrowser,
myAuth,
setIsoData,
toast,
- wsClient,
- wsSubscribe,
} from "../../utils";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
interface CreatePrivateMessageState {
siteRes: GetSiteResponse;
- recipientDetailsRes?: GetPersonDetailsResponse;
- recipient_id: number;
- loading: boolean;
+ recipientRes: RequestState<GetPersonDetailsResponse>;
+ recipientId: number;
+ isIsomorphic: boolean;
}
export class CreatePrivateMessage extends Component<
CreatePrivateMessageState
> {
private isoData = setIsoData(this.context);
- private subscription?: Subscription;
state: CreatePrivateMessageState = {
siteRes: this.isoData.site_res,
- recipient_id: getRecipientIdFromProps(this.props),
- loading: true,
+ recipientRes: { state: "empty" },
+ recipientId: getRecipientIdFromProps(this.props),
+ isIsomorphic: false,
};
constructor(props: any, context: any) {
this.handlePrivateMessageCreate =
this.handlePrivateMessageCreate.bind(this);
- this.parseMessage = this.parseMessage.bind(this);
- this.subscription = wsSubscribe(this.parseMessage);
-
// Only fetch the data if coming from another route
- if (this.isoData.path == this.context.router.route.match.url) {
+ if (FirstLoadService.isFirstLoad) {
this.state = {
...this.state,
- recipientDetailsRes: this.isoData
- .routeData[0] as GetPersonDetailsResponse,
- loading: false,
+ recipientRes: this.isoData.routeData[0],
+ isIsomorphic: true,
};
- } else {
- this.fetchPersonDetails();
}
}
- fetchPersonDetails() {
- const form: GetPersonDetails = {
- person_id: this.state.recipient_id,
- sort: "New",
- saved_only: false,
- auth: myAuth(false),
- };
- WebSocketService.Instance.send(wsClient.getPersonDetails(form));
+ async componentDidMount() {
+ if (!this.state.isIsomorphic) {
+ await this.fetchPersonDetails();
+ }
}
- static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
+ async fetchPersonDetails() {
+ this.setState({
+ recipientRes: { state: "loading" },
+ });
+
+ this.setState({
+ recipientRes: await HttpService.client.getPersonDetails({
+ person_id: this.state.recipientId,
+ sort: "New",
+ saved_only: false,
+ auth: myAuth(),
+ }),
+ });
+ }
+
+ static fetchInitialData(
+ req: InitialFetchRequest
+ ): Promise<RequestState<any>>[] {
const person_id = Number(req.path.split("/").pop());
const form: GetPersonDetails = {
person_id,
}
get documentTitle(): string {
- const name_ = this.state.recipientDetailsRes?.person_view.person.name;
- return name_ ? `${i18n.t("create_private_message")} - ${name_}` : "";
+ if (this.state.recipientRes.state == "success") {
+ const name_ = this.state.recipientRes.data.person_view.person.name;
+ return `${i18n.t("create_private_message")} - ${name_}`;
+ } else {
+ return "";
+ }
}
- componentWillUnmount() {
- if (isBrowser()) {
- this.subscription?.unsubscribe();
+ renderRecipientRes() {
+ switch (this.state.recipientRes.state) {
+ case "loading":
+ return (
+ <h5>
+ <Spinner large />
+ </h5>
+ );
+ case "success": {
+ const res = this.state.recipientRes.data;
+ return (
+ <div className="row">
+ <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+ <h5>{i18n.t("create_private_message")}</h5>
+ <PrivateMessageForm
+ onCreate={this.handlePrivateMessageCreate}
+ recipient={res.person_view.person}
+ />
+ </div>
+ </div>
+ );
+ }
}
}
render() {
- const res = this.state.recipientDetailsRes;
return (
<div className="container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- {this.state.loading ? (
- <h5>
- <Spinner large />
- </h5>
- ) : (
- res && (
- <div className="row">
- <div className="col-12 col-lg-6 offset-lg-3 mb-4">
- <h5>{i18n.t("create_private_message")}</h5>
- <PrivateMessageForm
- onCreate={this.handlePrivateMessageCreate}
- recipient={res.person_view.person}
- />
- </div>
- </div>
- )
- )}
+ {this.renderRecipientRes()}
</div>
);
}
- handlePrivateMessageCreate() {
- toast(i18n.t("message_sent"));
+ async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
+ const res = await HttpService.client.createPrivateMessage(form);
- // Navigate to the front
- this.context.router.history.push("/");
- }
+ if (res.state == "success") {
+ toast(i18n.t("message_sent"));
- parseMessage(msg: any) {
- const op = wsUserOp(msg);
- console.log(msg);
- if (msg.error) {
- toast(i18n.t(msg.error), "danger");
- this.setState({ loading: false });
- return;
- } else if (op == UserOperation.GetPersonDetails) {
- const data = wsJsonToRes<GetPersonDetailsResponse>(msg);
- this.setState({ recipientDetailsRes: data, loading: false });
+ // Navigate to the front
+ this.context.router.history.push("/");
}
}
}