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   Site,
   8   WebSocketJsonResponse,
   9   UserOperation,
  10   UserDetailsResponse,
  11   UserView,
  12   SortType,
  13   GetUserDetailsForm,
  14 } from 'lemmy-js-client';
  15 import {
  16   getRecipientIdFromProps,
  17   isBrowser,
  18   setAuth,
  19   setIsoData,
  20   toast,
  21   wsJsonToRes,
  22   wsSubscribe,
  23 } from '../utils';
  24 import { i18n } from '../i18next';
  25 import { InitialFetchRequest } from 'shared/interfaces';
  26
  27 interface CreatePrivateMessageProps {}
  28
  29 interface CreatePrivateMessageState {
  30   site: Site;
  31   recipient: UserView;
  32   recipient_id: number;
  33   loading: boolean;
  34 }
  35
  36 export class CreatePrivateMessage extends Component<
  37   CreatePrivateMessageProps,
  38   CreatePrivateMessageState
  39 > {
  40   private isoData = setIsoData(this.context);
  41   private subscription: Subscription;
  42   private emptyState: CreatePrivateMessageState = {
  43     site: this.isoData.site.site,
  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.user) {
  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.fetchUserDetails();
  69     }
  70   }
  71
  72   fetchUserDetails() {
  73     let form: GetUserDetailsForm = {
  74       user_id: this.state.recipient_id,
  75       sort: SortType.New,
  76       saved_only: false,
  77     };
  78     WebSocketService.Instance.getUserDetails(form);
  79   }
  80
  81   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
  82     let user_id = Number(req.path.split('/').pop());
  83     let form: GetUserDetailsForm = {
  84       user_id,
  85       sort: SortType.New,
  86       saved_only: false,
  87     };
  88     setAuth(form, req.auth);
  89     return [req.client.getUserDetails(form)];
  90   }
  91
  92   get documentTitle(): string {
  93     return `${i18n.t('create_private_message')} - ${this.state.site.name}`;
  94   }
  95
  96   componentWillUnmount() {
  97     if (isBrowser()) {
  98       this.subscription.unsubscribe();
  99     }
 100   }
 101
 102   render() {
 103     return (
 104       <div class="container">
 105         <HtmlTags
 106           title={this.documentTitle}
 107           path={this.context.router.route.match.url}
 108         />
 109         {this.state.loading ? (
 110           <h5>
 111             <svg class="icon icon-spinner spin">
 112               <use xlinkHref="#icon-spinner"></use>
 113             </svg>
 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}
 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: WebSocketJsonResponse) {
 138     let res = wsJsonToRes(msg);
 139     if (msg.error) {
 140       toast(i18n.t(msg.error), 'danger');
 141       this.state.loading = false;
 142       this.setState(this.state);
 143       return;
 144     } else if (res.op == UserOperation.GetUserDetails) {
 145       let data = res.data as UserDetailsResponse;
 146       this.state.recipient = data.user;
 147       this.state.loading = false;
 148       this.setState(this.state);
 149     }
 150   }
 151 }