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