ui/src/components/post-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from "rxjs";
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType } from '../interfaces';
   5 import { WebSocketService, UserService } from '../services';
   6 import { msgOp } from '../utils';
   7 import * as autosize from 'autosize';
   8
   9 interface PostFormProps {
  10   post?: Post; // If a post is given, that means this is an edit
  11   prevCommunityName?: string;
  12   onCancel?(): any;
  13   onCreate?(id: number): any;
  14   onEdit?(post: Post): any;
  15 }
  16
  17 interface PostFormState {
  18   postForm: PostFormI;
  19   communities: Array<Community>;
  20   loading: boolean;
  21 }
  22
  23 export class PostForm extends Component<PostFormProps, PostFormState> {
  24
  25   private subscription: Subscription;
  26   private emptyState: PostFormState = {
  27     postForm: {
  28       name: null,
  29       auth: null,
  30       community_id: null,
  31       creator_id: (UserService.Instance.user) ? UserService.Instance.user.id : null,
  32     },
  33     communities: [],
  34     loading: false
  35   }
  36
  37   constructor(props: any, context: any) {
  38     super(props, context);
  39
  40     this.state = this.emptyState;
  41
  42     if (this.props.post) {
  43       this.state.postForm = {
  44         body: this.props.post.body,
  45         name: this.props.post.name,
  46         community_id: this.props.post.community_id,
  47         edit_id: this.props.post.id,
  48         creator_id: this.props.post.creator_id,
  49         url: this.props.post.url,
  50         auth: null
  51       }
  52     }
  53
  54     this.subscription = WebSocketService.Instance.subject
  55       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  56       .subscribe(
  57         (msg) => this.parseMessage(msg),
  58         (err) => console.error(err),
  59         () => console.log('complete')
  60       );
  61
  62       let listCommunitiesForm: ListCommunitiesForm = {
  63         sort: SortType[SortType.TopAll],
  64         limit: 9999,
  65       }
  66
  67       WebSocketService.Instance.listCommunities(listCommunitiesForm);
  68   }
  69
  70   componentDidMount() {
  71     autosize(document.querySelectorAll('textarea'));
  72   }
  73
  74   componentWillUnmount() {
  75     this.subscription.unsubscribe();
  76   }
  77
  78   render() {
  79     return (
  80       <div>
  81         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
  82           <div class="form-group row">
  83             <label class="col-sm-2 col-form-label">URL</label>
  84             <div class="col-sm-10">
  85               <input type="url" class="form-control" value={this.state.postForm.url} onInput={linkEvent(this, this.handlePostUrlChange)} />
  86             </div>
  87           </div>
  88           <div class="form-group row">
  89             <label class="col-sm-2 col-form-label">Title</label>
  90             <div class="col-sm-10">
  91               <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows={2} minLength={3} maxLength={100} />
  92             </div>
  93           </div>
  94           <div class="form-group row">
  95             <label class="col-sm-2 col-form-label">Body</label>
  96             <div class="col-sm-10">
  97               <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows={4} maxLength={10000} />
  98             </div>
  99           </div>
 100           {/* Cant change a community from an edit */}
 101           {!this.props.post &&
 102             <div class="form-group row">
 103             <label class="col-sm-2 col-form-label">Community</label>
 104             <div class="col-sm-10">
 105               <select class="form-control" value={this.state.postForm.community_id} onInput={linkEvent(this, this.handlePostCommunityChange)}>
 106                 {this.state.communities.map(community =>
 107                   <option value={community.id}>{community.name}</option>
 108                 )}
 109               </select>
 110             </div>
 111             </div>
 112             }
 113           <div class="form-group row">
 114             <div class="col-sm-10">
 115               <button type="submit" class="btn btn-secondary mr-2">
 116               {this.state.loading ?
 117               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
 118               this.props.post ? 'Save' : 'Create'}</button>
 119               {this.props.post && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
 120             </div>
 121           </div>
 122         </form>
 123       </div>
 124     );
 125   }
 126
 127   handlePostSubmit(i: PostForm, event: any) {
 128     event.preventDefault();
 129     if (i.props.post) {
 130       WebSocketService.Instance.editPost(i.state.postForm);
 131     } else {
 132       WebSocketService.Instance.createPost(i.state.postForm);
 133     }
 134     i.state.loading = true;
 135     i.setState(i.state);
 136   }
 137
 138   handlePostUrlChange(i: PostForm, event: any) {
 139     i.state.postForm.url = event.target.value;
 140     i.setState(i.state);
 141   }
 142
 143   handlePostNameChange(i: PostForm, event: any) {
 144     i.state.postForm.name = event.target.value;
 145     i.setState(i.state);
 146   }
 147
 148   handlePostBodyChange(i: PostForm, event: any) {
 149     i.state.postForm.body = event.target.value;
 150     i.setState(i.state);
 151   }
 152
 153   handlePostCommunityChange(i: PostForm, event: any) {
 154     i.state.postForm.community_id = Number(event.target.value);
 155     i.setState(i.state);
 156   }
 157
 158   handleCancel(i: PostForm) {
 159     i.props.onCancel();
 160   }
 161
 162   parseMessage(msg: any) {
 163     let op: UserOperation = msgOp(msg);
 164     if (msg.error) {
 165       alert(msg.error);
 166       this.state.loading = false;
 167       this.setState(this.state);
 168       return;
 169     } else if (op == UserOperation.ListCommunities) {
 170       let res: ListCommunitiesResponse = msg;
 171       this.state.communities = res.communities;
 172       if (this.props.post) {
 173         this.state.postForm.community_id = this.props.post.community_id;
 174       } else if (this.props.prevCommunityName) {
 175         let foundCommunityId = res.communities.find(r => r.name == this.props.prevCommunityName).id;
 176         this.state.postForm.community_id = foundCommunityId;
 177       } else {
 178         this.state.postForm.community_id = res.communities[0].id;
 179       }
 180       this.setState(this.state);
 181     } else if (op == UserOperation.CreatePost) {
 182       this.state.loading = false;
 183       let res: PostResponse = msg;
 184       this.props.onCreate(res.post.id);
 185     } else if (op == UserOperation.EditPost) {
 186       this.state.loading = false;
 187       let res: PostResponse = msg;
 188       this.props.onEdit(res.post);
 189     }
 190   }
 191
 192 }
 193
 194