ui/src/components/create-post.tsx

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