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