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