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