ui/src/components/create-post.tsx

   1 import { Component } from 'inferno';
   2 import { Subscription } from 'rxjs';
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { PostForm } from './post-form';
   5 import { toast, wsJsonToRes } from '../utils';
   6 import { WebSocketService } from '../services';
   7 import {
   8   UserOperation,
   9   PostFormParams,
  10   WebSocketJsonResponse,
  11   GetSiteResponse,
  12   Site,
  13 } from '../interfaces';
  14 import { i18n } from '../i18next';
  15
  16 interface CreatePostState {
  17   site: Site;
  18 }
  19
  20 export class CreatePost extends Component<any, CreatePostState> {
  21   private subscription: Subscription;
  22   private emptyState: CreatePostState = {
  23     site: {
  24       id: undefined,
  25       name: undefined,
  26       creator_id: undefined,
  27       published: undefined,
  28       creator_name: undefined,
  29       number_of_users: undefined,
  30       number_of_posts: undefined,
  31       number_of_comments: undefined,
  32       number_of_communities: undefined,
  33       enable_downvotes: undefined,
  34       open_registration: undefined,
  35       enable_nsfw: undefined,
  36     },
  37   };
  38
  39   constructor(props: any, context: any) {
  40     super(props, context);
  41     this.handlePostCreate = this.handlePostCreate.bind(this);
  42     this.state = this.emptyState;
  43
  44     this.subscription = WebSocketService.Instance.subject
  45       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  46       .subscribe(
  47         msg => this.parseMessage(msg),
  48         err => console.error(err),
  49         () => console.log('complete')
  50       );
  51
  52     WebSocketService.Instance.getSite();
  53   }
  54
  55   componentWillUnmount() {
  56     this.subscription.unsubscribe();
  57   }
  58
  59   render() {
  60     return (
  61       <div class="container">
  62         <div class="row">
  63           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
  64             <h5>{i18n.t('create_post')}</h5>
  65             <PostForm
  66               onCreate={this.handlePostCreate}
  67               params={this.params}
  68               enableDownvotes={this.state.site.enable_downvotes}
  69               enableNsfw={this.state.site.enable_nsfw}
  70             />
  71           </div>
  72         </div>
  73       </div>
  74     );
  75   }
  76
  77   get params(): PostFormParams {
  78     let urlParams = new URLSearchParams(this.props.location.search);
  79     let params: PostFormParams = {
  80       name: urlParams.get('title'),
  81       community: urlParams.get('community') || this.prevCommunityName,
  82       body: urlParams.get('body'),
  83       url: urlParams.get('url'),
  84     };
  85
  86     return params;
  87   }
  88
  89   get prevCommunityName(): string {
  90     if (this.props.match.params.name) {
  91       return this.props.match.params.name;
  92     } else if (this.props.location.state) {
  93       let lastLocation = this.props.location.state.prevPath;
  94       if (lastLocation.includes('/c/')) {
  95         return lastLocation.split('/c/')[1];
  96       }
  97     }
  98     return undefined;
  99   }
 100
 101   handlePostCreate(id: number) {
 102     this.props.history.push(`/post/${id}`);
 103   }
 104
 105   parseMessage(msg: WebSocketJsonResponse) {
 106     console.log(msg);
 107     let res = wsJsonToRes(msg);
 108     if (msg.error) {
 109       toast(i18n.t(msg.error), 'danger');
 110       return;
 111     } else if (res.op == UserOperation.GetSite) {
 112       let data = res.data as GetSiteResponse;
 113       this.state.site = data.site;
 114       this.setState(this.state);
 115       document.title = `${i18n.t('create_post')} - ${data.site.name}`;
 116     }
 117   }
 118 }