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, UserService } 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     if (!UserService.Instance.user) {
  45       toast(i18n.t('not_logged_in'), 'danger');
  46       this.context.router.history.push(`/login`);
  47     }
  48
  49     this.subscription = WebSocketService.Instance.subject
  50       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  51       .subscribe(
  52         msg => this.parseMessage(msg),
  53         err => console.error(err),
  54         () => console.log('complete')
  55       );
  56
  57     WebSocketService.Instance.getSite();
  58   }
  59
  60   componentWillUnmount() {
  61     this.subscription.unsubscribe();
  62   }
  63
  64   render() {
  65     return (
  66       <div class="container">
  67         <div class="row">
  68           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
  69             <h5>{i18n.t('create_post')}</h5>
  70             <PostForm
  71               onCreate={this.handlePostCreate}
  72               params={this.params}
  73               enableDownvotes={this.state.site.enable_downvotes}
  74               enableNsfw={this.state.site.enable_nsfw}
  75             />
  76           </div>
  77         </div>
  78       </div>
  79     );
  80   }
  81
  82   get params(): PostFormParams {
  83     let urlParams = new URLSearchParams(this.props.location.search);
  84     let params: PostFormParams = {
  85       name: urlParams.get('title'),
  86       community: urlParams.get('community') || this.prevCommunityName,
  87       body: urlParams.get('body'),
  88       url: urlParams.get('url'),
  89     };
  90
  91     return params;
  92   }
  93
  94   get prevCommunityName(): string {
  95     if (this.props.match.params.name) {
  96       return this.props.match.params.name;
  97     } else if (this.props.location.state) {
  98       let lastLocation = this.props.location.state.prevPath;
  99       if (lastLocation.includes('/c/')) {
 100         return lastLocation.split('/c/')[1];
 101       }
 102     }
 103     return undefined;
 104   }
 105
 106   handlePostCreate(id: number) {
 107     this.props.history.push(`/post/${id}`);
 108   }
 109
 110   parseMessage(msg: WebSocketJsonResponse) {
 111     console.log(msg);
 112     let res = wsJsonToRes(msg);
 113     if (msg.error) {
 114       toast(i18n.t(msg.error), 'danger');
 115       return;
 116     } else if (res.op == UserOperation.GetSite) {
 117       let data = res.data as GetSiteResponse;
 118       this.state.site = data.site;
 119       this.setState(this.state);
 120       document.title = `${i18n.t('create_post')} - ${data.site.name}`;
 121     }
 122   }
 123 }