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, PostFormParams, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType, SearchForm, SearchType, SearchResponse } from '../interfaces';
   6 import { WebSocketService, UserService } from '../services';
   7 import { msgOp, getPageTitle, debounce, validURL, 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   params?: PostFormParams;
  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   crossPosts: Array<Post>;
  27 }
  28
  29 export class PostForm extends Component<PostFormProps, PostFormState> {
  30
  31   private subscription: Subscription;
  32   private emptyState: PostFormState = {
  33     postForm: {
  34       name: null,
  35       nsfw: false,
  36       auth: null,
  37       community_id: null,
  38       creator_id: (UserService.Instance.user) ? UserService.Instance.user.id : null,
  39     },
  40     communities: [],
  41     loading: false,
  42     suggestedTitle: undefined,
  43     suggestedPosts: [],
  44     crossPosts: [],
  45   }
  46
  47   constructor(props: any, context: any) {
  48     super(props, context);
  49
  50     this.state = this.emptyState;
  51
  52     if (this.props.post) {
  53       this.state.postForm = {
  54         body: this.props.post.body,
  55         name: this.props.post.name,
  56         community_id: this.props.post.community_id,
  57         edit_id: this.props.post.id,
  58         creator_id: this.props.post.creator_id,
  59         url: this.props.post.url,
  60         nsfw: this.props.post.nsfw,
  61         auth: null
  62       }
  63     }
  64
  65     if (this.props.params) {
  66       this.state.postForm.name = this.props.params.name;
  67       if (this.props.params.url) {
  68         this.state.postForm.url = this.props.params.url;
  69       }
  70       if (this.props.params.body) {
  71         this.state.postForm.body = this.props.params.body;
  72       }
  73     }
  74
  75     this.subscription = WebSocketService.Instance.subject
  76     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  77     .subscribe(
  78       (msg) => this.parseMessage(msg),
  79         (err) => console.error(err),
  80         () => console.log('complete')
  81     );
  82
  83     let listCommunitiesForm: ListCommunitiesForm = {
  84       sort: SortType[SortType.TopAll],
  85       limit: 9999,
  86     }
  87
  88     WebSocketService.Instance.listCommunities(listCommunitiesForm);
  89   }
  90
  91   componentDidMount() {
  92     autosize(document.querySelectorAll('textarea'));
  93   }
  94
  95   componentWillUnmount() {
  96     this.subscription.unsubscribe();
  97   }
  98
  99   render() {
 100     return (
 101       <div>
 102         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
 103           <div class="form-group row">
 104             <label class="col-sm-2 col-form-label"><T i18nKey="url">#</T></label>
 105             <div class="col-sm-10">
 106               <input type="url" class="form-control" value={this.state.postForm.url} onInput={linkEvent(this, this.handlePostUrlChange)} />
 107               {this.state.suggestedTitle &&
 108                 <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>
 109               }
 110               {this.state.crossPosts.length > 0 &&
 111                 <>
 112                   <div class="my-1 text-muted small font-weight-bold"><T i18nKey="cross_posts">#</T></div>
 113                   <PostListings showCommunity posts={this.state.crossPosts} />
 114                 </>
 115               }
 116             </div>
 117           </div>
 118           <div class="form-group row">
 119             <label class="col-sm-2 col-form-label"><T i18nKey="title">#</T></label>
 120             <div class="col-sm-10">
 121               <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows={2} minLength={3} maxLength={100} />
 122               {this.state.suggestedPosts.length > 0 &&
 123                 <>
 124                   <div class="my-1 text-muted small font-weight-bold"><T i18nKey="related_posts">#</T></div>
 125                   <PostListings posts={this.state.suggestedPosts} />
 126                 </>
 127               }
 128             </div>
 129           </div>
 130           <div class="form-group row">
 131             <label class="col-sm-2 col-form-label"><T i18nKey="body">#</T></label>
 132             <div class="col-sm-10">
 133               <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows={4} maxLength={10000} />
 134             </div>
 135           </div>
 136           {!this.props.post &&
 137             <div class="form-group row">
 138             <label class="col-sm-2 col-form-label"><T i18nKey="community">#</T></label>
 139             <div class="col-sm-10">
 140               <select class="form-control" value={this.state.postForm.community_id} onInput={linkEvent(this, this.handlePostCommunityChange)}>
 141                 {this.state.communities.map(community =>
 142                   <option value={community.id}>{community.name}</option>
 143                 )}
 144               </select>
 145             </div>
 146             </div>
 147             }
 148           <div class="form-group row">
 149             <div class="col-sm-10">
 150               <div class="form-check">
 151                 <input class="form-check-input" type="checkbox" checked={this.state.postForm.nsfw} onChange={linkEvent(this, this.handlePostNsfwChange)}/>
 152                 <label class="form-check-label"><T i18nKey="nsfw">#</T></label>
 153               </div>
 154             </div>
 155           </div>
 156           <div class="form-group row">
 157             <div class="col-sm-10">
 158               <button type="submit" class="btn btn-secondary mr-2">
 159               {this.state.loading ?
 160               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
 161               this.props.post ? capitalizeFirstLetter(i18n.t('save')) : capitalizeFirstLetter(i18n.t('create'))}</button>
 162               {this.props.post && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}><T i18nKey="cancel">#</T></button>}
 163             </div>
 164           </div>
 165         </form>
 166       </div>
 167     );
 168   }
 169
 170   handlePostSubmit(i: PostForm, event: any) {
 171     event.preventDefault();
 172     if (i.props.post) {
 173       WebSocketService.Instance.editPost(i.state.postForm);
 174     } else {
 175       WebSocketService.Instance.createPost(i.state.postForm);
 176     }
 177     i.state.loading = true;
 178     i.setState(i.state);
 179   }
 180
 181   copySuggestedTitle(i: PostForm) {
 182     i.state.postForm.name = i.state.suggestedTitle;
 183     i.state.suggestedTitle = undefined;
 184     i.setState(i.state);
 185   }
 186
 187   handlePostUrlChange(i: PostForm, event: any) {
 188     i.state.postForm.url = event.target.value;
 189     if (validURL(i.state.postForm.url)) {
 190
 191       let form: SearchForm = {
 192         q: i.state.postForm.url,
 193         type_: SearchType[SearchType.Url],
 194         sort: SortType[SortType.TopAll],
 195         page: 1,
 196         limit: 6,
 197       };
 198
 199       WebSocketService.Instance.search(form);
 200
 201       // Fetch the page title
 202       getPageTitle(i.state.postForm.url).then(d => {
 203         i.state.suggestedTitle = d;
 204         i.setState(i.state);
 205       });
 206     } else {
 207       i.state.suggestedTitle = undefined;
 208       i.state.crossPosts = [];
 209     }
 210
 211     i.setState(i.state);
 212   }
 213
 214   handlePostNameChange(i: PostForm, event: any) {
 215     i.state.postForm.name = event.target.value;
 216     let form: SearchForm = {
 217       q: i.state.postForm.name,
 218       type_: SearchType[SearchType.Posts],
 219       sort: SortType[SortType.TopAll],
 220       community_id: i.state.postForm.community_id,
 221       page: 1,
 222       limit: 6,
 223     };
 224
 225     if (i.state.postForm.name !== '') {
 226       WebSocketService.Instance.search(form);
 227     } else {
 228       i.state.suggestedPosts = [];
 229     }
 230
 231     i.setState(i.state);
 232   }
 233
 234   handlePostBodyChange(i: PostForm, event: any) {
 235     i.state.postForm.body = event.target.value;
 236     i.setState(i.state);
 237   }
 238
 239   handlePostCommunityChange(i: PostForm, event: any) {
 240     i.state.postForm.community_id = Number(event.target.value);
 241     i.setState(i.state);
 242   }
 243
 244   handlePostNsfwChange(i: PostForm, event: any) {
 245     i.state.postForm.nsfw = event.target.checked;
 246     i.setState(i.state);
 247   }
 248
 249   handleCancel(i: PostForm) {
 250     i.props.onCancel();
 251   }
 252
 253   parseMessage(msg: any) {
 254     let op: UserOperation = msgOp(msg);
 255     if (msg.error) {
 256       alert(i18n.t(msg.error));
 257       this.state.loading = false;
 258       this.setState(this.state);
 259       return;
 260     } else if (op == UserOperation.ListCommunities) {
 261       let res: ListCommunitiesResponse = msg;
 262       this.state.communities = res.communities;
 263       if (this.props.post) {
 264         this.state.postForm.community_id = this.props.post.community_id;
 265       } else if (this.props.params && this.props.params.community) {
 266         let foundCommunityId = res.communities.find(r => r.name == this.props.params.community).id;
 267         this.state.postForm.community_id = foundCommunityId;
 268       } else {
 269         this.state.postForm.community_id = res.communities[0].id;
 270       }
 271       this.setState(this.state);
 272     } else if (op == UserOperation.CreatePost) {
 273       this.state.loading = false;
 274       let res: PostResponse = msg;
 275       this.props.onCreate(res.post.id);
 276     } else if (op == UserOperation.EditPost) {
 277       this.state.loading = false;
 278       let res: PostResponse = msg;
 279       this.props.onEdit(res.post);
 280     } else if (op == UserOperation.Search) {
 281       let res: SearchResponse = msg;
 282
 283       if (res.type_ == SearchType[SearchType.Posts]) {
 284         this.state.suggestedPosts = res.posts;
 285       } else if (res.type_ == SearchType[SearchType.Url]) {
 286         this.state.crossPosts = res.posts;
 287       }
 288       this.setState(this.state);
 289     }
 290   }
 291
 292 }
 293
 294