Adding async community searching. Fixes #262

package.json

@@ -68,7 +68,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "husky": "^6.0.0",
     "iso-639-1": "^2.1.9",
-    "lemmy-js-client": "0.11.0-rc.8",
+    "lemmy-js-client": "0.11.0-rc.9",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.4.1",
     "node-fetch": "^2.6.1",

src/shared/components/create-post.tsx

@@ -5,6 +5,7 @@ import { HtmlTags } from "./html-tags";
 import { Spinner } from "./icon";
 import {
   authField,
+  fetchLimit,
   isBrowser,
   setIsoData,
   setOptionalAuth,
@@ -69,7 +70,7 @@ export class CreatePost extends Component<any, CreatePostState> {
     let listCommunitiesForm: ListCommunities = {
       type_: ListingType.All,
       sort: SortType.TopAll,
-      limit: 9999,
+      limit: fetchLimit,
       auth: authField(false),
     };
     WebSocketService.Instance.send(
@@ -163,7 +164,7 @@ export class CreatePost extends Component<any, CreatePostState> {
     let listCommunitiesForm: ListCommunities = {
       type_: ListingType.All,
       sort: SortType.TopAll,
-      limit: 9999,
+      limit: fetchLimit,
     };
     setOptionalAuth(listCommunitiesForm, req.auth);
     return [req.client.listCommunities(listCommunitiesForm)];

src/shared/components/post-form.tsx

@@ -16,6 +16,7 @@ import {
   SearchType,
   SearchResponse,
   ListingType,
+  LemmyHttp,
 } from "lemmy-js-client";
 import { WebSocketService, UserService } from "../services";
 import { PostFormParams } from "../interfaces";
@@ -37,6 +38,8 @@ import {
   wsUserOp,
   wsClient,
   authField,
+  communityToChoice,
+  fetchLimit,
 } from "../utils";
 import autosize from "autosize";
 
@@ -46,7 +49,7 @@ if (isBrowser()) {
 }
 
 import { i18n } from "../i18next";
-import { pictrsUri } from "../env";
+import { httpBase, pictrsUri } from "../env";
 
 const MAX_POST_TITLE_LENGTH = 200;
 
@@ -453,6 +456,20 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     this.setState(this.state);
   }
 
+  async fetchCommunities(q: string) {
+    let form: Search = {
+      q,
+      type_: SearchType.Communities,
+      sort: SortType.TopAll,
+      listing_type: ListingType.All,
+      page: 1,
+      limit: fetchLimit,
+      auth: authField(false),
+    };
+    let client = new LemmyHttp(httpBase);
+    return client.search(form);
+  }
+
   handlePostBodyChange(val: string) {
     this.state.postForm.body = val;
     this.setState(this.state);
@@ -578,6 +595,20 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           },
           false
         );
+        this.choices.passedElement.element.addEventListener(
+          "search",
+          debounce(async (e: any) => {
+            let communities = (await this.fetchCommunities(e.detail.value))
+              .communities;
+            this.choices.setChoices(
+              communities.map(cv => communityToChoice(cv)),
+              "value",
+              "label",
+              true
+            );
+          }, 400),
+          false
+        );
       }
     }
 
@@ -641,7 +672,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       } else if (data.type_ == SearchType[SearchType.Url]) {
         this.state.crossPosts = data.posts;
       }
-      this.setState(this.state);
     }
   }
 }

src/shared/components/site-form.tsx

@@ -3,7 +3,7 @@ import { Prompt } from "inferno-router";
 import { MarkdownTextArea } from "./markdown-textarea";
 import { Spinner } from "./icon";
 import { ImageUploadForm } from "./image-upload-form";
-import { Site, EditSite } from "lemmy-js-client";
+import { Site, EditSite, CreateSite } from "lemmy-js-client";
 import { WebSocketService } from "../services";
 import {
   authField,
@@ -250,7 +250,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     if (i.props.site) {
       WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
     } else {
-      WebSocketService.Instance.send(wsClient.createSite(i.state.siteForm));
+      let form: CreateSite = {
+        name: i.state.siteForm.name || "My site",
+        ...i.state.siteForm,
+      };
+      WebSocketService.Instance.send(wsClient.createSite(form));
     }
     i.setState(i.state);
   }

src/shared/utils.ts

@@ -1232,3 +1232,16 @@ export function restoreScrollPosition(context: any) {
 export function showLocal(isoData: IsoData): boolean {
   return isoData.site_res.federated_instances?.linked.length > 0;
 }
+
+interface ChoicesValue {
+  value: string;
+  label: string;
+}
+
+export function communityToChoice(cv: CommunityView): ChoicesValue {
+  let choice: ChoicesValue = {
+    value: cv.community.id.toString(),
+    label: cv.community.name,
+  };
+  return choice;
+}

yarn.lock

@@ -5125,10 +5125,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.11.0-rc.8:
+lemmy-js-client@0.11.0-rc.9:
-  version "0.11.0-rc.8"
+  version "0.11.0-rc.9"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.8.tgz#d3b15b7233cf0cd493c5d8a3c8a588b9ce0c2663"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.9.tgz#f8b1e3924388c6e7f719f052ba1568f4d210cabc"
-  integrity sha512-YlG0bkJuWEkBdCoS5RROxz7RyE0zgsTt0emiNTYdE8vFLr3DBPha/19Rzccx8Ewc7ohH35w8gg3XDejcrK0tqw==
+  integrity sha512-697hLvHPr5+ZkJkFTaXl3y7Dt1va2Dghx9uvu/kZyZQZGVk2lL10R50SDaWsThyQKFBT4kiS1JZI+R3szzZEZQ==
 
 levn@^0.4.1:
   version "0.4.1"