ui/src/components/post-form.tsx

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