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