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