]> Untitled Git - lemmy-ui.git/blob - src/shared/components/private_message/create-private-message.tsx
Re-organized components folder. (#339)
[lemmy-ui.git] / src / shared / components / private_message / create-private-message.tsx
1 import { Component } from "inferno";
2 import {
3   GetPersonDetails,
4   GetPersonDetailsResponse,
5   PersonViewSafe,
6   SiteView,
7   SortType,
8   UserOperation,
9 } from "lemmy-js-client";
10 import { Subscription } from "rxjs";
11 import { i18n } from "../../i18next";
12 import { InitialFetchRequest } from "../../interfaces";
13 import { UserService, WebSocketService } from "../../services";
14 import {
15   authField,
16   getRecipientIdFromProps,
17   isBrowser,
18   setIsoData,
19   toast,
20   wsClient,
21   wsJsonToRes,
22   wsSubscribe,
23   wsUserOp,
24 } from "../../utils";
25 import { HtmlTags } from "../common/html-tags";
26 import { Spinner } from "../common/icon";
27 import { PrivateMessageForm } from "./private-message-form";
28
29 interface CreatePrivateMessageState {
30   site_view: SiteView;
31   recipient: PersonViewSafe;
32   recipient_id: number;
33   loading: boolean;
34 }
35
36 export class CreatePrivateMessage extends Component<
37   any,
38   CreatePrivateMessageState
39 > {
40   private isoData = setIsoData(this.context);
41   private subscription: Subscription;
42   private emptyState: CreatePrivateMessageState = {
43     site_view: this.isoData.site_res.site_view,
44     recipient: undefined,
45     recipient_id: getRecipientIdFromProps(this.props),
46     loading: true,
47   };
48   constructor(props: any, context: any) {
49     super(props, context);
50     this.state = this.emptyState;
51     this.handlePrivateMessageCreate =
52       this.handlePrivateMessageCreate.bind(this);
53
54     this.parseMessage = this.parseMessage.bind(this);
55     this.subscription = wsSubscribe(this.parseMessage);
56
57     if (!UserService.Instance.localUserView) {
58       toast(i18n.t("not_logged_in"), "danger");
59       this.context.router.history.push(`/login`);
60     }
61
62     // Only fetch the data if coming from another route
63     if (this.isoData.path == this.context.router.route.match.url) {
64       this.state.recipient = this.isoData.routeData[0].user;
65       this.state.loading = false;
66     } else {
67       this.fetchPersonDetails();
68     }
69   }
70
71   fetchPersonDetails() {
72     let form: GetPersonDetails = {
73       person_id: this.state.recipient_id,
74       sort: SortType.New,
75       saved_only: false,
76       auth: authField(false),
77     };
78     WebSocketService.Instance.send(wsClient.getPersonDetails(form));
79   }
80
81   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
82     let person_id = Number(req.path.split("/").pop());
83     let form: GetPersonDetails = {
84       person_id,
85       sort: SortType.New,
86       saved_only: false,
87       auth: req.auth,
88     };
89     return [req.client.getPersonDetails(form)];
90   }
91
92   get documentTitle(): string {
93     return `${i18n.t("create_private_message")} - ${
94       this.state.site_view.site.name
95     }`;
96   }
97
98   componentWillUnmount() {
99     if (isBrowser()) {
100       this.subscription.unsubscribe();
101     }
102   }
103
104   render() {
105     return (
106       <div class="container">
107         <HtmlTags
108           title={this.documentTitle}
109           path={this.context.router.route.match.url}
110         />
111         {this.state.loading ? (
112           <h5>
113             <Spinner large />
114           </h5>
115         ) : (
116           <div class="row">
117             <div class="col-12 col-lg-6 offset-lg-3 mb-4">
118               <h5>{i18n.t("create_private_message")}</h5>
119               <PrivateMessageForm
120                 onCreate={this.handlePrivateMessageCreate}
121                 recipient={this.state.recipient.person}
122               />
123             </div>
124           </div>
125         )}
126       </div>
127     );
128   }
129
130   handlePrivateMessageCreate() {
131     toast(i18n.t("message_sent"));
132
133     // Navigate to the front
134     this.context.router.history.push(`/`);
135   }
136
137   parseMessage(msg: any) {
138     let op = wsUserOp(msg);
139     console.log(msg);
140     if (msg.error) {
141       toast(i18n.t(msg.error), "danger");
142       this.state.loading = false;
143       this.setState(this.state);
144       return;
145     } else if (op == UserOperation.GetPersonDetails) {
146       let data = wsJsonToRes<GetPersonDetailsResponse>(msg).data;
147       this.state.recipient = data.person_view;
148       this.state.loading = false;
149       this.setState(this.state);
150     }
151   }
152 }