ui/src/components/post-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Prompt } from 'inferno-router';
   3 import { PostListings } from './post-listings';
   4 import { Subscription } from 'rxjs';
   5 import { retryWhen, delay, take } from 'rxjs/operators';
   6 import {
   7   PostForm as PostFormI,
   8   PostFormParams,
   9   Post,
  10   PostResponse,
  11   UserOperation,
  12   Community,
  13   ListCommunitiesResponse,
  14   ListCommunitiesForm,
  15   SortType,
  16   SearchForm,
  17   SearchType,
  18   SearchResponse,
  19   WebSocketJsonResponse,
  20 } from '../interfaces';
  21 import { WebSocketService, UserService } from '../services';
  22 import {
  23   wsJsonToRes,
  24   getPageTitle,
  25   validURL,
  26   capitalizeFirstLetter,
  27   markdownHelpUrl,
  28   archiveUrl,
  29   mdToHtml,
  30   debounce,
  31   isImage,
  32   toast,
  33   randomStr,
  34   setupTribute,
  35   setupTippy,
  36   emojiPicker,
  37   hostname,
  38   pictrsDeleteToast,
  39 } from '../utils';
  40 import autosize from 'autosize';
  41 import Tribute from 'tributejs/src/Tribute.js';
  42 import emojiShortName from 'emoji-short-name';
  43 import Selectr from 'mobius1-selectr';
  44 import { i18n } from '../i18next';
  45
  46 const MAX_POST_TITLE_LENGTH = 200;
  47
  48 interface PostFormProps {
  49   post?: Post; // If a post is given, that means this is an edit
  50   params?: PostFormParams;
  51   onCancel?(): any;
  52   onCreate?(id: number): any;
  53   onEdit?(post: Post): any;
  54   enableNsfw: boolean;
  55   enableDownvotes: boolean;
  56 }
  57
  58 interface PostFormState {
  59   postForm: PostFormI;
  60   communities: Array<Community>;
  61   loading: boolean;
  62   imageLoading: boolean;
  63   previewMode: boolean;
  64   suggestedTitle: string;
  65   suggestedPosts: Array<Post>;
  66   crossPosts: Array<Post>;
  67 }
  68
  69 export class PostForm extends Component<PostFormProps, PostFormState> {
  70   private id = `post-form-${randomStr()}`;
  71   private tribute: Tribute;
  72   private subscription: Subscription;
  73   private emptyState: PostFormState = {
  74     postForm: {
  75       name: null,
  76       nsfw: false,
  77       auth: null,
  78       community_id: null,
  79       creator_id: UserService.Instance.user
  80         ? UserService.Instance.user.id
  81         : null,
  82     },
  83     communities: [],
  84     loading: false,
  85     imageLoading: false,
  86     previewMode: false,
  87     suggestedTitle: undefined,
  88     suggestedPosts: [],
  89     crossPosts: [],
  90   };
  91
  92   constructor(props: any, context: any) {
  93     super(props, context);
  94     this.fetchSimilarPosts = debounce(this.fetchSimilarPosts).bind(this);
  95     this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this);
  96
  97     this.tribute = setupTribute();
  98     this.setupEmojiPicker();
  99
 100     this.state = this.emptyState;
 101
 102     if (this.props.post) {
 103       this.state.postForm = {
 104         body: this.props.post.body,
 105         // NOTE: debouncing breaks both these for some reason, unless you use defaultValue
 106         name: this.props.post.name,
 107         community_id: this.props.post.community_id,
 108         edit_id: this.props.post.id,
 109         creator_id: this.props.post.creator_id,
 110         url: this.props.post.url,
 111         nsfw: this.props.post.nsfw,
 112         auth: null,
 113       };
 114     }
 115
 116     if (this.props.params) {
 117       this.state.postForm.name = this.props.params.name;
 118       if (this.props.params.url) {
 119         this.state.postForm.url = this.props.params.url;
 120       }
 121       if (this.props.params.body) {
 122         this.state.postForm.body = this.props.params.body;
 123       }
 124     }
 125
 126     this.subscription = WebSocketService.Instance.subject
 127       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
 128       .subscribe(
 129         msg => this.parseMessage(msg),
 130         err => console.error(err),
 131         () => console.log('complete')
 132       );
 133
 134     let listCommunitiesForm: ListCommunitiesForm = {
 135       sort: SortType[SortType.TopAll],
 136       limit: 9999,
 137     };
 138
 139     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 140   }
 141
 142   componentDidMount() {
 143     var textarea: any = document.getElementById(this.id);
 144     autosize(textarea);
 145     this.tribute.attach(textarea);
 146     textarea.addEventListener('tribute-replaced', () => {
 147       this.state.postForm.body = textarea.value;
 148       this.setState(this.state);
 149       autosize.update(textarea);
 150     });
 151     setupTippy();
 152   }
 153
 154   componentDidUpdate() {
 155     if (
 156       !this.state.loading &&
 157       (this.state.postForm.name ||
 158         this.state.postForm.url ||
 159         this.state.postForm.body)
 160     ) {
 161       window.onbeforeunload = () => true;
 162     } else {
 163       window.onbeforeunload = undefined;
 164     }
 165   }
 166
 167   componentWillUnmount() {
 168     this.subscription.unsubscribe();
 169     window.onbeforeunload = null;
 170   }
 171
 172   render() {
 173     return (
 174       <div>
 175         <Prompt
 176           when={
 177             !this.state.loading &&
 178             (this.state.postForm.name ||
 179               this.state.postForm.url ||
 180               this.state.postForm.body)
 181           }
 182           message={i18n.t('block_leaving')}
 183         />
 184         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
 185           <div class="form-group row">
 186             <label class="col-sm-2 col-form-label" htmlFor="post-url">
 187               {i18n.t('url')}
 188             </label>
 189             <div class="col-sm-10">
 190               <input
 191                 type="url"
 192                 id="post-url"
 193                 class="form-control"
 194                 value={this.state.postForm.url}
 195                 onInput={linkEvent(this, this.handlePostUrlChange)}
 196                 onPaste={linkEvent(this, this.handleImageUploadPaste)}
 197               />
 198               {this.state.suggestedTitle && (
 199                 <div
 200                   class="mt-1 text-muted small font-weight-bold pointer"
 201                   onClick={linkEvent(this, this.copySuggestedTitle)}
 202                 >
 203                   {i18n.t('copy_suggested_title', {
 204                     title: this.state.suggestedTitle,
 205                   })}
 206                 </div>
 207               )}
 208               <form>
 209                 <label
 210                   htmlFor="file-upload"
 211                   className={`${
 212                     UserService.Instance.user && 'pointer'
 213                   } d-inline-block float-right text-muted font-weight-bold`}
 214                   data-tippy-content={i18n.t('upload_image')}
 215                 >
 216                   <svg class="icon icon-inline">
 217                     <use xlinkHref="#icon-image"></use>
 218                   </svg>
 219                 </label>
 220                 <input
 221                   id="file-upload"
 222                   type="file"
 223                   accept="image/*,video/*"
 224                   name="file"
 225                   class="d-none"
 226                   disabled={!UserService.Instance.user}
 227                   onChange={linkEvent(this, this.handleImageUpload)}
 228                 />
 229               </form>
 230               {validURL(this.state.postForm.url) && (
 231                 <a
 232                   href={`${archiveUrl}/?run=1&url=${encodeURIComponent(
 233                     this.state.postForm.url
 234                   )}`}
 235                   target="_blank"
 236                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
 237                   rel="noopener"
 238                 >
 239                   {i18n.t('archive_link')}
 240                 </a>
 241               )}
 242               {this.state.imageLoading && (
 243                 <svg class="icon icon-spinner spin">
 244                   <use xlinkHref="#icon-spinner"></use>
 245                 </svg>
 246               )}
 247               {isImage(this.state.postForm.url) && (
 248                 <img src={this.state.postForm.url} class="img-fluid" />
 249               )}
 250               {this.state.crossPosts.length > 0 && (
 251                 <>
 252                   <div class="my-1 text-muted small font-weight-bold">
 253                     {i18n.t('cross_posts')}
 254                   </div>
 255                   <PostListings
 256                     showCommunity
 257                     posts={this.state.crossPosts}
 258                     enableDownvotes={this.props.enableDownvotes}
 259                     enableNsfw={this.props.enableNsfw}
 260                   />
 261                 </>
 262               )}
 263             </div>
 264           </div>
 265           <div class="form-group row">
 266             <label class="col-sm-2 col-form-label" htmlFor="post-title">
 267               {i18n.t('title')}
 268             </label>
 269             <div class="col-sm-10">
 270               <textarea
 271                 value={this.state.postForm.name}
 272                 id="post-title"
 273                 onInput={linkEvent(this, this.handlePostNameChange)}
 274                 class="form-control"
 275                 required
 276                 rows={2}
 277                 minLength={3}
 278                 maxLength={MAX_POST_TITLE_LENGTH}
 279               />
 280               {this.state.suggestedPosts.length > 0 && (
 281                 <>
 282                   <div class="my-1 text-muted small font-weight-bold">
 283                     {i18n.t('related_posts')}
 284                   </div>
 285                   <PostListings
 286                     posts={this.state.suggestedPosts}
 287                     enableDownvotes={this.props.enableDownvotes}
 288                     enableNsfw={this.props.enableNsfw}
 289                   />
 290                 </>
 291               )}
 292             </div>
 293           </div>
 294
 295           <div class="form-group row">
 296             <label class="col-sm-2 col-form-label" htmlFor={this.id}>
 297               {i18n.t('body')}
 298             </label>
 299             <div class="col-sm-10">
 300               <textarea
 301                 id={this.id}
 302                 value={this.state.postForm.body}
 303                 onInput={linkEvent(this, this.handlePostBodyChange)}
 304                 className={`form-control ${this.state.previewMode && 'd-none'}`}
 305                 rows={4}
 306                 maxLength={10000}
 307               />
 308               {this.state.previewMode && (
 309                 <div
 310                   className="card card-body md-div"
 311                   dangerouslySetInnerHTML={mdToHtml(this.state.postForm.body)}
 312                 />
 313               )}
 314               {this.state.postForm.body && (
 315                 <button
 316                   className={`mt-1 mr-2 btn btn-sm btn-secondary ${
 317                     this.state.previewMode && 'active'
 318                   }`}
 319                   onClick={linkEvent(this, this.handlePreviewToggle)}
 320                 >
 321                   {i18n.t('preview')}
 322                 </button>
 323               )}
 324               <a
 325                 href={markdownHelpUrl}
 326                 target="_blank"
 327                 rel="noopener"
 328                 class="d-inline-block float-right text-muted font-weight-bold"
 329                 title={i18n.t('formatting_help')}
 330               >
 331                 <svg class="icon icon-inline">
 332                   <use xlinkHref="#icon-help-circle"></use>
 333                 </svg>
 334               </a>
 335               <span
 336                 onClick={linkEvent(this, this.handleEmojiPickerClick)}
 337                 class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold"
 338                 data-tippy-content={i18n.t('emoji_picker')}
 339               >
 340                 <svg class="icon icon-inline">
 341                   <use xlinkHref="#icon-smile"></use>
 342                 </svg>
 343               </span>
 344             </div>
 345           </div>
 346           {!this.props.post && (
 347             <div class="form-group row">
 348               <label class="col-sm-2 col-form-label" htmlFor="post-community">
 349                 {i18n.t('community')}
 350               </label>
 351               <div class="col-sm-10">
 352                 <select
 353                   class="form-control"
 354                   id="post-community"
 355                   value={this.state.postForm.community_id}
 356                   onInput={linkEvent(this, this.handlePostCommunityChange)}
 357                 >
 358                   <option>{i18n.t('select_a_community')}</option>
 359                   {this.state.communities.map(community => (
 360                     <option value={community.id}>
 361                       {community.local
 362                         ? community.name
 363                         : `${hostname(community.actor_id)}/${community.name}`}
 364                     </option>
 365                   ))}
 366                 </select>
 367               </div>
 368             </div>
 369           )}
 370           {this.props.enableNsfw && (
 371             <div class="form-group row">
 372               <div class="col-sm-10">
 373                 <div class="form-check">
 374                   <input
 375                     class="form-check-input"
 376                     id="post-nsfw"
 377                     type="checkbox"
 378                     checked={this.state.postForm.nsfw}
 379                     onChange={linkEvent(this, this.handlePostNsfwChange)}
 380                   />
 381                   <label class="form-check-label" htmlFor="post-nsfw">
 382                     {i18n.t('nsfw')}
 383                   </label>
 384                 </div>
 385               </div>
 386             </div>
 387           )}
 388           <div class="form-group row">
 389             <div class="col-sm-10">
 390               <button
 391                 disabled={
 392                   !this.state.postForm.community_id || this.state.loading
 393                 }
 394                 type="submit"
 395                 class="btn btn-secondary mr-2"
 396               >
 397                 {this.state.loading ? (
 398                   <svg class="icon icon-spinner spin">
 399                     <use xlinkHref="#icon-spinner"></use>
 400                   </svg>
 401                 ) : this.props.post ? (
 402                   capitalizeFirstLetter(i18n.t('save'))
 403                 ) : (
 404                   capitalizeFirstLetter(i18n.t('create'))
 405                 )}
 406               </button>
 407               {this.props.post && (
 408                 <button
 409                   type="button"
 410                   class="btn btn-secondary"
 411                   onClick={linkEvent(this, this.handleCancel)}
 412                 >
 413                   {i18n.t('cancel')}
 414                 </button>
 415               )}
 416             </div>
 417           </div>
 418         </form>
 419       </div>
 420     );
 421   }
 422
 423   setupEmojiPicker() {
 424     emojiPicker.on('emoji', twemojiHtmlStr => {
 425       if (this.state.postForm.body == null) {
 426         this.state.postForm.body = '';
 427       }
 428       var el = document.createElement('div');
 429       el.innerHTML = twemojiHtmlStr;
 430       let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
 431       let shortName = `:${emojiShortName[nativeUnicode]}:`;
 432       this.state.postForm.body += shortName;
 433       this.setState(this.state);
 434     });
 435   }
 436
 437   handlePostSubmit(i: PostForm, event: any) {
 438     event.preventDefault();
 439
 440     // Coerce empty url string to undefined
 441     if (i.state.postForm.url && i.state.postForm.url === '') {
 442       i.state.postForm.url = undefined;
 443     }
 444
 445     if (i.props.post) {
 446       WebSocketService.Instance.editPost(i.state.postForm);
 447     } else {
 448       WebSocketService.Instance.createPost(i.state.postForm);
 449     }
 450     i.state.loading = true;
 451     i.setState(i.state);
 452   }
 453
 454   copySuggestedTitle(i: PostForm) {
 455     i.state.postForm.name = i.state.suggestedTitle.substring(
 456       0,
 457       MAX_POST_TITLE_LENGTH
 458     );
 459     i.state.suggestedTitle = undefined;
 460     i.setState(i.state);
 461   }
 462
 463   handlePostUrlChange(i: PostForm, event: any) {
 464     i.state.postForm.url = event.target.value;
 465     i.setState(i.state);
 466     i.fetchPageTitle();
 467   }
 468
 469   fetchPageTitle() {
 470     if (validURL(this.state.postForm.url)) {
 471       let form: SearchForm = {
 472         q: this.state.postForm.url,
 473         type_: SearchType[SearchType.Url],
 474         sort: SortType[SortType.TopAll],
 475         page: 1,
 476         limit: 6,
 477       };
 478
 479       WebSocketService.Instance.search(form);
 480
 481       // Fetch the page title
 482       getPageTitle(this.state.postForm.url).then(d => {
 483         this.state.suggestedTitle = d;
 484         this.setState(this.state);
 485       });
 486     } else {
 487       this.state.suggestedTitle = undefined;
 488       this.state.crossPosts = [];
 489     }
 490   }
 491
 492   handlePostNameChange(i: PostForm, event: any) {
 493     i.state.postForm.name = event.target.value;
 494     i.setState(i.state);
 495     i.fetchSimilarPosts();
 496   }
 497
 498   fetchSimilarPosts() {
 499     let form: SearchForm = {
 500       q: this.state.postForm.name,
 501       type_: SearchType[SearchType.Posts],
 502       sort: SortType[SortType.TopAll],
 503       community_id: this.state.postForm.community_id,
 504       page: 1,
 505       limit: 6,
 506     };
 507
 508     if (this.state.postForm.name !== '') {
 509       WebSocketService.Instance.search(form);
 510     } else {
 511       this.state.suggestedPosts = [];
 512     }
 513
 514     this.setState(this.state);
 515   }
 516
 517   handlePostBodyChange(i: PostForm, event: any) {
 518     i.state.postForm.body = event.target.value;
 519     i.setState(i.state);
 520   }
 521
 522   handlePostCommunityChange(i: PostForm, event: any) {
 523     i.state.postForm.community_id = Number(event.target.value);
 524     i.setState(i.state);
 525   }
 526
 527   handlePostNsfwChange(i: PostForm, event: any) {
 528     i.state.postForm.nsfw = event.target.checked;
 529     i.setState(i.state);
 530   }
 531
 532   handleCancel(i: PostForm) {
 533     i.props.onCancel();
 534   }
 535
 536   handlePreviewToggle(i: PostForm, event: any) {
 537     event.preventDefault();
 538     i.state.previewMode = !i.state.previewMode;
 539     i.setState(i.state);
 540   }
 541
 542   handleImageUploadPaste(i: PostForm, event: any) {
 543     let image = event.clipboardData.files[0];
 544     if (image) {
 545       i.handleImageUpload(i, image);
 546     }
 547   }
 548
 549   handleImageUpload(i: PostForm, event: any) {
 550     let file: any;
 551     if (event.target) {
 552       event.preventDefault();
 553       file = event.target.files[0];
 554     } else {
 555       file = event;
 556     }
 557
 558     const imageUploadUrl = `/pictrs/image`;
 559     const formData = new FormData();
 560     formData.append('images[]', file);
 561
 562     i.state.imageLoading = true;
 563     i.setState(i.state);
 564
 565     fetch(imageUploadUrl, {
 566       method: 'POST',
 567       body: formData,
 568     })
 569       .then(res => res.json())
 570       .then(res => {
 571         console.log('pictrs upload:');
 572         console.log(res);
 573         if (res.msg == 'ok') {
 574           let hash = res.files[0].file;
 575           let url = `${window.location.origin}/pictrs/image/${hash}`;
 576           let deleteToken = res.files[0].delete_token;
 577           let deleteUrl = `${window.location.origin}/pictrs/image/delete/${deleteToken}/${hash}`;
 578           i.state.postForm.url = url;
 579           i.state.imageLoading = false;
 580           i.setState(i.state);
 581           pictrsDeleteToast(
 582             i18n.t('click_to_delete_picture'),
 583             i18n.t('picture_deleted'),
 584             deleteUrl
 585           );
 586         } else {
 587           i.state.imageLoading = false;
 588           i.setState(i.state);
 589           toast(JSON.stringify(res), 'danger');
 590         }
 591       })
 592       .catch(error => {
 593         i.state.imageLoading = false;
 594         i.setState(i.state);
 595         toast(error, 'danger');
 596       });
 597   }
 598
 599   handleEmojiPickerClick(_i: PostForm, event: any) {
 600     emojiPicker.togglePicker(event.target);
 601   }
 602
 603   parseMessage(msg: WebSocketJsonResponse) {
 604     let res = wsJsonToRes(msg);
 605     if (msg.error) {
 606       toast(i18n.t(msg.error), 'danger');
 607       this.state.loading = false;
 608       this.setState(this.state);
 609       return;
 610     } else if (res.op == UserOperation.ListCommunities) {
 611       let data = res.data as ListCommunitiesResponse;
 612       this.state.communities = data.communities;
 613       if (this.props.post) {
 614         this.state.postForm.community_id = this.props.post.community_id;
 615       } else if (this.props.params && this.props.params.community) {
 616         let foundCommunityId = data.communities.find(
 617           r => r.name == this.props.params.community
 618         ).id;
 619         this.state.postForm.community_id = foundCommunityId;
 620       } else {
 621         // By default, the null valued 'Select a Community'
 622       }
 623       this.setState(this.state);
 624
 625       // Set up select searching
 626       let selectId: any = document.getElementById('post-community');
 627       if (selectId) {
 628         let selector = new Selectr(selectId, { nativeDropdown: false });
 629         selector.on('selectr.select', option => {
 630           this.state.postForm.community_id = Number(option.value);
 631           this.setState(this.state);
 632         });
 633       }
 634     } else if (res.op == UserOperation.CreatePost) {
 635       let data = res.data as PostResponse;
 636       if (data.post.creator_id == UserService.Instance.user.id) {
 637         this.state.loading = false;
 638         this.props.onCreate(data.post.id);
 639       }
 640     } else if (res.op == UserOperation.EditPost) {
 641       let data = res.data as PostResponse;
 642       if (data.post.creator_id == UserService.Instance.user.id) {
 643         this.state.loading = false;
 644         this.props.onEdit(data.post);
 645       }
 646     } else if (res.op == UserOperation.Search) {
 647       let data = res.data as SearchResponse;
 648
 649       if (data.type_ == SearchType[SearchType.Posts]) {
 650         this.state.suggestedPosts = data.posts;
 651       } else if (data.type_ == SearchType[SearchType.Url]) {
 652         this.state.crossPosts = data.posts;
 653       }
 654       this.setState(this.state);
 655     }
 656   }
 657 }