]> Untitled Git - lemmy-ui.git/blobdiff - src/shared/components/post/post-form.tsx
Changing all bigints to numbers
[lemmy-ui.git] / src / shared / components / post / post-form.tsx
index 9badb746d45108157830ed7c3664b8d2153c1852..ef168374a7b1e87e3cab9f631334bf55cac8e0fc 100644 (file)
@@ -2,136 +2,154 @@ import autosize from "autosize";
 import { Component, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
-  CommunityView,
   CreatePost,
   EditPost,
-  ListingType,
+  Language,
   PostResponse,
   PostView,
   Search,
   SearchResponse,
-  SearchType,
-  SortType,
   UserOperation,
+  wsJsonToRes,
+  wsUserOp,
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
-import { pictrsUri } from "../../env";
 import { i18n } from "../../i18next";
 import { PostFormParams } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
 import {
+  Choice,
   archiveTodayUrl,
-  authField,
   capitalizeFirstLetter,
-  choicesConfig,
-  communitySelectName,
   communityToChoice,
   debounce,
   fetchCommunities,
+  getIdFromString,
   getSiteMetadata,
   ghostArchiveUrl,
-  isBrowser,
   isImage,
+  myAuth,
   pictrsDeleteToast,
   relTags,
   setupTippy,
   toast,
+  trendingFetchLimit,
+  uploadImage,
   validTitle,
   validURL,
   webArchiveUrl,
   wsClient,
-  wsJsonToRes,
   wsSubscribe,
-  wsUserOp,
 } from "../../utils";
 import { Icon, Spinner } from "../common/icon";
+import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import { SearchableSelect } from "../common/searchable-select";
 import { PostListings } from "./post-listings";
 
-var Choices: any;
-if (isBrowser()) {
-  Choices = require("choices.js");
-}
-
 const MAX_POST_TITLE_LENGTH = 200;
 
 interface PostFormProps {
   post_view?: PostView; // If a post is given, that means this is an edit
-  communities?: CommunityView[];
+  allLanguages: Language[];
+  siteLanguages: number[];
   params?: PostFormParams;
   onCancel?(): any;
   onCreate?(post: PostView): any;
   onEdit?(post: PostView): any;
-  enableNsfw: boolean;
-  enableDownvotes: boolean;
+  enableNsfw?: boolean;
+  enableDownvotes?: boolean;
+  selectedCommunityChoice?: Choice;
+  onSelectCommunity?: (choice: Choice) => void;
 }
 
 interface PostFormState {
-  postForm: CreatePost;
+  form: {
+    name?: string;
+    url?: string;
+    body?: string;
+    nsfw?: boolean;
+    language_id?: number;
+    community_id?: number;
+    honeypot?: string;
+  };
+  suggestedTitle?: string;
+  suggestedPosts?: PostView[];
+  crossPosts?: PostView[];
   loading: boolean;
   imageLoading: boolean;
+  communitySearchLoading: boolean;
+  communitySearchOptions: Choice[];
   previewMode: boolean;
-  suggestedTitle: string;
-  suggestedPosts: PostView[];
-  crossPosts: PostView[];
 }
 
 export class PostForm extends Component<PostFormProps, PostFormState> {
-  private subscription: Subscription;
-  private choices: any;
-  private emptyState: PostFormState = {
-    postForm: {
-      community_id: null,
-      name: null,
-      nsfw: false,
-      auth: authField(false),
-    },
+  private subscription?: Subscription;
+  state: PostFormState = {
+    form: {},
     loading: false,
     imageLoading: false,
+    communitySearchLoading: false,
     previewMode: false,
-    suggestedTitle: undefined,
-    suggestedPosts: [],
-    crossPosts: [],
+    communitySearchOptions: [],
   };
 
-  constructor(props: any, context: any) {
+  constructor(props: PostFormProps, context: any) {
     super(props, context);
     this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this));
     this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this));
     this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
+    this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    this.handleCommunitySelect = this.handleCommunitySelect.bind(this);
 
-    this.state = this.emptyState;
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);
 
     // Means its an edit
-    if (this.props.post_view) {
-      this.state.postForm = {
-        body: this.props.post_view.post.body,
-        name: this.props.post_view.post.name,
-        community_id: this.props.post_view.community.id,
-        url: this.props.post_view.post.url,
-        nsfw: this.props.post_view.post.nsfw,
-        auth: authField(),
+    const pv = this.props.post_view;
+    if (pv) {
+      this.state = {
+        ...this.state,
+        form: {
+          body: pv.post.body,
+          name: pv.post.name,
+          community_id: pv.community.id,
+          url: pv.post.url,
+          nsfw: pv.post.nsfw,
+          language_id: pv.post.language_id,
+        },
       };
     }
 
-    if (this.props.params) {
-      this.state.postForm.name = this.props.params.name;
-      if (this.props.params.url) {
-        this.state.postForm.url = this.props.params.url;
-      }
-      if (this.props.params.body) {
-        this.state.postForm.body = this.props.params.body;
-      }
+    const selectedCommunityChoice = this.props.selectedCommunityChoice;
+
+    if (selectedCommunityChoice) {
+      this.state = {
+        ...this.state,
+        form: {
+          ...this.state.form,
+          community_id: getIdFromString(selectedCommunityChoice.value),
+        },
+        communitySearchOptions: [selectedCommunityChoice],
+      };
     }
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    const params = this.props.params;
+    if (params) {
+      this.state = {
+        ...this.state,
+        form: {
+          ...this.state.form,
+          ...params,
+        },
+      };
+    }
   }
 
   componentDidMount() {
     setupTippy();
-    this.setupCommunities();
-    let textarea: any = document.getElementById("post-title");
+    const textarea: any = document.getElementById("post-title");
+
     if (textarea) {
       autosize(textarea);
     }
@@ -140,57 +158,71 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   componentDidUpdate() {
     if (
       !this.state.loading &&
-      (this.state.postForm.name ||
-        this.state.postForm.url ||
-        this.state.postForm.body)
+      (this.state.form.name || this.state.form.url || this.state.form.body)
     ) {
       window.onbeforeunload = () => true;
     } else {
-      window.onbeforeunload = undefined;
+      window.onbeforeunload = null;
     }
   }
 
   componentWillUnmount() {
-    this.subscription.unsubscribe();
+    this.subscription?.unsubscribe();
     /* this.choices && this.choices.destroy(); */
     window.onbeforeunload = null;
   }
 
+  static getDerivedStateFromProps(
+    { selectedCommunityChoice }: PostFormProps,
+    { form, ...restState }: PostFormState
+  ) {
+    return {
+      ...restState,
+      form: {
+        ...form,
+        community_id: getIdFromString(selectedCommunityChoice?.value),
+      },
+    };
+  }
+
   render() {
+    let firstLang = this.state.form.language_id;
+    let selectedLangs = firstLang ? Array.of(firstLang) : undefined;
+
+    let url = this.state.form.url;
     return (
       <div>
         <Prompt
           when={
             !this.state.loading &&
-            (this.state.postForm.name ||
-              this.state.postForm.url ||
-              this.state.postForm.body)
+            (this.state.form.name ||
+              this.state.form.url ||
+              this.state.form.body)
           }
           message={i18n.t("block_leaving")}
         />
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
-          <div class="form-group row">
-            <label class="col-sm-2 col-form-label" htmlFor="post-url">
+          <div className="form-group row">
+            <label className="col-sm-2 col-form-label" htmlFor="post-url">
               {i18n.t("url")}
             </label>
-            <div class="col-sm-10">
+            <div className="col-sm-10">
               <input
                 type="url"
                 id="post-url"
-                class="form-control"
-                value={this.state.postForm.url}
+                className="form-control"
+                value={this.state.form.url}
                 onInput={linkEvent(this, this.handlePostUrlChange)}
                 onPaste={linkEvent(this, this.handleImageUploadPaste)}
               />
               {this.state.suggestedTitle && (
                 <div
-                  class="mt-1 text-muted small font-weight-bold pointer"
+                  className="mt-1 text-muted small font-weight-bold pointer"
                   role="button"
                   onClick={linkEvent(this, this.copySuggestedTitle)}
                 >
-                  {i18n.t("copy_suggested_title", {
-                    title: this.state.suggestedTitle,
-                  })}
+                  {i18n.t("copy_suggested_title", { title: "" })}{" "}
+                  {this.state.suggestedTitle}
                 </div>
               )}
               <form>
@@ -208,36 +240,34 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   type="file"
                   accept="image/*,video/*"
                   name="file"
-                  class="d-none"
+                  className="d-none"
                   disabled={!UserService.Instance.myUserInfo}
                   onChange={linkEvent(this, this.handleImageUpload)}
                 />
               </form>
-              {this.state.postForm.url && validURL(this.state.postForm.url) && (
+              {url && validURL(url) && (
                 <div>
                   <a
-                    href={`${webArchiveUrl}/save/${encodeURIComponent(
-                      this.state.postForm.url
-                    )}`}
-                    class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
+                    href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
+                    className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                     rel={relTags}
                   >
                     archive.org {i18n.t("archive_link")}
                   </a>
                   <a
                     href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
-                      this.state.postForm.url
+                      url
                     )}`}
-                    class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
+                    className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                     rel={relTags}
                   >
                     ghostarchive.org {i18n.t("archive_link")}
                   </a>
                   <a
                     href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
-                      this.state.postForm.url
+                      url
                     )}`}
-                    class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
+                    className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                     rel={relTags}
                   >
                     archive.today {i18n.t("archive_link")}
@@ -245,12 +275,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 </div>
               )}
               {this.state.imageLoading && <Spinner />}
-              {isImage(this.state.postForm.url) && (
-                <img src={this.state.postForm.url} class="img-fluid" alt="" />
+              {url && isImage(url) && (
+                <img src={url} className="img-fluid" alt="" />
               )}
-              {this.state.crossPosts.length > 0 && (
+              {this.state.crossPosts && this.state.crossPosts.length > 0 && (
                 <>
-                  <div class="my-1 text-muted small font-weight-bold">
+                  <div className="my-1 text-muted small font-weight-bold">
                     {i18n.t("cross_posts")}
                   </div>
                   <PostListings
@@ -258,115 +288,132 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                     posts={this.state.crossPosts}
                     enableDownvotes={this.props.enableDownvotes}
                     enableNsfw={this.props.enableNsfw}
+                    allLanguages={this.props.allLanguages}
+                    siteLanguages={this.props.siteLanguages}
                   />
                 </>
               )}
             </div>
           </div>
-          <div class="form-group row">
-            <label class="col-sm-2 col-form-label" htmlFor="post-title">
+          <div className="form-group row">
+            <label className="col-sm-2 col-form-label" htmlFor="post-title">
               {i18n.t("title")}
             </label>
-            <div class="col-sm-10">
+            <div className="col-sm-10">
               <textarea
-                value={this.state.postForm.name}
+                value={this.state.form.name}
                 id="post-title"
                 onInput={linkEvent(this, this.handlePostNameChange)}
-                class={`form-control ${
-                  !validTitle(this.state.postForm.name) && "is-invalid"
+                className={`form-control ${
+                  !validTitle(this.state.form.name) && "is-invalid"
                 }`}
                 required
                 rows={1}
                 minLength={3}
                 maxLength={MAX_POST_TITLE_LENGTH}
               />
-              {!validTitle(this.state.postForm.name) && (
-                <div class="invalid-feedback">
+              {!validTitle(this.state.form.name) && (
+                <div className="invalid-feedback">
                   {i18n.t("invalid_post_title")}
                 </div>
               )}
-              {this.state.suggestedPosts.length > 0 && (
-                <>
-                  <div class="my-1 text-muted small font-weight-bold">
-                    {i18n.t("related_posts")}
-                  </div>
-                  <PostListings
-                    posts={this.state.suggestedPosts}
-                    enableDownvotes={this.props.enableDownvotes}
-                    enableNsfw={this.props.enableNsfw}
-                  />
-                </>
-              )}
+              {this.state.suggestedPosts &&
+                this.state.suggestedPosts.length > 0 && (
+                  <>
+                    <div className="my-1 text-muted small font-weight-bold">
+                      {i18n.t("related_posts")}
+                    </div>
+                    <PostListings
+                      showCommunity
+                      posts={this.state.suggestedPosts}
+                      enableDownvotes={this.props.enableDownvotes}
+                      enableNsfw={this.props.enableNsfw}
+                      allLanguages={this.props.allLanguages}
+                      siteLanguages={this.props.siteLanguages}
+                    />
+                  </>
+                )}
             </div>
           </div>
 
-          <div class="form-group row">
-            <label class="col-sm-2 col-form-label">{i18n.t("body")}</label>
-            <div class="col-sm-10">
+          <div className="form-group row">
+            <label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
+            <div className="col-sm-10">
               <MarkdownTextArea
-                initialContent={this.state.postForm.body}
+                initialContent={this.state.form.body}
                 onContentChange={this.handlePostBodyChange}
+                allLanguages={this.props.allLanguages}
+                siteLanguages={this.props.siteLanguages}
               />
             </div>
           </div>
           {!this.props.post_view && (
-            <div class="form-group row">
-              <label class="col-sm-2 col-form-label" htmlFor="post-community">
+            <div className="form-group row">
+              <label
+                className="col-sm-2 col-form-label"
+                htmlFor="post-community"
+              >
                 {i18n.t("community")}
               </label>
-              <div class="col-sm-10">
-                <select
-                  class="form-control"
+              <div className="col-sm-10">
+                <SearchableSelect
                   id="post-community"
-                  value={this.state.postForm.community_id}
-                  onInput={linkEvent(this, this.handlePostCommunityChange)}
-                >
-                  <option>{i18n.t("select_a_community")}</option>
-                  {this.props.communities.map(cv => (
-                    <option value={cv.community.id}>
-                      {communitySelectName(cv)}
-                    </option>
-                  ))}
-                </select>
+                  value={this.state.form.community_id}
+                  options={[
+                    {
+                      label: i18n.t("select_a_community"),
+                      value: "",
+                      disabled: true,
+                    } as Choice,
+                  ].concat(this.state.communitySearchOptions)}
+                  loading={this.state.communitySearchLoading}
+                  onChange={this.handleCommunitySelect}
+                  onSearch={this.handleCommunitySearch}
+                />
               </div>
             </div>
           )}
           {this.props.enableNsfw && (
-            <div class="form-group row">
-              <legend class="col-form-label col-sm-2 pt-0">
+            <div className="form-group row">
+              <legend className="col-form-label col-sm-2 pt-0">
                 {i18n.t("nsfw")}
               </legend>
-              <div class="col-sm-10">
-                <div class="form-check">
+              <div className="col-sm-10">
+                <div className="form-check">
                   <input
-                    class="form-check-input position-static"
+                    className="form-check-input position-static"
                     id="post-nsfw"
                     type="checkbox"
-                    checked={this.state.postForm.nsfw}
+                    checked={this.state.form.nsfw}
                     onChange={linkEvent(this, this.handlePostNsfwChange)}
                   />
                 </div>
               </div>
             </div>
           )}
+          <LanguageSelect
+            allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
+            selectedLanguageIds={selectedLangs}
+            multiple={false}
+            onChange={this.handleLanguageChange}
+          />
           <input
             tabIndex={-1}
             autoComplete="false"
             name="a_password"
             type="text"
-            class="form-control honeypot"
+            className="form-control honeypot"
             id="register-honey"
-            value={this.state.postForm.honeypot}
+            value={this.state.form.honeypot}
             onInput={linkEvent(this, this.handleHoneyPotChange)}
           />
-          <div class="form-group row">
-            <div class="col-sm-10">
+          <div className="form-group row">
+            <div className="col-sm-10">
               <button
-                disabled={
-                  !this.state.postForm.community_id || this.state.loading
-                }
+                disabled={!this.state.form.community_id || this.state.loading}
                 type="submit"
-                class="btn btn-secondary mr-2"
+                className="btn btn-secondary mr-2"
               >
                 {this.state.loading ? (
                   <Spinner />
@@ -379,7 +426,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.props.post_view && (
                 <button
                   type="button"
-                  class="btn btn-secondary"
+                  className="btn btn-secondary"
                   onClick={linkEvent(this, this.handleCancel)}
                 >
                   {i18n.t("cancel")}
@@ -395,123 +442,141 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   handlePostSubmit(i: PostForm, event: any) {
     event.preventDefault();
 
+    i.setState({ loading: true });
+
     // Coerce empty url string to undefined
-    if (i.state.postForm.url !== undefined && i.state.postForm.url === "") {
-      i.state.postForm.url = undefined;
+    if ((i.state.form.url ?? "blank") === "") {
+      i.setState(s => ((s.form.url = undefined), s));
     }
 
-    if (i.props.post_view) {
-      let form: EditPost = {
-        ...i.state.postForm,
-        post_id: i.props.post_view.post.id,
-      };
-      WebSocketService.Instance.send(wsClient.editPost(form));
-    } else {
-      WebSocketService.Instance.send(wsClient.createPost(i.state.postForm));
+    let pForm = i.state.form;
+    let pv = i.props.post_view;
+    let auth = myAuth();
+    if (auth) {
+      if (pv) {
+        let form: EditPost = {
+          name: pForm.name,
+          url: pForm.url,
+          body: pForm.body,
+          nsfw: pForm.nsfw,
+          post_id: pv.post.id,
+          language_id: pv.post.language_id,
+          auth,
+        };
+        WebSocketService.Instance.send(wsClient.editPost(form));
+      } else {
+        if (pForm.name && pForm.community_id) {
+          let form: CreatePost = {
+            name: pForm.name,
+            community_id: pForm.community_id,
+            url: pForm.url,
+            body: pForm.body,
+            nsfw: pForm.nsfw,
+            language_id: pForm.language_id,
+            honeypot: pForm.honeypot,
+            auth,
+          };
+          WebSocketService.Instance.send(wsClient.createPost(form));
+        }
+      }
     }
-    i.state.loading = true;
-    i.setState(i.state);
   }
 
   copySuggestedTitle(i: PostForm) {
-    i.state.postForm.name = i.state.suggestedTitle.substring(
-      0,
-      MAX_POST_TITLE_LENGTH
-    );
-    i.state.suggestedTitle = undefined;
-    setTimeout(() => {
-      let textarea: any = document.getElementById("post-title");
-      autosize.update(textarea);
-    }, 10);
-    i.setState(i.state);
+    let sTitle = i.state.suggestedTitle;
+    if (sTitle) {
+      i.setState(
+        s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s)
+      );
+      i.setState({ suggestedTitle: undefined });
+      setTimeout(() => {
+        let textarea: any = document.getElementById("post-title");
+        autosize.update(textarea);
+      }, 10);
+    }
   }
 
   handlePostUrlChange(i: PostForm, event: any) {
-    i.state.postForm.url = event.target.value;
-    i.setState(i.state);
+    i.setState(s => ((s.form.url = event.target.value), s));
     i.fetchPageTitle();
   }
 
   fetchPageTitle() {
-    if (validURL(this.state.postForm.url)) {
+    let url = this.state.form.url;
+    if (url && validURL(url)) {
       let form: Search = {
-        q: this.state.postForm.url,
-        type_: SearchType.Url,
-        sort: SortType.TopAll,
-        listing_type: ListingType.All,
+        q: url,
+        type_: "Url",
+        sort: "TopAll",
+        listing_type: "All",
         page: 1,
-        limit: 6,
-        auth: authField(false),
+        limit: trendingFetchLimit,
+        auth: myAuth(false),
       };
 
       WebSocketService.Instance.send(wsClient.search(form));
 
       // Fetch the page title
-      getSiteMetadata(this.state.postForm.url).then(d => {
-        this.state.suggestedTitle = d.metadata.title;
-        this.setState(this.state);
+      getSiteMetadata(url).then(d => {
+        this.setState({ suggestedTitle: d.metadata.title });
       });
     } else {
-      this.state.suggestedTitle = undefined;
-      this.state.crossPosts = [];
+      this.setState({ suggestedTitle: undefined, crossPosts: undefined });
     }
   }
 
   handlePostNameChange(i: PostForm, event: any) {
-    i.state.postForm.name = event.target.value;
-    i.setState(i.state);
+    i.setState(s => ((s.form.name = event.target.value), s));
     i.fetchSimilarPosts();
   }
 
   fetchSimilarPosts() {
-    let form: Search = {
-      q: this.state.postForm.name,
-      type_: SearchType.Posts,
-      sort: SortType.TopAll,
-      listing_type: ListingType.All,
-      community_id: this.state.postForm.community_id,
-      page: 1,
-      limit: 6,
-      auth: authField(false),
-    };
+    let q = this.state.form.name;
+    if (q && q !== "") {
+      let form: Search = {
+        q,
+        type_: "Posts",
+        sort: "TopAll",
+        listing_type: "All",
+        community_id: this.state.form.community_id,
+        page: 1,
+        limit: trendingFetchLimit,
+        auth: myAuth(false),
+      };
 
-    if (this.state.postForm.name !== "") {
       WebSocketService.Instance.send(wsClient.search(form));
     } else {
-      this.state.suggestedPosts = [];
+      this.setState({ suggestedPosts: undefined });
     }
-
-    this.setState(this.state);
   }
 
   handlePostBodyChange(val: string) {
-    this.state.postForm.body = val;
-    this.setState(this.state);
+    this.setState(s => ((s.form.body = val), s));
   }
 
   handlePostCommunityChange(i: PostForm, event: any) {
-    i.state.postForm.community_id = Number(event.target.value);
-    i.setState(i.state);
+    i.setState(s => ((s.form.community_id = Number(event.target.value)), s));
   }
 
   handlePostNsfwChange(i: PostForm, event: any) {
-    i.state.postForm.nsfw = event.target.checked;
-    i.setState(i.state);
+    i.setState(s => ((s.form.nsfw = event.target.checked), s));
+  }
+
+  handleLanguageChange(val: number[]) {
+    this.setState(s => ((s.form.language_id = val.at(0)), s));
   }
 
   handleHoneyPotChange(i: PostForm, event: any) {
-    i.state.postForm.honeypot = event.target.value;
-    i.setState(i.state);
+    i.setState(s => ((s.form.honeypot = event.target.value), s));
   }
 
   handleCancel(i: PostForm) {
-    i.props.onCancel();
+    i.props.onCancel?.();
   }
 
   handlePreviewToggle(i: PostForm, event: any) {
     event.preventDefault();
-    i.state.previewMode = !i.state.previewMode;
-    i.setState(i.state);
+    i.setState({ previewMode: !i.state.previewMode });
   }
 
   handleImageUploadPaste(i: PostForm, event: any) {
@@ -530,143 +595,93 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       file = event;
     }
 
-    const formData = new FormData();
-    formData.append("images[]", file);
-
-    i.state.imageLoading = true;
-    i.setState(i.state);
+    i.setState({ imageLoading: true });
 
-    fetch(pictrsUri, {
-      method: "POST",
-      body: formData,
-    })
-      .then(res => res.json())
+    uploadImage(file)
       .then(res => {
         console.log("pictrs upload:");
         console.log(res);
-        if (res.msg == "ok") {
-          let hash = res.files[0].file;
-          let url = `${pictrsUri}/${hash}`;
-          let deleteToken = res.files[0].delete_token;
-          let deleteUrl = `${pictrsUri}/delete/${deleteToken}/${hash}`;
-          i.state.postForm.url = url;
-          i.state.imageLoading = false;
-          i.setState(i.state);
-          pictrsDeleteToast(
-            i18n.t("click_to_delete_picture"),
-            i18n.t("picture_deleted"),
-            deleteUrl
-          );
+        if (res.msg === "ok") {
+          i.state.form.url = res.url;
+          i.setState({ imageLoading: false });
+          pictrsDeleteToast(file.name, res.delete_url as string);
         } else {
-          i.state.imageLoading = false;
-          i.setState(i.state);
+          i.setState({ imageLoading: false });
           toast(JSON.stringify(res), "danger");
         }
       })
       .catch(error => {
-        i.state.imageLoading = false;
-        i.setState(i.state);
+        i.setState({ imageLoading: false });
         console.error(error);
         toast(error, "danger");
       });
   }
 
-  setupCommunities() {
-    // Set up select searching
-    if (isBrowser()) {
-      let selectId: any = document.getElementById("post-community");
-      if (selectId) {
-        this.choices = new Choices(selectId, choicesConfig);
-        this.choices.passedElement.element.addEventListener(
-          "choice",
-          (e: any) => {
-            this.state.postForm.community_id = Number(e.detail.choice.value);
-            this.setState(this.state);
-          },
-          false
-        );
-        this.choices.passedElement.element.addEventListener(
-          "search",
-          debounce(async (e: any) => {
-            try {
-              let communities = (await fetchCommunities(e.detail.value))
-                .communities;
-              this.choices.setChoices(
-                communities.map(cv => communityToChoice(cv)),
-                "value",
-                "label",
-                true
-              );
-            } catch (err) {
-              console.log(err);
-            }
-          }, 400),
-          false
-        );
-      }
+  handleCommunitySearch = debounce(async (text: string) => {
+    const { selectedCommunityChoice } = this.props;
+    this.setState({ communitySearchLoading: true });
+
+    const newOptions: Choice[] = [];
+
+    if (selectedCommunityChoice) {
+      newOptions.push(selectedCommunityChoice);
     }
 
-    if (this.props.post_view) {
-      this.state.postForm.community_id = this.props.post_view.community.id;
-    } else if (
-      this.props.params &&
-      (this.props.params.community_id || this.props.params.community_name)
-    ) {
-      if (this.props.params.community_name) {
-        let foundCommunityId = this.props.communities.find(
-          r => r.community.name == this.props.params.community_name
-        ).community.id;
-        this.state.postForm.community_id = foundCommunityId;
-      } else if (this.props.params.community_id) {
-        this.state.postForm.community_id = this.props.params.community_id;
-      }
+    if (text.length > 0) {
+      newOptions.push(
+        ...(await fetchCommunities(text)).communities.map(communityToChoice)
+      );
 
-      if (isBrowser()) {
-        this.choices.setChoiceByValue(
-          this.state.postForm.community_id.toString()
-        );
-      }
-      this.setState(this.state);
-    } else {
-      // By default, the null valued 'Select a Community'
+      this.setState({
+        communitySearchOptions: newOptions,
+      });
+    }
+
+    this.setState({
+      communitySearchLoading: false,
+    });
+  });
+
+  handleCommunitySelect(choice: Choice) {
+    if (this.props.onSelectCommunity) {
+      this.setState({
+        loading: true,
+      });
+
+      this.props.onSelectCommunity(choice);
+
+      this.setState({ loading: false });
     }
   }
 
   parseMessage(msg: any) {
+    let mui = UserService.Instance.myUserInfo;
     let op = wsUserOp(msg);
     console.log(msg);
     if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.state.loading = false;
-      this.setState(this.state);
+      // Errors handled by top level pages
+      // toast(i18n.t(msg.error), "danger");
+      this.setState({ loading: false });
       return;
     } else if (op == UserOperation.CreatePost) {
-      let data = wsJsonToRes<PostResponse>(msg).data;
-      if (
-        data.post_view.creator.id ==
-        UserService.Instance.myUserInfo.local_user_view.person.id
-      ) {
-        this.state.loading = false;
-        this.props.onCreate(data.post_view);
+      let data = wsJsonToRes<PostResponse>(msg);
+      if (data.post_view.creator.id == mui?.local_user_view.person.id) {
+        this.props.onCreate?.(data.post_view);
       }
     } else if (op == UserOperation.EditPost) {
-      let data = wsJsonToRes<PostResponse>(msg).data;
-      if (
-        data.post_view.creator.id ==
-        UserService.Instance.myUserInfo.local_user_view.person.id
-      ) {
-        this.state.loading = false;
-        this.props.onEdit(data.post_view);
+      let data = wsJsonToRes<PostResponse>(msg);
+      if (data.post_view.creator.id == mui?.local_user_view.person.id) {
+        this.setState({ loading: false });
+        this.props.onEdit?.(data.post_view);
       }
     } else if (op == UserOperation.Search) {
-      let data = wsJsonToRes<SearchResponse>(msg).data;
+      let data = wsJsonToRes<SearchResponse>(msg);
 
-      if (data.type_ == SearchType[SearchType.Posts]) {
-        this.state.suggestedPosts = data.posts;
-      } else if (data.type_ == SearchType[SearchType.Url]) {
-        this.state.crossPosts = data.posts;
+      if (data.type_ == "Posts") {
+        this.setState({ suggestedPosts: data.posts });
+      } else if (data.type_ == "Url") {
+        this.setState({ crossPosts: data.posts });
       }
-      this.setState(this.state);
     }
   }
 }