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