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

   1 import { Component } from 'inferno';
   2 import { Subscription } from 'rxjs';
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { PrivateMessageForm } from './private-message-form';
   5 import { WebSocketService, UserService } from '../services';
   6 import {
   7   UserOperation,
   8   WebSocketJsonResponse,
   9   GetSiteResponse,
  10   PrivateMessageFormParams,
  11 } from '../interfaces';
  12 import { toast, wsJsonToRes } from '../utils';
  13 import { i18n } from '../i18next';
  14
  15 export class CreatePrivateMessage extends Component<any, any> {
  16   private subscription: Subscription;
  17   constructor(props: any, context: any) {
  18     super(props, context);
  19     this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
  20       this
  21     );
  22
  23     if (!UserService.Instance.user) {
  24       toast(i18n.t('not_logged_in'), 'danger');
  25       this.context.router.history.push(`/login`);
  26     }
  27
  28     this.subscription = WebSocketService.Instance.subject
  29       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  30       .subscribe(
  31         msg => this.parseMessage(msg),
  32         err => console.error(err),
  33         () => console.log('complete')
  34       );
  35
  36     WebSocketService.Instance.getSite();
  37   }
  38
  39   componentWillUnmount() {
  40     this.subscription.unsubscribe();
  41   }
  42
  43   render() {
  44     return (
  45       <div class="container">
  46         <div class="row">
  47           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
  48             <h5>{i18n.t('create_private_message')}</h5>
  49             <PrivateMessageForm
  50               onCreate={this.handlePrivateMessageCreate}
  51               params={this.params}
  52             />
  53           </div>
  54         </div>
  55       </div>
  56     );
  57   }
  58
  59   get params(): PrivateMessageFormParams {
  60     let urlParams = new URLSearchParams(this.props.location.search);
  61     let params: PrivateMessageFormParams = {
  62       recipient_id: Number(urlParams.get('recipient_id')),
  63     };
  64
  65     return params;
  66   }
  67
  68   handlePrivateMessageCreate() {
  69     toast(i18n.t('message_sent'));
  70
  71     // Navigate to the front
  72     this.props.history.push(`/`);
  73   }
  74
  75   parseMessage(msg: WebSocketJsonResponse) {
  76     console.log(msg);
  77     let res = wsJsonToRes(msg);
  78     if (msg.error) {
  79       toast(i18n.t(msg.error), 'danger');
  80       return;
  81     } else if (res.op == UserOperation.GetSite) {
  82       let data = res.data as GetSiteResponse;
  83       document.title = `${i18n.t('create_private_message')} - ${
  84         data.site.name
  85       }`;
  86     }
  87   }
  88 }