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

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