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