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   hostname,
  37   pictrsDeleteToast,
  38 } from '../utils';
  39 import autosize from 'autosize';
  40 import Tribute from 'tributejs/src/Tribute.js';
  41 import emojiShortName from 'emoji-short-name';
  42 import Choices from 'choices.js';
  43 import { i18n } from '../i18next';
  44
  45 const MAX_POST_TITLE_LENGTH = 200;
  46
  47 interface PostFormProps {
  48   post?: Post; // If a post is given, that means this is an edit
  49   params?: PostFormParams;
  50   onCancel?(): any;
  51   onCreate?(id: number): any;
  52   onEdit?(post: Post): any;
  53   enableNsfw: boolean;
  54   enableDownvotes: boolean;
  55 }
  56
  57 interface PostFormState {
  58   postForm: PostFormI;
  59   communities: Array<Community>;
  60   loading: boolean;
  61   imageLoading: boolean;
  62   previewMode: boolean;
  63   suggestedTitle: string;
  64   suggestedPosts: Array<Post>;
  65   crossPosts: Array<Post>;
  66 }
  67
  68 export class PostForm extends Component<PostFormProps, PostFormState> {
  69   private id = `post-form-${randomStr()}`;
  70   private tribute: Tribute;
  71   private subscription: Subscription;
  72   private choices: Choices;
  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
  99     this.state = this.emptyState;
 100
 101     if (this.props.post) {
 102       this.state.postForm = {
 103         body: this.props.post.body,
 104         // NOTE: debouncing breaks both these for some reason, unless you use defaultValue
 105         name: this.props.post.name,
 106         community_id: this.props.post.community_id,
 107         edit_id: this.props.post.id,
 108         creator_id: this.props.post.creator_id,
 109         url: this.props.post.url,
 110         nsfw: this.props.post.nsfw,
 111         auth: null,
 112       };
 113     }
 114
 115     if (this.props.params) {
 116       this.state.postForm.name = this.props.params.name;
 117       if (this.props.params.url) {
 118         this.state.postForm.url = this.props.params.url;
 119       }
 120       if (this.props.params.body) {
 121         this.state.postForm.body = this.props.params.body;
 122       }
 123     }
 124
 125     this.subscription = WebSocketService.Instance.subject
 126       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
 127       .subscribe(
 128         msg => this.parseMessage(msg),
 129         err => console.error(err),
 130         () => console.log('complete')
 131       );
 132
 133     let listCommunitiesForm: ListCommunitiesForm = {
 134       sort: SortType[SortType.TopAll],
 135       limit: 9999,
 136     };
 137
 138     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 139   }
 140
 141   componentDidMount() {
 142     var textarea: any = document.getElementById(this.id);
 143     autosize(textarea);
 144     this.tribute.attach(textarea);
 145     textarea.addEventListener('tribute-replaced', () => {
 146       this.state.postForm.body = textarea.value;
 147       this.setState(this.state);
 148       autosize.update(textarea);
 149     });
 150     setupTippy();
 151   }
 152
 153   componentDidUpdate() {
 154     if (
 155       !this.state.loading &&
 156       (this.state.postForm.name ||
 157         this.state.postForm.url ||
 158         this.state.postForm.body)
 159     ) {
 160       window.onbeforeunload = () => true;
 161     } else {
 162       window.onbeforeunload = undefined;
 163     }
 164   }
 165
 166   componentWillUnmount() {
 167     this.subscription.unsubscribe();
 168     this.choices.destroy();
 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             </div>
 336           </div>
 337           {!this.props.post && (
 338             <div class="form-group row">
 339               <label class="col-sm-2 col-form-label" htmlFor="post-community">
 340                 {i18n.t('community')}
 341               </label>
 342               <div class="col-sm-10">
 343                 <select
 344                   class="form-control"
 345                   id="post-community"
 346                   value={this.state.postForm.community_id}
 347                   onInput={linkEvent(this, this.handlePostCommunityChange)}
 348                 >
 349                   <option>{i18n.t('select_a_community')}</option>
 350                   {this.state.communities.map(community => (
 351                     <option value={community.id}>
 352                       {community.local
 353                         ? community.name
 354                         : `${hostname(community.actor_id)}/${community.name}`}
 355                     </option>
 356                   ))}
 357                 </select>
 358               </div>
 359             </div>
 360           )}
 361           {this.props.enableNsfw && (
 362             <div class="form-group row">
 363               <div class="col-sm-10">
 364                 <div class="form-check">
 365                   <input
 366                     class="form-check-input"
 367                     id="post-nsfw"
 368                     type="checkbox"
 369                     checked={this.state.postForm.nsfw}
 370                     onChange={linkEvent(this, this.handlePostNsfwChange)}
 371                   />
 372                   <label class="form-check-label" htmlFor="post-nsfw">
 373                     {i18n.t('nsfw')}
 374                   </label>
 375                 </div>
 376               </div>
 377             </div>
 378           )}
 379           <div class="form-group row">
 380             <div class="col-sm-10">
 381               <button
 382                 disabled={
 383                   !this.state.postForm.community_id || this.state.loading
 384                 }
 385                 type="submit"
 386                 class="btn btn-secondary mr-2"
 387               >
 388                 {this.state.loading ? (
 389                   <svg class="icon icon-spinner spin">
 390                     <use xlinkHref="#icon-spinner"></use>
 391                   </svg>
 392                 ) : this.props.post ? (
 393                   capitalizeFirstLetter(i18n.t('save'))
 394                 ) : (
 395                   capitalizeFirstLetter(i18n.t('create'))
 396                 )}
 397               </button>
 398               {this.props.post && (
 399                 <button
 400                   type="button"
 401                   class="btn btn-secondary"
 402                   onClick={linkEvent(this, this.handleCancel)}
 403                 >
 404                   {i18n.t('cancel')}
 405                 </button>
 406               )}
 407             </div>
 408           </div>
 409         </form>
 410       </div>
 411     );
 412   }
 413
 414   handlePostSubmit(i: PostForm, event: any) {
 415     event.preventDefault();
 416
 417     // Coerce empty url string to undefined
 418     if (i.state.postForm.url && i.state.postForm.url === '') {
 419       i.state.postForm.url = undefined;
 420     }
 421
 422     if (i.props.post) {
 423       WebSocketService.Instance.editPost(i.state.postForm);
 424     } else {
 425       WebSocketService.Instance.createPost(i.state.postForm);
 426     }
 427     i.state.loading = true;
 428     i.setState(i.state);
 429   }
 430
 431   copySuggestedTitle(i: PostForm) {
 432     i.state.postForm.name = i.state.suggestedTitle.substring(
 433       0,
 434       MAX_POST_TITLE_LENGTH
 435     );
 436     i.state.suggestedTitle = undefined;
 437     i.setState(i.state);
 438   }
 439
 440   handlePostUrlChange(i: PostForm, event: any) {
 441     i.state.postForm.url = event.target.value;
 442     i.setState(i.state);
 443     i.fetchPageTitle();
 444   }
 445
 446   fetchPageTitle() {
 447     if (validURL(this.state.postForm.url)) {
 448       let form: SearchForm = {
 449         q: this.state.postForm.url,
 450         type_: SearchType[SearchType.Url],
 451         sort: SortType[SortType.TopAll],
 452         page: 1,
 453         limit: 6,
 454       };
 455
 456       WebSocketService.Instance.search(form);
 457
 458       // Fetch the page title
 459       getPageTitle(this.state.postForm.url).then(d => {
 460         this.state.suggestedTitle = d;
 461         this.setState(this.state);
 462       });
 463     } else {
 464       this.state.suggestedTitle = undefined;
 465       this.state.crossPosts = [];
 466     }
 467   }
 468
 469   handlePostNameChange(i: PostForm, event: any) {
 470     i.state.postForm.name = event.target.value;
 471     i.setState(i.state);
 472     i.fetchSimilarPosts();
 473   }
 474
 475   fetchSimilarPosts() {
 476     let form: SearchForm = {
 477       q: this.state.postForm.name,
 478       type_: SearchType[SearchType.Posts],
 479       sort: SortType[SortType.TopAll],
 480       community_id: this.state.postForm.community_id,
 481       page: 1,
 482       limit: 6,
 483     };
 484
 485     if (this.state.postForm.name !== '') {
 486       WebSocketService.Instance.search(form);
 487     } else {
 488       this.state.suggestedPosts = [];
 489     }
 490
 491     this.setState(this.state);
 492   }
 493
 494   handlePostBodyChange(i: PostForm, event: any) {
 495     i.state.postForm.body = event.target.value;
 496     i.setState(i.state);
 497   }
 498
 499   handlePostCommunityChange(i: PostForm, event: any) {
 500     i.state.postForm.community_id = Number(event.target.value);
 501     i.setState(i.state);
 502   }
 503
 504   handlePostNsfwChange(i: PostForm, event: any) {
 505     i.state.postForm.nsfw = event.target.checked;
 506     i.setState(i.state);
 507   }
 508
 509   handleCancel(i: PostForm) {
 510     i.props.onCancel();
 511   }
 512
 513   handlePreviewToggle(i: PostForm, event: any) {
 514     event.preventDefault();
 515     i.state.previewMode = !i.state.previewMode;
 516     i.setState(i.state);
 517   }
 518
 519   handleImageUploadPaste(i: PostForm, event: any) {
 520     let image = event.clipboardData.files[0];
 521     if (image) {
 522       i.handleImageUpload(i, image);
 523     }
 524   }
 525
 526   handleImageUpload(i: PostForm, event: any) {
 527     let file: any;
 528     if (event.target) {
 529       event.preventDefault();
 530       file = event.target.files[0];
 531     } else {
 532       file = event;
 533     }
 534
 535     const imageUploadUrl = `/pictrs/image`;
 536     const formData = new FormData();
 537     formData.append('images[]', file);
 538
 539     i.state.imageLoading = true;
 540     i.setState(i.state);
 541
 542     fetch(imageUploadUrl, {
 543       method: 'POST',
 544       body: formData,
 545     })
 546       .then(res => res.json())
 547       .then(res => {
 548         console.log('pictrs upload:');
 549         console.log(res);
 550         if (res.msg == 'ok') {
 551           let hash = res.files[0].file;
 552           let url = `${window.location.origin}/pictrs/image/${hash}`;
 553           let deleteToken = res.files[0].delete_token;
 554           let deleteUrl = `${window.location.origin}/pictrs/image/delete/${deleteToken}/${hash}`;
 555           i.state.postForm.url = url;
 556           i.state.imageLoading = false;
 557           i.setState(i.state);
 558           pictrsDeleteToast(
 559             i18n.t('click_to_delete_picture'),
 560             i18n.t('picture_deleted'),
 561             deleteUrl
 562           );
 563         } else {
 564           i.state.imageLoading = false;
 565           i.setState(i.state);
 566           toast(JSON.stringify(res), 'danger');
 567         }
 568       })
 569       .catch(error => {
 570         i.state.imageLoading = false;
 571         i.setState(i.state);
 572         toast(error, 'danger');
 573       });
 574   }
 575
 576   parseMessage(msg: WebSocketJsonResponse) {
 577     let res = wsJsonToRes(msg);
 578     if (msg.error) {
 579       toast(i18n.t(msg.error), 'danger');
 580       this.state.loading = false;
 581       this.setState(this.state);
 582       return;
 583     } else if (res.op == UserOperation.ListCommunities) {
 584       let data = res.data as ListCommunitiesResponse;
 585       this.state.communities = data.communities;
 586       if (this.props.post) {
 587         this.state.postForm.community_id = this.props.post.community_id;
 588       } else if (this.props.params && this.props.params.community) {
 589         let foundCommunityId = data.communities.find(
 590           r => r.name == this.props.params.community
 591         ).id;
 592         this.state.postForm.community_id = foundCommunityId;
 593       } else {
 594         // By default, the null valued 'Select a Community'
 595       }
 596       this.setState(this.state);
 597
 598       // Set up select searching
 599       let selectId: any = document.getElementById('post-community');
 600       if (selectId) {
 601         this.choices = new Choices(selectId, {
 602           shouldSort: false,
 603           classNames: {
 604             containerOuter: 'choices',
 605             containerInner: 'choices__inner bg-secondary border-0',
 606             input: 'form-control',
 607             inputCloned: 'choices__input--cloned',
 608             list: 'choices__list',
 609             listItems: 'choices__list--multiple',
 610             listSingle: 'choices__list--single',
 611             listDropdown: 'choices__list--dropdown',
 612             item: 'choices__item bg-secondary',
 613             itemSelectable: 'choices__item--selectable',
 614             itemDisabled: 'choices__item--disabled',
 615             itemChoice: 'choices__item--choice',
 616             placeholder: 'choices__placeholder',
 617             group: 'choices__group',
 618             groupHeading: 'choices__heading',
 619             button: 'choices__button',
 620             activeState: 'is-active',
 621             focusState: 'is-focused',
 622             openState: 'is-open',
 623             disabledState: 'is-disabled',
 624             highlightedState: 'text-info',
 625             selectedState: 'text-info',
 626             flippedState: 'is-flipped',
 627             loadingState: 'is-loading',
 628             noResults: 'has-no-results',
 629             noChoices: 'has-no-choices',
 630           },
 631         });
 632         this.choices.passedElement.element.addEventListener(
 633           'choice',
 634           (e: any) => {
 635             this.state.postForm.community_id = Number(e.detail.choice.value);
 636             this.setState(this.state);
 637           },
 638           false
 639         );
 640       }
 641     } else if (res.op == UserOperation.CreatePost) {
 642       let data = res.data as PostResponse;
 643       if (data.post.creator_id == UserService.Instance.user.id) {
 644         this.state.loading = false;
 645         this.props.onCreate(data.post.id);
 646       }
 647     } else if (res.op == UserOperation.EditPost) {
 648       let data = res.data as PostResponse;
 649       if (data.post.creator_id == UserService.Instance.user.id) {
 650         this.state.loading = false;
 651         this.props.onEdit(data.post);
 652       }
 653     } else if (res.op == UserOperation.Search) {
 654       let data = res.data as SearchResponse;
 655
 656       if (data.type_ == SearchType[SearchType.Posts]) {
 657         this.state.suggestedPosts = data.posts;
 658       } else if (data.type_ == SearchType[SearchType.Url]) {
 659         this.state.crossPosts = data.posts;
 660       }
 661       this.setState(this.state);
 662     }
 663   }
 664 }