src/shared/components/post/post-form.tsx

   1 import { None, Option, Some } from "@sniptt/monads";
   2 import autosize from "autosize";
   3 import { Component, linkEvent } from "inferno";
   4 import { Prompt } from "inferno-router";
   5 import {
   6   CommunityView,
   7   CreatePost,
   8   EditPost,
   9   Language,
  10   ListingType,
  11   PostResponse,
  12   PostView,
  13   Search,
  14   SearchResponse,
  15   SearchType,
  16   SortType,
  17   toUndefined,
  18   UserOperation,
  19   wsJsonToRes,
  20   wsUserOp,
  21 } from "lemmy-js-client";
  22 import { Subscription } from "rxjs";
  23 import { pictrsUri } from "../../env";
  24 import { i18n } from "../../i18next";
  25 import { PostFormParams } from "../../interfaces";
  26 import { UserService, WebSocketService } from "../../services";
  27 import {
  28   archiveTodayUrl,
  29   auth,
  30   capitalizeFirstLetter,
  31   choicesConfig,
  32   communitySelectName,
  33   communityToChoice,
  34   debounce,
  35   fetchCommunities,
  36   getSiteMetadata,
  37   ghostArchiveUrl,
  38   isBrowser,
  39   isImage,
  40   myFirstDiscussionLanguageId,
  41   pictrsDeleteToast,
  42   relTags,
  43   setupTippy,
  44   toast,
  45   trendingFetchLimit,
  46   validTitle,
  47   validURL,
  48   webArchiveUrl,
  49   wsClient,
  50   wsSubscribe,
  51 } from "../../utils";
  52 import { Icon, Spinner } from "../common/icon";
  53 import { LanguageSelect } from "../common/language-select";
  54 import { MarkdownTextArea } from "../common/markdown-textarea";
  55 import { PostListings } from "./post-listings";
  56
  57 var Choices: any;
  58 if (isBrowser()) {
  59   Choices = require("choices.js");
  60 }
  61
  62 const MAX_POST_TITLE_LENGTH = 200;
  63
  64 interface PostFormProps {
  65   post_view: Option<PostView>; // If a post is given, that means this is an edit
  66   allLanguages: Language[];
  67   communities: Option<CommunityView[]>;
  68   params: Option<PostFormParams>;
  69   onCancel?(): any;
  70   onCreate?(post: PostView): any;
  71   onEdit?(post: PostView): any;
  72   enableNsfw?: boolean;
  73   enableDownvotes?: boolean;
  74 }
  75
  76 interface PostFormState {
  77   postForm: CreatePost;
  78   suggestedTitle: Option<string>;
  79   suggestedPosts: Option<PostView[]>;
  80   crossPosts: Option<PostView[]>;
  81   loading: boolean;
  82   imageLoading: boolean;
  83   previewMode: boolean;
  84 }
  85
  86 export class PostForm extends Component<PostFormProps, PostFormState> {
  87   private subscription: Subscription;
  88   private choices: any;
  89   private emptyState: PostFormState = {
  90     postForm: new CreatePost({
  91       community_id: undefined,
  92       name: undefined,
  93       nsfw: Some(false),
  94       url: None,
  95       body: None,
  96       honeypot: None,
  97       language_id: None,
  98       auth: undefined,
  99     }),
 100     loading: false,
 101     imageLoading: false,
 102     previewMode: false,
 103     suggestedTitle: None,
 104     suggestedPosts: None,
 105     crossPosts: None,
 106   };
 107
 108   constructor(props: any, context: any) {
 109     super(props, context);
 110     this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this));
 111     this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this));
 112     this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
 113     this.handleLanguageChange = this.handleLanguageChange.bind(this);
 114
 115     this.state = this.emptyState;
 116
 117     this.parseMessage = this.parseMessage.bind(this);
 118     this.subscription = wsSubscribe(this.parseMessage);
 119
 120     // Means its an edit
 121     if (this.props.post_view.isSome()) {
 122       let pv = this.props.post_view.unwrap();
 123
 124       this.state = {
 125         ...this.state,
 126         postForm: new CreatePost({
 127           body: pv.post.body,
 128           name: pv.post.name,
 129           community_id: pv.community.id,
 130           url: pv.post.url,
 131           nsfw: Some(pv.post.nsfw),
 132           honeypot: None,
 133           language_id: Some(pv.post.language_id),
 134           auth: auth().unwrap(),
 135         }),
 136       };
 137     }
 138
 139     if (this.props.params.isSome()) {
 140       let params = this.props.params.unwrap();
 141       this.state = {
 142         ...this.state,
 143         postForm: {
 144           ...this.state.postForm,
 145           name: toUndefined(params.name),
 146           url: params.url,
 147           body: params.body,
 148         },
 149       };
 150     }
 151   }
 152
 153   componentDidMount() {
 154     setupTippy();
 155     this.setupCommunities();
 156     let textarea: any = document.getElementById("post-title");
 157     if (textarea) {
 158       autosize(textarea);
 159     }
 160   }
 161
 162   componentDidUpdate() {
 163     if (
 164       !this.state.loading &&
 165       (this.state.postForm.name ||
 166         this.state.postForm.url.isSome() ||
 167         this.state.postForm.body.isSome())
 168     ) {
 169       window.onbeforeunload = () => true;
 170     } else {
 171       window.onbeforeunload = undefined;
 172     }
 173   }
 174
 175   componentWillUnmount() {
 176     this.subscription.unsubscribe();
 177     /* this.choices && this.choices.destroy(); */
 178     window.onbeforeunload = null;
 179   }
 180
 181   render() {
 182     let selectedLangs = this.state.postForm.language_id
 183       .or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo))
 184       .map(Array.of);
 185
 186     return (
 187       <div>
 188         <Prompt
 189           when={
 190             !this.state.loading &&
 191             (this.state.postForm.name ||
 192               this.state.postForm.url.isSome() ||
 193               this.state.postForm.body.isSome())
 194           }
 195           message={i18n.t("block_leaving")}
 196         />
 197         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
 198           <div className="form-group row">
 199             <label className="col-sm-2 col-form-label" htmlFor="post-url">
 200               {i18n.t("url")}
 201             </label>
 202             <div className="col-sm-10">
 203               <input
 204                 type="url"
 205                 id="post-url"
 206                 className="form-control"
 207                 value={toUndefined(this.state.postForm.url)}
 208                 onInput={linkEvent(this, this.handlePostUrlChange)}
 209                 onPaste={linkEvent(this, this.handleImageUploadPaste)}
 210               />
 211               {this.state.suggestedTitle.match({
 212                 some: title => (
 213                   <div
 214                     className="mt-1 text-muted small font-weight-bold pointer"
 215                     role="button"
 216                     onClick={linkEvent(this, this.copySuggestedTitle)}
 217                   >
 218                     {i18n.t("copy_suggested_title", { title: "" })} {title}
 219                   </div>
 220                 ),
 221                 none: <></>,
 222               })}
 223               <form>
 224                 <label
 225                   htmlFor="file-upload"
 226                   className={`${
 227                     UserService.Instance.myUserInfo.isSome() && "pointer"
 228                   } d-inline-block float-right text-muted font-weight-bold`}
 229                   data-tippy-content={i18n.t("upload_image")}
 230                 >
 231                   <Icon icon="image" classes="icon-inline" />
 232                 </label>
 233                 <input
 234                   id="file-upload"
 235                   type="file"
 236                   accept="image/*,video/*"
 237                   name="file"
 238                   className="d-none"
 239                   disabled={UserService.Instance.myUserInfo.isNone()}
 240                   onChange={linkEvent(this, this.handleImageUpload)}
 241                 />
 242               </form>
 243               {this.state.postForm.url.match({
 244                 some: url =>
 245                   validURL(url) && (
 246                     <div>
 247                       <a
 248                         href={`${webArchiveUrl}/save/${encodeURIComponent(
 249                           url
 250                         )}`}
 251                         className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
 252                         rel={relTags}
 253                       >
 254                         archive.org {i18n.t("archive_link")}
 255                       </a>
 256                       <a
 257                         href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
 258                           url
 259                         )}`}
 260                         className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
 261                         rel={relTags}
 262                       >
 263                         ghostarchive.org {i18n.t("archive_link")}
 264                       </a>
 265                       <a
 266                         href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
 267                           url
 268                         )}`}
 269                         className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
 270                         rel={relTags}
 271                       >
 272                         archive.today {i18n.t("archive_link")}
 273                       </a>
 274                     </div>
 275                   ),
 276                 none: <></>,
 277               })}
 278               {this.state.imageLoading && <Spinner />}
 279               {this.state.postForm.url.match({
 280                 some: url =>
 281                   isImage(url) && (
 282                     <img src={url} className="img-fluid" alt="" />
 283                   ),
 284                 none: <></>,
 285               })}
 286               {this.state.crossPosts.match({
 287                 some: xPosts =>
 288                   xPosts.length > 0 && (
 289                     <>
 290                       <div className="my-1 text-muted small font-weight-bold">
 291                         {i18n.t("cross_posts")}
 292                       </div>
 293                       <PostListings
 294                         showCommunity
 295                         posts={xPosts}
 296                         enableDownvotes={this.props.enableDownvotes}
 297                         enableNsfw={this.props.enableNsfw}
 298                         allLanguages={this.props.allLanguages}
 299                       />
 300                     </>
 301                   ),
 302                 none: <></>,
 303               })}
 304             </div>
 305           </div>
 306           <div className="form-group row">
 307             <label className="col-sm-2 col-form-label" htmlFor="post-title">
 308               {i18n.t("title")}
 309             </label>
 310             <div className="col-sm-10">
 311               <textarea
 312                 value={this.state.postForm.name}
 313                 id="post-title"
 314                 onInput={linkEvent(this, this.handlePostNameChange)}
 315                 className={`form-control ${
 316                   !validTitle(this.state.postForm.name) && "is-invalid"
 317                 }`}
 318                 required
 319                 rows={1}
 320                 minLength={3}
 321                 maxLength={MAX_POST_TITLE_LENGTH}
 322               />
 323               {!validTitle(this.state.postForm.name) && (
 324                 <div className="invalid-feedback">
 325                   {i18n.t("invalid_post_title")}
 326                 </div>
 327               )}
 328               {this.state.suggestedPosts.match({
 329                 some: sPosts =>
 330                   sPosts.length > 0 && (
 331                     <>
 332                       <div className="my-1 text-muted small font-weight-bold">
 333                         {i18n.t("related_posts")}
 334                       </div>
 335                       <PostListings
 336                         showCommunity
 337                         posts={sPosts}
 338                         enableDownvotes={this.props.enableDownvotes}
 339                         enableNsfw={this.props.enableNsfw}
 340                         allLanguages={this.props.allLanguages}
 341                       />
 342                     </>
 343                   ),
 344                 none: <></>,
 345               })}
 346             </div>
 347           </div>
 348
 349           <div className="form-group row">
 350             <label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
 351             <div className="col-sm-10">
 352               <MarkdownTextArea
 353                 initialContent={this.state.postForm.body}
 354                 initialLanguageId={None}
 355                 onContentChange={this.handlePostBodyChange}
 356                 placeholder={None}
 357                 buttonTitle={None}
 358                 maxLength={None}
 359                 allLanguages={this.props.allLanguages}
 360               />
 361             </div>
 362           </div>
 363           {this.props.post_view.isNone() && (
 364             <div className="form-group row">
 365               <label
 366                 className="col-sm-2 col-form-label"
 367                 htmlFor="post-community"
 368               >
 369                 {i18n.t("community")}
 370               </label>
 371               <div className="col-sm-10">
 372                 <select
 373                   className="form-control"
 374                   id="post-community"
 375                   value={this.state.postForm.community_id}
 376                   onInput={linkEvent(this, this.handlePostCommunityChange)}
 377                 >
 378                   <option>{i18n.t("select_a_community")}</option>
 379                   {this.props.communities.unwrapOr([]).map(cv => (
 380                     <option key={cv.community.id} value={cv.community.id}>
 381                       {communitySelectName(cv)}
 382                     </option>
 383                   ))}
 384                 </select>
 385               </div>
 386             </div>
 387           )}
 388           {this.props.enableNsfw && (
 389             <div className="form-group row">
 390               <legend className="col-form-label col-sm-2 pt-0">
 391                 {i18n.t("nsfw")}
 392               </legend>
 393               <div className="col-sm-10">
 394                 <div className="form-check">
 395                   <input
 396                     className="form-check-input position-static"
 397                     id="post-nsfw"
 398                     type="checkbox"
 399                     checked={toUndefined(this.state.postForm.nsfw)}
 400                     onChange={linkEvent(this, this.handlePostNsfwChange)}
 401                   />
 402                 </div>
 403               </div>
 404             </div>
 405           )}
 406           <LanguageSelect
 407             allLanguages={this.props.allLanguages}
 408             selectedLanguageIds={selectedLangs}
 409             multiple={false}
 410             onChange={this.handleLanguageChange}
 411           />
 412           <input
 413             tabIndex={-1}
 414             autoComplete="false"
 415             name="a_password"
 416             type="text"
 417             className="form-control honeypot"
 418             id="register-honey"
 419             value={toUndefined(this.state.postForm.honeypot)}
 420             onInput={linkEvent(this, this.handleHoneyPotChange)}
 421           />
 422           <div className="form-group row">
 423             <div className="col-sm-10">
 424               <button
 425                 disabled={
 426                   !this.state.postForm.community_id || this.state.loading
 427                 }
 428                 type="submit"
 429                 className="btn btn-secondary mr-2"
 430               >
 431                 {this.state.loading ? (
 432                   <Spinner />
 433                 ) : this.props.post_view.isSome() ? (
 434                   capitalizeFirstLetter(i18n.t("save"))
 435                 ) : (
 436                   capitalizeFirstLetter(i18n.t("create"))
 437                 )}
 438               </button>
 439               {this.props.post_view.isSome() && (
 440                 <button
 441                   type="button"
 442                   className="btn btn-secondary"
 443                   onClick={linkEvent(this, this.handleCancel)}
 444                 >
 445                   {i18n.t("cancel")}
 446                 </button>
 447               )}
 448             </div>
 449           </div>
 450         </form>
 451       </div>
 452     );
 453   }
 454
 455   handlePostSubmit(i: PostForm, event: any) {
 456     event.preventDefault();
 457
 458     i.setState({ loading: true });
 459
 460     // Coerce empty url string to undefined
 461     if (
 462       i.state.postForm.url.isSome() &&
 463       i.state.postForm.url.unwrapOr("blank") === ""
 464     ) {
 465       i.setState(s => ((s.postForm.url = None), s));
 466     }
 467
 468     let pForm = i.state.postForm;
 469     i.props.post_view.match({
 470       some: pv => {
 471         let form = new EditPost({
 472           name: Some(pForm.name),
 473           url: pForm.url,
 474           body: pForm.body,
 475           nsfw: pForm.nsfw,
 476           post_id: pv.post.id,
 477           language_id: Some(pv.post.language_id),
 478           auth: auth().unwrap(),
 479         });
 480         WebSocketService.Instance.send(wsClient.editPost(form));
 481       },
 482       none: () => {
 483         i.setState(s => ((s.postForm.auth = auth().unwrap()), s));
 484         let form = new CreatePost({ ...i.state.postForm });
 485         WebSocketService.Instance.send(wsClient.createPost(form));
 486       },
 487     });
 488   }
 489
 490   copySuggestedTitle(i: PostForm) {
 491     i.state.suggestedTitle.match({
 492       some: sTitle => {
 493         i.setState(
 494           s => (
 495             (s.postForm.name = sTitle.substring(0, MAX_POST_TITLE_LENGTH)), s
 496           )
 497         );
 498         i.setState({ suggestedTitle: None });
 499         setTimeout(() => {
 500           let textarea: any = document.getElementById("post-title");
 501           autosize.update(textarea);
 502         }, 10);
 503       },
 504       none: void 0,
 505     });
 506   }
 507
 508   handlePostUrlChange(i: PostForm, event: any) {
 509     i.setState(s => ((s.postForm.url = Some(event.target.value)), s));
 510     i.fetchPageTitle();
 511   }
 512
 513   fetchPageTitle() {
 514     this.state.postForm.url.match({
 515       some: url => {
 516         if (validURL(url)) {
 517           let form = new Search({
 518             q: url,
 519             community_id: None,
 520             community_name: None,
 521             creator_id: None,
 522             type_: Some(SearchType.Url),
 523             sort: Some(SortType.TopAll),
 524             listing_type: Some(ListingType.All),
 525             page: Some(1),
 526             limit: Some(trendingFetchLimit),
 527             auth: auth(false).ok(),
 528           });
 529
 530           WebSocketService.Instance.send(wsClient.search(form));
 531
 532           // Fetch the page title
 533           getSiteMetadata(url).then(d => {
 534             this.setState({ suggestedTitle: d.metadata.title });
 535           });
 536         } else {
 537           this.setState({ suggestedTitle: None, crossPosts: None });
 538         }
 539       },
 540       none: void 0,
 541     });
 542   }
 543
 544   handlePostNameChange(i: PostForm, event: any) {
 545     i.setState(s => ((s.postForm.name = event.target.value), s));
 546     i.fetchSimilarPosts();
 547   }
 548
 549   fetchSimilarPosts() {
 550     let form = new Search({
 551       q: this.state.postForm.name,
 552       type_: Some(SearchType.Posts),
 553       sort: Some(SortType.TopAll),
 554       listing_type: Some(ListingType.All),
 555       community_id: Some(this.state.postForm.community_id),
 556       community_name: None,
 557       creator_id: None,
 558       page: Some(1),
 559       limit: Some(trendingFetchLimit),
 560       auth: auth(false).ok(),
 561     });
 562
 563     if (this.state.postForm.name !== "") {
 564       WebSocketService.Instance.send(wsClient.search(form));
 565     } else {
 566       this.setState({ suggestedPosts: None });
 567     }
 568   }
 569
 570   handlePostBodyChange(val: string) {
 571     this.setState(s => ((s.postForm.body = Some(val)), s));
 572   }
 573
 574   handlePostCommunityChange(i: PostForm, event: any) {
 575     i.setState(
 576       s => ((s.postForm.community_id = Number(event.target.value)), s)
 577     );
 578   }
 579
 580   handlePostNsfwChange(i: PostForm, event: any) {
 581     i.setState(s => ((s.postForm.nsfw = Some(event.target.checked)), s));
 582   }
 583
 584   handleLanguageChange(val: number[]) {
 585     this.setState(s => ((s.postForm.language_id = Some(val[0])), s));
 586   }
 587
 588   handleHoneyPotChange(i: PostForm, event: any) {
 589     i.setState(s => ((s.postForm.honeypot = Some(event.target.value)), s));
 590   }
 591
 592   handleCancel(i: PostForm) {
 593     i.props.onCancel();
 594   }
 595
 596   handlePreviewToggle(i: PostForm, event: any) {
 597     event.preventDefault();
 598     i.setState({ previewMode: !i.state.previewMode });
 599   }
 600
 601   handleImageUploadPaste(i: PostForm, event: any) {
 602     let image = event.clipboardData.files[0];
 603     if (image) {
 604       i.handleImageUpload(i, image);
 605     }
 606   }
 607
 608   handleImageUpload(i: PostForm, event: any) {
 609     let file: any;
 610     if (event.target) {
 611       event.preventDefault();
 612       file = event.target.files[0];
 613     } else {
 614       file = event;
 615     }
 616
 617     const formData = new FormData();
 618     formData.append("images[]", file);
 619
 620     i.setState({ imageLoading: true });
 621
 622     fetch(pictrsUri, {
 623       method: "POST",
 624       body: formData,
 625     })
 626       .then(res => res.json())
 627       .then(res => {
 628         console.log("pictrs upload:");
 629         console.log(res);
 630         if (res.msg == "ok") {
 631           let hash = res.files[0].file;
 632           let url = `${pictrsUri}/${hash}`;
 633           let deleteToken = res.files[0].delete_token;
 634           let deleteUrl = `${pictrsUri}/delete/${deleteToken}/${hash}`;
 635           i.state.postForm.url = Some(url);
 636           i.setState({ imageLoading: false });
 637           pictrsDeleteToast(
 638             i18n.t("click_to_delete_picture"),
 639             i18n.t("picture_deleted"),
 640             deleteUrl
 641           );
 642         } else {
 643           i.setState({ imageLoading: false });
 644           toast(JSON.stringify(res), "danger");
 645         }
 646       })
 647       .catch(error => {
 648         i.setState({ imageLoading: false });
 649         console.error(error);
 650         toast(error, "danger");
 651       });
 652   }
 653
 654   setupCommunities() {
 655     // Set up select searching
 656     if (isBrowser()) {
 657       let selectId: any = document.getElementById("post-community");
 658       if (selectId) {
 659         this.choices = new Choices(selectId, choicesConfig);
 660         this.choices.passedElement.element.addEventListener(
 661           "choice",
 662           (e: any) => {
 663             this.setState(
 664               s => (
 665                 (s.postForm.community_id = Number(e.detail.choice.value)), s
 666               )
 667             );
 668           },
 669           false
 670         );
 671         this.choices.passedElement.element.addEventListener(
 672           "search",
 673           debounce(async (e: any) => {
 674             try {
 675               let communities = (await fetchCommunities(e.detail.value))
 676                 .communities;
 677               this.choices.setChoices(
 678                 communities.map(cv => communityToChoice(cv)),
 679                 "value",
 680                 "label",
 681                 true
 682               );
 683             } catch (err) {
 684               console.log(err);
 685             }
 686           }),
 687           false
 688         );
 689       }
 690     }
 691
 692     this.props.post_view.match({
 693       some: pv =>
 694         this.setState(s => ((s.postForm.community_id = pv.community.id), s)),
 695       none: void 0,
 696     });
 697     this.props.params.match({
 698       some: params =>
 699         params.nameOrId.match({
 700           some: nameOrId =>
 701             nameOrId.match({
 702               left: name => {
 703                 let foundCommunityId = this.props.communities
 704                   .unwrapOr([])
 705                   .find(r => r.community.name == name).community.id;
 706                 this.setState(
 707                   s => ((s.postForm.community_id = foundCommunityId), s)
 708                 );
 709               },
 710               right: id =>
 711                 this.setState(s => ((s.postForm.community_id = id), s)),
 712             }),
 713           none: void 0,
 714         }),
 715       none: void 0,
 716     });
 717
 718     if (isBrowser() && this.state.postForm.community_id) {
 719       this.choices.setChoiceByValue(
 720         this.state.postForm.community_id.toString()
 721       );
 722     }
 723     this.setState(this.state);
 724   }
 725
 726   parseMessage(msg: any) {
 727     let op = wsUserOp(msg);
 728     console.log(msg);
 729     if (msg.error) {
 730       // Errors handled by top level pages
 731       // toast(i18n.t(msg.error), "danger");
 732       this.setState({ loading: false });
 733       return;
 734     } else if (op == UserOperation.CreatePost) {
 735       let data = wsJsonToRes<PostResponse>(msg, PostResponse);
 736       UserService.Instance.myUserInfo.match({
 737         some: mui => {
 738           if (data.post_view.creator.id == mui.local_user_view.person.id) {
 739             this.props.onCreate(data.post_view);
 740           }
 741         },
 742         none: void 0,
 743       });
 744     } else if (op == UserOperation.EditPost) {
 745       let data = wsJsonToRes<PostResponse>(msg, PostResponse);
 746       UserService.Instance.myUserInfo.match({
 747         some: mui => {
 748           if (data.post_view.creator.id == mui.local_user_view.person.id) {
 749             this.setState({ loading: false });
 750             this.props.onEdit(data.post_view);
 751           }
 752         },
 753         none: void 0,
 754       });
 755     } else if (op == UserOperation.Search) {
 756       let data = wsJsonToRes<SearchResponse>(msg, SearchResponse);
 757
 758       if (data.type_ == SearchType[SearchType.Posts]) {
 759         this.setState({ suggestedPosts: Some(data.posts) });
 760       } else if (data.type_ == SearchType[SearchType.Url]) {
 761         this.setState({ crossPosts: Some(data.posts) });
 762       }
 763     }
 764   }
 765 }