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 {
   6   PostForm as PostFormI,
   7   PostFormParams,
   8   Post,
   9   PostResponse,
  10   UserOperation,
  11   Community,
  12   ListCommunitiesResponse,
  13   ListCommunitiesForm,
  14   SortType,
  15   SearchForm,
  16   SearchType,
  17   SearchResponse,
  18 } from '../interfaces';
  19 import { WebSocketService, UserService } from '../services';
  20 import {
  21   msgOp,
  22   getPageTitle,
  23   validURL,
  24   capitalizeFirstLetter,
  25   markdownHelpUrl,
  26   archiveUrl,
  27   mdToHtml,
  28   debounce,
  29 } from '../utils';
  30 import * as autosize from 'autosize';
  31 import { i18n } from '../i18next';
  32 import { T } from 'inferno-i18next';
  33
  34 interface PostFormProps {
  35   post?: Post; // If a post is given, that means this is an edit
  36   params?: PostFormParams;
  37   onCancel?(): any;
  38   onCreate?(id: number): any;
  39   onEdit?(post: Post): any;
  40 }
  41
  42 interface PostFormState {
  43   postForm: PostFormI;
  44   communities: Array<Community>;
  45   loading: boolean;
  46   imageLoading: boolean;
  47   previewMode: boolean;
  48   suggestedTitle: string;
  49   suggestedPosts: Array<Post>;
  50   crossPosts: Array<Post>;
  51 }
  52
  53 export class PostForm extends Component<PostFormProps, PostFormState> {
  54   private subscription: Subscription;
  55   private emptyState: PostFormState = {
  56     postForm: {
  57       name: null,
  58       nsfw: false,
  59       auth: null,
  60       community_id: null,
  61       creator_id: UserService.Instance.user
  62         ? UserService.Instance.user.id
  63         : null,
  64     },
  65     communities: [],
  66     loading: false,
  67     imageLoading: false,
  68     previewMode: false,
  69     suggestedTitle: undefined,
  70     suggestedPosts: [],
  71     crossPosts: [],
  72   };
  73
  74   constructor(props: any, context: any) {
  75     super(props, context);
  76
  77     this.state = this.emptyState;
  78
  79     if (this.props.post) {
  80       this.state.postForm = {
  81         body: this.props.post.body,
  82         // NOTE: debouncing breaks both these for some reason, unless you use defaultValue
  83         name: this.props.post.name,
  84         community_id: this.props.post.community_id,
  85         edit_id: this.props.post.id,
  86         creator_id: this.props.post.creator_id,
  87         url: this.props.post.url,
  88         nsfw: this.props.post.nsfw,
  89         auth: null,
  90       };
  91     }
  92
  93     if (this.props.params) {
  94       this.state.postForm.name = this.props.params.name;
  95       if (this.props.params.url) {
  96         this.state.postForm.url = this.props.params.url;
  97       }
  98       if (this.props.params.body) {
  99         this.state.postForm.body = this.props.params.body;
 100       }
 101     }
 102
 103     this.subscription = WebSocketService.Instance.subject
 104       .pipe(
 105         retryWhen(errors =>
 106           errors.pipe(
 107             delay(3000),
 108             take(10)
 109           )
 110         )
 111       )
 112       .subscribe(
 113         msg => this.parseMessage(msg),
 114         err => console.error(err),
 115         () => console.log('complete')
 116       );
 117
 118     let listCommunitiesForm: ListCommunitiesForm = {
 119       sort: SortType[SortType.TopAll],
 120       limit: 9999,
 121     };
 122
 123     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 124   }
 125
 126   componentDidMount() {
 127     autosize(document.querySelectorAll('textarea'));
 128   }
 129
 130   componentWillUnmount() {
 131     this.subscription.unsubscribe();
 132   }
 133
 134   render() {
 135     return (
 136       <div>
 137         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
 138           <div class="form-group row">
 139             <label class="col-sm-2 col-form-label">
 140               <T i18nKey="url">#</T>
 141             </label>
 142             <div class="col-sm-10">
 143               <input
 144                 type="url"
 145                 class="form-control"
 146                 value={this.state.postForm.url}
 147                 onInput={linkEvent(this, this.handlePostUrlChange)}
 148               />
 149               {this.state.suggestedTitle && (
 150                 <div
 151                   class="mt-1 text-muted small font-weight-bold pointer"
 152                   onClick={linkEvent(this, this.copySuggestedTitle)}
 153                 >
 154                   <T
 155                     i18nKey="copy_suggested_title"
 156                     interpolation={{ title: this.state.suggestedTitle }}
 157                   >
 158                     #
 159                   </T>
 160                 </div>
 161               )}
 162               <form>
 163                 <label
 164                   htmlFor="file-upload"
 165                   className={`${UserService.Instance.user &&
 166                     'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
 167                 >
 168                   <T i18nKey="upload_image">#</T>
 169                 </label>
 170                 <input
 171                   id="file-upload"
 172                   type="file"
 173                   accept="image/*,video/*"
 174                   name="file"
 175                   class="d-none"
 176                   disabled={!UserService.Instance.user}
 177                   onChange={linkEvent(this, this.handleImageUpload)}
 178                 />
 179               </form>
 180               {validURL(this.state.postForm.url) && (
 181                 <a
 182                   href={`${archiveUrl}/?run=1&url=${encodeURIComponent(
 183                     this.state.postForm.url
 184                   )}`}
 185                   target="_blank"
 186                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
 187                 >
 188                   <T i18nKey="archive_link">#</T>
 189                 </a>
 190               )}
 191               {this.state.imageLoading && (
 192                 <svg class="icon icon-spinner spin">
 193                   <use xlinkHref="#icon-spinner"></use>
 194                 </svg>
 195               )}
 196               {this.state.crossPosts.length > 0 && (
 197                 <>
 198                   <div class="my-1 text-muted small font-weight-bold">
 199                     <T i18nKey="cross_posts">#</T>
 200                   </div>
 201                   <PostListings showCommunity posts={this.state.crossPosts} />
 202                 </>
 203               )}
 204             </div>
 205           </div>
 206           <div class="form-group row">
 207             <label class="col-sm-2 col-form-label">
 208               <T i18nKey="title">#</T>
 209             </label>
 210             <div class="col-sm-10">
 211               <textarea
 212                 value={this.state.postForm.name}
 213                 onInput={linkEvent(this, this.handlePostNameChange)}
 214                 class="form-control"
 215                 required
 216                 rows={2}
 217                 minLength={3}
 218                 maxLength={100}
 219               />
 220               {this.state.suggestedPosts.length > 0 && (
 221                 <>
 222                   <div class="my-1 text-muted small font-weight-bold">
 223                     <T i18nKey="related_posts">#</T>
 224                   </div>
 225                   <PostListings posts={this.state.suggestedPosts} />
 226                 </>
 227               )}
 228             </div>
 229           </div>
 230           <div class="form-group row">
 231             <label class="col-sm-2 col-form-label">
 232               <T i18nKey="body">#</T>
 233             </label>
 234             <div class="col-sm-10">
 235               <textarea
 236                 value={this.state.postForm.body}
 237                 onInput={linkEvent(this, this.handlePostBodyChange)}
 238                 className={`form-control ${this.state.previewMode && 'd-none'}`}
 239                 rows={4}
 240                 maxLength={10000}
 241               />
 242               {this.state.previewMode && (
 243                 <div
 244                   className="md-div"
 245                   dangerouslySetInnerHTML={mdToHtml(this.state.postForm.body)}
 246                 />
 247               )}
 248               {this.state.postForm.body && (
 249                 <button
 250                   className={`mt-1 mr-2 btn btn-sm btn-secondary ${this.state
 251                     .previewMode && 'active'}`}
 252                   onClick={linkEvent(this, this.handlePreviewToggle)}
 253                 >
 254                   <T i18nKey="preview">#</T>
 255                 </button>
 256               )}
 257               <a
 258                 href={markdownHelpUrl}
 259                 target="_blank"
 260                 class="d-inline-block float-right text-muted small font-weight-bold"
 261               >
 262                 <T i18nKey="formatting_help">#</T>
 263               </a>
 264             </div>
 265           </div>
 266           {!this.props.post && (
 267             <div class="form-group row">
 268               <label class="col-sm-2 col-form-label">
 269                 <T i18nKey="community">#</T>
 270               </label>
 271               <div class="col-sm-10">
 272                 <select
 273                   class="form-control"
 274                   value={this.state.postForm.community_id}
 275                   onInput={linkEvent(this, this.handlePostCommunityChange)}
 276                 >
 277                   {this.state.communities.map(community => (
 278                     <option value={community.id}>{community.name}</option>
 279                   ))}
 280                 </select>
 281               </div>
 282             </div>
 283           )}
 284           {WebSocketService.Instance.site.enable_nsfw && (
 285             <div class="form-group row">
 286               <div class="col-sm-10">
 287                 <div class="form-check">
 288                   <input
 289                     class="form-check-input"
 290                     type="checkbox"
 291                     checked={this.state.postForm.nsfw}
 292                     onChange={linkEvent(this, this.handlePostNsfwChange)}
 293                   />
 294                   <label class="form-check-label">
 295                     <T i18nKey="nsfw">#</T>
 296                   </label>
 297                 </div>
 298               </div>
 299             </div>
 300           )}
 301           <div class="form-group row">
 302             <div class="col-sm-10">
 303               <button type="submit" class="btn btn-secondary mr-2">
 304                 {this.state.loading ? (
 305                   <svg class="icon icon-spinner spin">
 306                     <use xlinkHref="#icon-spinner"></use>
 307                   </svg>
 308                 ) : this.props.post ? (
 309                   capitalizeFirstLetter(i18n.t('save'))
 310                 ) : (
 311                   capitalizeFirstLetter(i18n.t('create'))
 312                 )}
 313               </button>
 314               {this.props.post && (
 315                 <button
 316                   type="button"
 317                   class="btn btn-secondary"
 318                   onClick={linkEvent(this, this.handleCancel)}
 319                 >
 320                   <T i18nKey="cancel">#</T>
 321                 </button>
 322               )}
 323             </div>
 324           </div>
 325         </form>
 326       </div>
 327     );
 328   }
 329
 330   handlePostSubmit(i: PostForm, event: any) {
 331     event.preventDefault();
 332     if (i.props.post) {
 333       WebSocketService.Instance.editPost(i.state.postForm);
 334     } else {
 335       WebSocketService.Instance.createPost(i.state.postForm);
 336     }
 337     i.state.loading = true;
 338     i.setState(i.state);
 339   }
 340
 341   copySuggestedTitle(i: PostForm) {
 342     i.state.postForm.name = i.state.suggestedTitle;
 343     i.state.suggestedTitle = undefined;
 344     i.setState(i.state);
 345   }
 346
 347   handlePostUrlChange(i: PostForm, event: any) {
 348     i.state.postForm.url = event.target.value;
 349     if (validURL(i.state.postForm.url)) {
 350       let form: SearchForm = {
 351         q: i.state.postForm.url,
 352         type_: SearchType[SearchType.Url],
 353         sort: SortType[SortType.TopAll],
 354         page: 1,
 355         limit: 6,
 356       };
 357
 358       WebSocketService.Instance.search(form);
 359
 360       // Fetch the page title
 361       getPageTitle(i.state.postForm.url).then(d => {
 362         i.state.suggestedTitle = d;
 363         i.setState(i.state);
 364       });
 365     } else {
 366       i.state.suggestedTitle = undefined;
 367       i.state.crossPosts = [];
 368     }
 369
 370     i.setState(i.state);
 371   }
 372
 373   handlePostNameChange(i: PostForm, event: any) {
 374     i.state.postForm.name = event.target.value;
 375     let form: SearchForm = {
 376       q: i.state.postForm.name,
 377       type_: SearchType[SearchType.Posts],
 378       sort: SortType[SortType.TopAll],
 379       community_id: i.state.postForm.community_id,
 380       page: 1,
 381       limit: 6,
 382     };
 383
 384     if (i.state.postForm.name !== '') {
 385       WebSocketService.Instance.search(form);
 386     } else {
 387       i.state.suggestedPosts = [];
 388     }
 389
 390     i.setState(i.state);
 391   }
 392
 393   handlePostBodyChange(i: PostForm, event: any) {
 394     i.state.postForm.body = event.target.value;
 395     i.setState(i.state);
 396   }
 397
 398   handlePostCommunityChange(i: PostForm, event: any) {
 399     i.state.postForm.community_id = Number(event.target.value);
 400     i.setState(i.state);
 401   }
 402
 403   handlePostNsfwChange(i: PostForm, event: any) {
 404     i.state.postForm.nsfw = event.target.checked;
 405     i.setState(i.state);
 406   }
 407
 408   handleCancel(i: PostForm) {
 409     i.props.onCancel();
 410   }
 411
 412   handlePreviewToggle(i: PostForm, event: any) {
 413     event.preventDefault();
 414     i.state.previewMode = !i.state.previewMode;
 415     i.setState(i.state);
 416   }
 417
 418   handleImageUpload(i: PostForm, event: any) {
 419     event.preventDefault();
 420     let file = event.target.files[0];
 421     const imageUploadUrl = `/pictshare/api/upload.php`;
 422     const formData = new FormData();
 423     formData.append('file', file);
 424
 425     i.state.imageLoading = true;
 426     i.setState(i.state);
 427
 428     fetch(imageUploadUrl, {
 429       method: 'POST',
 430       body: formData,
 431     })
 432       .then(res => res.json())
 433       .then(res => {
 434         let url = `${window.location.origin}/pictshare/${res.url}`;
 435         if (res.filetype == 'mp4') {
 436           url += '/raw';
 437         }
 438         i.state.postForm.url = url;
 439         i.state.imageLoading = false;
 440         i.setState(i.state);
 441       })
 442       .catch(error => {
 443         i.state.imageLoading = false;
 444         i.setState(i.state);
 445         alert(error);
 446       });
 447   }
 448
 449   parseMessage(msg: any) {
 450     let op: UserOperation = msgOp(msg);
 451     if (msg.error) {
 452       alert(i18n.t(msg.error));
 453       this.state.loading = false;
 454       this.setState(this.state);
 455       return;
 456     } else if (op == UserOperation.ListCommunities) {
 457       let res: ListCommunitiesResponse = msg;
 458       this.state.communities = res.communities;
 459       if (this.props.post) {
 460         this.state.postForm.community_id = this.props.post.community_id;
 461       } else if (this.props.params && this.props.params.community) {
 462         let foundCommunityId = res.communities.find(
 463           r => r.name == this.props.params.community
 464         ).id;
 465         this.state.postForm.community_id = foundCommunityId;
 466       } else {
 467         this.state.postForm.community_id = res.communities[0].id;
 468       }
 469       this.setState(this.state);
 470     } else if (op == UserOperation.CreatePost) {
 471       this.state.loading = false;
 472       let res: PostResponse = msg;
 473       this.props.onCreate(res.post.id);
 474     } else if (op == UserOperation.EditPost) {
 475       this.state.loading = false;
 476       let res: PostResponse = msg;
 477       this.props.onEdit(res.post);
 478     } else if (op == UserOperation.Search) {
 479       let res: SearchResponse = msg;
 480
 481       if (res.type_ == SearchType[SearchType.Posts]) {
 482         this.state.suggestedPosts = res.posts;
 483       } else if (res.type_ == SearchType[SearchType.Url]) {
 484         this.state.crossPosts = res.posts;
 485       }
 486       this.setState(this.state);
 487     }
 488   }
 489 }