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