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