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