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 { Icon, Spinner } from "./icon";
   6 import { Subscription } from "rxjs";
   7 import {
   8   CreatePost,
   9   EditPost,
  10   PostView,
  11   PostResponse,
  12   UserOperation,
  13   CommunityView,
  14   SortType,
  15   Search,
  16   SearchType,
  17   SearchResponse,
  18 } from "lemmy-js-client";
  19 import { WebSocketService, UserService } from "../services";
  20 import { PostFormParams } from "../interfaces";
  21 import {
  22   wsJsonToRes,
  23   getPageTitle,
  24   validURL,
  25   capitalizeFirstLetter,
  26   archiveUrl,
  27   debounce,
  28   isImage,
  29   toast,
  30   setupTippy,
  31   hostname,
  32   pictrsDeleteToast,
  33   validTitle,
  34   wsSubscribe,
  35   isBrowser,
  36   wsUserOp,
  37   wsClient,
  38   authField,
  39 } from "../utils";
  40 import autosize from "autosize";
  41
  42 var Choices;
  43 if (isBrowser()) {
  44   Choices = require("choices.js");
  45 }
  46
  47 import { i18n } from "../i18next";
  48 import { pictrsUri } from "../env";
  49
  50 const MAX_POST_TITLE_LENGTH = 200;
  51
  52 interface PostFormProps {
  53   post_view?: PostView; // If a post is given, that means this is an edit
  54   communities?: CommunityView[];
  55   params?: PostFormParams;
  56   onCancel?(): any;
  57   onCreate?(post: PostView): any;
  58   onEdit?(post: PostView): any;
  59   enableNsfw: boolean;
  60   enableDownvotes: boolean;
  61 }
  62
  63 interface PostFormState {
  64   postForm: CreatePost;
  65   loading: boolean;
  66   imageLoading: boolean;
  67   previewMode: boolean;
  68   suggestedTitle: string;
  69   suggestedPosts: PostView[];
  70   crossPosts: PostView[];
  71 }
  72
  73 export class PostForm extends Component<PostFormProps, PostFormState> {
  74   private subscription: Subscription;
  75   private choices: any;
  76   private emptyState: PostFormState = {
  77     postForm: {
  78       community_id: null,
  79       name: null,
  80       nsfw: false,
  81       auth: authField(false),
  82     },
  83     loading: false,
  84     imageLoading: false,
  85     previewMode: false,
  86     suggestedTitle: undefined,
  87     suggestedPosts: [],
  88     crossPosts: [],
  89   };
  90
  91   constructor(props: any, context: any) {
  92     super(props, context);
  93     this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this));
  94     this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this));
  95     this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
  96
  97     this.state = this.emptyState;
  98
  99     // Means its an edit
 100     if (this.props.post_view) {
 101       this.state.postForm = {
 102         body: this.props.post_view.post.body,
 103         name: this.props.post_view.post.name,
 104         community_id: this.props.post_view.community.id,
 105         url: this.props.post_view.post.url,
 106         nsfw: this.props.post_view.post.nsfw,
 107         auth: authField(),
 108       };
 109     }
 110
 111     if (this.props.params) {
 112       this.state.postForm.name = this.props.params.name;
 113       if (this.props.params.url) {
 114         this.state.postForm.url = this.props.params.url;
 115       }
 116       if (this.props.params.body) {
 117         this.state.postForm.body = this.props.params.body;
 118       }
 119     }
 120
 121     this.parseMessage = this.parseMessage.bind(this);
 122     this.subscription = wsSubscribe(this.parseMessage);
 123   }
 124
 125   componentDidMount() {
 126     setupTippy();
 127     this.setupCommunities();
 128     let textarea: any = document.getElementById("post-title");
 129     if (textarea) {
 130       autosize(textarea);
 131     }
 132   }
 133
 134   componentDidUpdate() {
 135     if (
 136       !this.state.loading &&
 137       (this.state.postForm.name ||
 138         this.state.postForm.url ||
 139         this.state.postForm.body)
 140     ) {
 141       window.onbeforeunload = () => true;
 142     } else {
 143       window.onbeforeunload = undefined;
 144     }
 145   }
 146
 147   componentWillUnmount() {
 148     this.subscription.unsubscribe();
 149     /* this.choices && this.choices.destroy(); */
 150     window.onbeforeunload = null;
 151   }
 152
 153   render() {
 154     return (
 155       <div>
 156         <Prompt
 157           when={
 158             !this.state.loading &&
 159             (this.state.postForm.name ||
 160               this.state.postForm.url ||
 161               this.state.postForm.body)
 162           }
 163           message={i18n.t("block_leaving")}
 164         />
 165         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
 166           <div class="form-group row">
 167             <label class="col-sm-2 col-form-label" htmlFor="post-url">
 168               {i18n.t("url")}
 169             </label>
 170             <div class="col-sm-10">
 171               <input
 172                 type="url"
 173                 id="post-url"
 174                 class="form-control"
 175                 value={this.state.postForm.url}
 176                 onInput={linkEvent(this, this.handlePostUrlChange)}
 177                 onPaste={linkEvent(this, this.handleImageUploadPaste)}
 178               />
 179               {this.state.suggestedTitle && (
 180                 <div
 181                   class="mt-1 text-muted small font-weight-bold pointer"
 182                   role="button"
 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.localUserView && "pointer"
 195                   } d-inline-block float-right text-muted font-weight-bold`}
 196                   data-tippy-content={i18n.t("upload_image")}
 197                 >
 198                   <Icon icon="image" classes="icon-inline" />
 199                 </label>
 200                 <input
 201                   id="file-upload"
 202                   type="file"
 203                   accept="image/*,video/*"
 204                   name="file"
 205                   class="d-none"
 206                   disabled={!UserService.Instance.localUserView}
 207                   onChange={linkEvent(this, this.handleImageUpload)}
 208                 />
 209               </form>
 210               {this.state.postForm.url && validURL(this.state.postForm.url) && (
 211                 <a
 212                   href={`${archiveUrl}/?run=1&url=${encodeURIComponent(
 213                     this.state.postForm.url
 214                   )}`}
 215                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
 216                   rel="noopener"
 217                 >
 218                   {i18n.t("archive_link")}
 219                 </a>
 220               )}
 221               {this.state.imageLoading && <Spinner />}
 222               {isImage(this.state.postForm.url) && (
 223                 <img src={this.state.postForm.url} class="img-fluid" alt="" />
 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={1}
 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">{i18n.t("body")}</label>
 279             <div class="col-sm-10">
 280               <MarkdownTextArea
 281                 initialContent={this.state.postForm.body}
 282                 onContentChange={this.handlePostBodyChange}
 283               />
 284             </div>
 285           </div>
 286           {!this.props.post_view && (
 287             <div class="form-group row">
 288               <label class="col-sm-2 col-form-label" htmlFor="post-community">
 289                 {i18n.t("community")}
 290               </label>
 291               <div class="col-sm-10">
 292                 <select
 293                   class="form-control"
 294                   id="post-community"
 295                   value={this.state.postForm.community_id}
 296                   onInput={linkEvent(this, this.handlePostCommunityChange)}
 297                 >
 298                   <option>{i18n.t("select_a_community")}</option>
 299                   {this.props.communities.map(cv => (
 300                     <option value={cv.community.id}>
 301                       {cv.community.local
 302                         ? cv.community.name
 303                         : `${hostname(cv.community.actor_id)}/${
 304                             cv.community.name
 305                           }`}
 306                     </option>
 307                   ))}
 308                 </select>
 309               </div>
 310             </div>
 311           )}
 312           {this.props.enableNsfw && (
 313             <div class="form-group row">
 314               <div class="col-sm-10">
 315                 <div class="form-check">
 316                   <input
 317                     class="form-check-input"
 318                     id="post-nsfw"
 319                     type="checkbox"
 320                     checked={this.state.postForm.nsfw}
 321                     onChange={linkEvent(this, this.handlePostNsfwChange)}
 322                   />
 323                   <label class="form-check-label" htmlFor="post-nsfw">
 324                     {i18n.t("nsfw")}
 325                   </label>
 326                 </div>
 327               </div>
 328             </div>
 329           )}
 330           <div class="form-group row">
 331             <div class="col-sm-10">
 332               <button
 333                 disabled={
 334                   !this.state.postForm.community_id || this.state.loading
 335                 }
 336                 type="submit"
 337                 class="btn btn-secondary mr-2"
 338               >
 339                 {this.state.loading ? (
 340                   <Spinner />
 341                 ) : this.props.post_view ? (
 342                   capitalizeFirstLetter(i18n.t("save"))
 343                 ) : (
 344                   capitalizeFirstLetter(i18n.t("create"))
 345                 )}
 346               </button>
 347               {this.props.post_view && (
 348                 <button
 349                   type="button"
 350                   class="btn btn-secondary"
 351                   onClick={linkEvent(this, this.handleCancel)}
 352                 >
 353                   {i18n.t("cancel")}
 354                 </button>
 355               )}
 356             </div>
 357           </div>
 358         </form>
 359       </div>
 360     );
 361   }
 362
 363   handlePostSubmit(i: PostForm, event: any) {
 364     event.preventDefault();
 365
 366     // Coerce empty url string to undefined
 367     if (i.state.postForm.url !== undefined && i.state.postForm.url === "") {
 368       i.state.postForm.url = undefined;
 369     }
 370
 371     if (i.props.post_view) {
 372       let form: EditPost = {
 373         ...i.state.postForm,
 374         post_id: i.props.post_view.post.id,
 375       };
 376       WebSocketService.Instance.send(wsClient.editPost(form));
 377     } else {
 378       WebSocketService.Instance.send(wsClient.createPost(i.state.postForm));
 379     }
 380     i.state.loading = true;
 381     i.setState(i.state);
 382   }
 383
 384   copySuggestedTitle(i: PostForm) {
 385     i.state.postForm.name = i.state.suggestedTitle.substring(
 386       0,
 387       MAX_POST_TITLE_LENGTH
 388     );
 389     i.state.suggestedTitle = undefined;
 390     setTimeout(() => {
 391       let textarea: any = document.getElementById("post-title");
 392       autosize.update(textarea);
 393     }, 10);
 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: authField(false),
 412       };
 413
 414       WebSocketService.Instance.send(wsClient.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: authField(false),
 442     };
 443
 444     if (this.state.postForm.name !== "") {
 445       WebSocketService.Instance.send(wsClient.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     console.log(msg);
 610     if (msg.error) {
 611       toast(i18n.t(msg.error), "danger");
 612       this.state.loading = false;
 613       this.setState(this.state);
 614       return;
 615     } else if (op == UserOperation.CreatePost) {
 616       let data = wsJsonToRes<PostResponse>(msg).data;
 617       if (
 618         data.post_view.creator.id ==
 619         UserService.Instance.localUserView.person.id
 620       ) {
 621         this.state.loading = false;
 622         this.props.onCreate(data.post_view);
 623       }
 624     } else if (op == UserOperation.EditPost) {
 625       let data = wsJsonToRes<PostResponse>(msg).data;
 626       if (
 627         data.post_view.creator.id ==
 628         UserService.Instance.localUserView.person.id
 629       ) {
 630         this.state.loading = false;
 631         this.props.onEdit(data.post_view);
 632       }
 633     } else if (op == UserOperation.Search) {
 634       let data = wsJsonToRes<SearchResponse>(msg).data;
 635
 636       if (data.type_ == SearchType[SearchType.Posts]) {
 637         this.state.suggestedPosts = data.posts;
 638       } else if (data.type_ == SearchType[SearchType.Url]) {
 639         this.state.crossPosts = data.posts;
 640       }
 641       this.setState(this.state);
 642     }
 643   }
 644 }