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