ui/src/components/create-post.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from "rxjs";
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { PostForm, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces';
   5 import { WebSocketService, UserService } from '../services';
   6 import { msgOp } from '../utils';
   7
   8 interface State {
   9   postForm: PostForm;
  10   communities: Array<Community>;
  11 }
  12
  13
  14 export class CreatePost extends Component<any, State> {
  15
  16   private subscription: Subscription;
  17   private emptyState: State = {
  18     postForm: {
  19       name: null,
  20       auth: null,
  21       community_id: null
  22     },
  23     communities: []
  24   }
  25
  26   constructor(props, context) {
  27     super(props, context);
  28
  29     this.state = this.emptyState;
  30
  31     this.subscription = WebSocketService.Instance.subject
  32       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  33       .subscribe(
  34         (msg) => this.parseMessage(msg),
  35         (err) => console.error(err),
  36         () => console.log('complete')
  37       );
  38
  39     WebSocketService.Instance.listCommunities();
  40   }
  41
  42   componentWillUnmount() {
  43     this.subscription.unsubscribe();
  44   }
  45
  46   render() {
  47     return (
  48       <div class="container">
  49         <div class="row">
  50           <div class="col-12 col-lg-6 mb-4">
  51             {this.postForm()}
  52           </div>
  53         </div>
  54       </div>
  55     )
  56   }
  57
  58   postForm() {
  59     return (
  60       <div>
  61         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
  62           <h3>Create a Post</h3>
  63           <div class="form-group row">
  64             <label class="col-sm-2 col-form-label">URL</label>
  65             <div class="col-sm-10">
  66               <input type="url" class="form-control" value={this.state.postForm.url} onInput={linkEvent(this, this.handlePostUrlChange)} />
  67             </div>
  68           </div>
  69           <div class="form-group row">
  70             <label class="col-sm-2 col-form-label">Title</label>
  71             <div class="col-sm-10">
  72               <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows="3" />
  73             </div>
  74           </div>
  75           <div class="form-group row">
  76             <label class="col-sm-2 col-form-label">Body</label>
  77             <div class="col-sm-10">
  78               <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows="6" />
  79             </div>
  80           </div>
  81           <div class="form-group row">
  82             <label class="col-sm-2 col-form-label">Forum</label>
  83             <div class="col-sm-10">
  84               <select class="form-control" value={this.state.postForm.community_id} onInput={linkEvent(this, this.handlePostCommunityChange)}>
  85                 {this.state.communities.map(community =>
  86                   <option value={community.id}>{community.name}</option>
  87                 )}
  88               </select>
  89             </div>
  90           </div>
  91           <div class="form-group row">
  92             <div class="col-sm-10">
  93               <button type="submit" class="btn btn-secondary">Create Post</button>
  94             </div>
  95           </div>
  96         </form>
  97       </div>
  98     );
  99   }
 100
 101   handlePostSubmit(i: CreatePost, event) {
 102     event.preventDefault();
 103     WebSocketService.Instance.createPost(i.state.postForm);
 104   }
 105
 106   handlePostUrlChange(i: CreatePost, event) {
 107     i.state.postForm.url = event.target.value;
 108   }
 109
 110   handlePostNameChange(i: CreatePost, event) {
 111     i.state.postForm.name = event.target.value;
 112   }
 113
 114   handlePostBodyChange(i: CreatePost, event) {
 115     i.state.postForm.body = event.target.value;
 116   }
 117
 118   handlePostCommunityChange(i: CreatePost, event) {
 119     i.state.postForm.community_id = Number(event.target.value);
 120   }
 121
 122   parseMessage(msg: any) {
 123     console.log(msg);
 124     let op: UserOperation = msgOp(msg);
 125     if (msg.error) {
 126       alert(msg.error);
 127       return;
 128     } else if (op == UserOperation.ListCommunities) {
 129       let res: ListCommunitiesResponse = msg;
 130       this.state.communities = res.communities;
 131       this.state.postForm.community_id = res.communities[0].id; // TODO set it to the default community
 132       this.setState(this.state);
 133     } else if (op == UserOperation.CreatePost) {
 134       let res: PostResponse = msg;
 135       this.props.history.push(`/post/${res.post.id}`);
 136     }
 137   }
 138
 139 }