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

   1 import { None, Option, Some } from "@sniptt/monads";
   2 import { Component } from "inferno";
   3 import {
   4   GetPersonDetails,
   5   GetPersonDetailsResponse,
   6   GetSiteResponse,
   7   SortType,
   8   UserOperation,
   9   wsJsonToRes,
  10   wsUserOp,
  11 } from "lemmy-js-client";
  12 import { Subscription } from "rxjs";
  13 import { i18n } from "../../i18next";
  14 import { InitialFetchRequest } from "../../interfaces";
  15 import { UserService, WebSocketService } from "../../services";
  16 import {
  17   auth,
  18   getRecipientIdFromProps,
  19   isBrowser,
  20   setIsoData,
  21   toast,
  22   wsClient,
  23   wsSubscribe,
  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   siteRes: GetSiteResponse;
  31   recipientDetailsRes: Option<GetPersonDetailsResponse>;
  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, GetPersonDetailsResponse);
  41   private subscription: Subscription;
  42   private emptyState: CreatePrivateMessageState = {
  43     siteRes: this.isoData.site_res,
  44     recipientDetailsRes: None,
  45     recipient_id: getRecipientIdFromProps(this.props),
  46     loading: true,
  47   };
  48
  49   constructor(props: any, context: any) {
  50     super(props, context);
  51     this.state = this.emptyState;
  52     this.handlePrivateMessageCreate =
  53       this.handlePrivateMessageCreate.bind(this);
  54
  55     this.parseMessage = this.parseMessage.bind(this);
  56     this.subscription = wsSubscribe(this.parseMessage);
  57
  58     if (UserService.Instance.myUserInfo.isNone() && isBrowser()) {
  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 = {
  66         ...this.state,
  67         recipientDetailsRes: Some(
  68           this.isoData.routeData[0] as GetPersonDetailsResponse
  69         ),
  70         loading: false,
  71       };
  72     } else {
  73       this.fetchPersonDetails();
  74     }
  75   }
  76
  77   fetchPersonDetails() {
  78     let form = new GetPersonDetails({
  79       person_id: Some(this.state.recipient_id),
  80       sort: Some(SortType.New),
  81       saved_only: Some(false),
  82       username: None,
  83       page: None,
  84       limit: None,
  85       community_id: None,
  86       auth: auth(false).ok(),
  87     });
  88     WebSocketService.Instance.send(wsClient.getPersonDetails(form));
  89   }
  90
  91   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
  92     let person_id = Some(Number(req.path.split("/").pop()));
  93     let form = new GetPersonDetails({
  94       person_id,
  95       sort: Some(SortType.New),
  96       saved_only: Some(false),
  97       username: None,
  98       page: None,
  99       limit: None,
 100       community_id: None,
 101       auth: req.auth,
 102     });
 103     return [req.client.getPersonDetails(form)];
 104   }
 105
 106   get documentTitle(): string {
 107     return this.state.recipientDetailsRes.match({
 108       some: res =>
 109         `${i18n.t("create_private_message")} - ${res.person_view.person.name}`,
 110       none: "",
 111     });
 112   }
 113
 114   componentWillUnmount() {
 115     if (isBrowser()) {
 116       this.subscription.unsubscribe();
 117     }
 118   }
 119
 120   render() {
 121     return (
 122       <div className="container">
 123         <HtmlTags
 124           title={this.documentTitle}
 125           path={this.context.router.route.match.url}
 126           description={None}
 127           image={None}
 128         />
 129         {this.state.loading ? (
 130           <h5>
 131             <Spinner large />
 132           </h5>
 133         ) : (
 134           this.state.recipientDetailsRes.match({
 135             some: res => (
 136               <div className="row">
 137                 <div className="col-12 col-lg-6 offset-lg-3 mb-4">
 138                   <h5>{i18n.t("create_private_message")}</h5>
 139                   <PrivateMessageForm
 140                     privateMessageView={None}
 141                     onCreate={this.handlePrivateMessageCreate}
 142                     recipient={res.person_view.person}
 143                   />
 144                 </div>
 145               </div>
 146             ),
 147             none: <></>,
 148           })
 149         )}
 150       </div>
 151     );
 152   }
 153
 154   handlePrivateMessageCreate() {
 155     toast(i18n.t("message_sent"));
 156
 157     // Navigate to the front
 158     this.context.router.history.push("/");
 159   }
 160
 161   parseMessage(msg: any) {
 162     let op = wsUserOp(msg);
 163     console.log(msg);
 164     if (msg.error) {
 165       toast(i18n.t(msg.error), "danger");
 166       this.setState({ loading: false });
 167       return;
 168     } else if (op == UserOperation.GetPersonDetails) {
 169       let data = wsJsonToRes<GetPersonDetailsResponse>(
 170         msg,
 171         GetPersonDetailsResponse
 172       );
 173       this.setState({ recipientDetailsRes: Some(data), loading: false });
 174     }
 175   }
 176 }