Adding create private message.

src/shared/components/create-private-message.tsx

@@ -1,30 +1,49 @@
 import { Component } from 'inferno';
 import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
 import { PrivateMessageForm } from './private-message-form';
-import { WebSocketService, UserService } from '../services';
+import { UserService, WebSocketService } from '../services';
 import {
-  UserOperation,
-  WebSocketJsonResponse,
-  GetSiteResponse,
   Site,
-  PrivateMessageFormParams,
+  WebSocketJsonResponse,
+  UserOperation,
+  UserDetailsResponse,
+  UserView,
+  SortType,
+  GetUserDetailsForm,
 } from 'lemmy-js-client';
-import { toast, wsJsonToRes } from '../utils';
+import {
+  getRecipientIdFromProps,
+  isBrowser,
+  lemmyHttp,
+  setAuth,
+  setIsoData,
+  toast,
+  wsJsonToRes,
+  wsSubscribe,
+} from '../utils';
 import { i18n } from '../i18next';
 
+interface CreatePrivateMessageProps {}
+
 interface CreatePrivateMessageState {
   site: Site;
+  recipient: UserView;
+  recipient_id: number;
+  loading: boolean;
 }
 
 export class CreatePrivateMessage extends Component<
-  any,
+  CreatePrivateMessageProps,
   CreatePrivateMessageState
 > {
+  private isoData = setIsoData(this.context);
   private subscription: Subscription;
   private emptyState: CreatePrivateMessageState = {
-    site: undefined,
+    site: this.isoData.site.site,
+    recipient: undefined,
+    recipient_id: getRecipientIdFromProps(this.props),
+    loading: true,
   };
   constructor(props: any, context: any) {
     super(props, context);
@@ -33,31 +52,50 @@ export class CreatePrivateMessage extends Component<
       this
     );
 
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);
+
     if (!UserService.Instance.user) {
       toast(i18n.t('not_logged_in'), 'danger');
       this.context.router.history.push(`/login`);
     }
 
-    this.subscription = WebSocketService.Instance.subject
-      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-      .subscribe(
-        msg => this.parseMessage(msg),
-        err => console.error(err),
-        () => console.log('complete')
-      );
-
-    WebSocketService.Instance.getSite();
+    // 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.fetchUserDetails();
+    }
   }
 
-  componentWillUnmount() {
-    this.subscription.unsubscribe();
+  fetchUserDetails() {
+    let form: GetUserDetailsForm = {
+      user_id: this.state.recipient_id,
+      sort: SortType.New,
+      saved_only: false,
+    };
+    WebSocketService.Instance.getUserDetails(form);
+  }
+
+  static fetchInitialData(auth: string, path: string): Promise<any>[] {
+    let user_id = Number(path.split('/').pop());
+    let form: GetUserDetailsForm = {
+      user_id,
+      sort: SortType.New,
+      saved_only: false,
+    };
+    setAuth(form, auth);
+    return [lemmyHttp.getUserDetails(form)];
   }
 
   get documentTitle(): string {
-    if (this.state.site) {
-      return `${i18n.t('create_private_message')} - ${this.state.site.name}`;
-    } else {
-      return 'Lemmy';
+    return `${i18n.t('create_private_message')} - ${this.state.site.name}`;
+  }
+
+  componentWillUnmount() {
+    if (isBrowser()) {
+      this.subscription.unsubscribe();
     }
   }
 
@@ -65,44 +103,45 @@ export class CreatePrivateMessage extends Component<
     return (
       <div class="container">
         <Helmet title={this.documentTitle} />
-        <div class="row">
-          <div class="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{i18n.t('create_private_message')}</h5>
-            <PrivateMessageForm
-              onCreate={this.handlePrivateMessageCreate}
-              params={this.params}
-            />
+        {this.state.loading ? (
+          <h5>
+            <svg class="icon icon-spinner spin">
+              <use xlinkHref="#icon-spinner"></use>
+            </svg>
+          </h5>
+        ) : (
+          <div class="row">
+            <div class="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}
+              />
+            </div>
           </div>
-        </div>
+        )}
       </div>
     );
   }
 
-  get params(): PrivateMessageFormParams {
-    let urlParams = new URLSearchParams(this.props.location.search);
-    let params: PrivateMessageFormParams = {
-      recipient_id: Number(urlParams.get('recipient_id')),
-    };
-
-    return params;
-  }
-
   handlePrivateMessageCreate() {
     toast(i18n.t('message_sent'));
 
     // Navigate to the front
-    this.props.history.push(`/`);
+    this.context.router.history.push(`/`);
   }
 
   parseMessage(msg: WebSocketJsonResponse) {
-    console.log(msg);
     let res = wsJsonToRes(msg);
     if (msg.error) {
       toast(i18n.t(msg.error), 'danger');
+      this.state.loading = false;
+      this.setState(this.state);
       return;
-    } else if (res.op == UserOperation.GetSite) {
-      let data = res.data as GetSiteResponse;
-      this.state.site = data.site;
+    } else if (res.op == UserOperation.GetUserDetails) {
+      let data = res.data as UserDetailsResponse;
+      this.state.recipient = data.user;
+      this.state.loading = false;
       this.setState(this.state);
     }
   }