Adding listing_type to search. #143

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.6",
+    "lemmy-js-client": "0.11.0-rc.8",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.4.1",
     "node-fetch": "^2.6.1",

src/shared/components/communities.tsx

@@ -273,7 +273,7 @@ export class Communities extends Component<any, CommunitiesState> {
   handleSearchSubmit(i: Communities) {
     const searchParamEncoded = encodeURIComponent(i.state.searchText);
     i.context.router.history.push(
-      `/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/page/1`
+      `/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/listing_type/All/page/1`
     );
   }
 

src/shared/components/main.tsx

@@ -60,6 +60,7 @@ import {
   authField,
   saveScrollPosition,
   restoreScrollPosition,
+  showLocal,
 } from "../utils";
 import { i18n } from "../i18next";
 import { T } from "inferno-i18next";
@@ -588,7 +589,7 @@ export class Main extends Component<any, MainState> {
         <span class="mr-3">
           <ListingTypeSelect
             type_={this.state.listingType}
-            showLocal={this.showLocal}
+            showLocal={showLocal(this.isoData)}
             onChange={this.handleListingTypeChange}
           />
         </span>
@@ -650,10 +651,6 @@ export class Main extends Component<any, MainState> {
     );
   }
 
-  get showLocal(): boolean {
-    return this.isoData.site_res.federated_instances?.linked.length > 0;
-  }
-
   get canAdmin(): boolean {
     return (
       UserService.Instance.localUserView &&

src/shared/components/navbar.tsx

@@ -134,7 +134,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     } else {
       const searchParamEncoded = encodeURIComponent(searchParam);
       this.context.router.history.push(
-        `/search/q/${searchParamEncoded}/type/All/sort/TopAll/page/1`
+        `/search/q/${searchParamEncoded}/type/All/sort/TopAll/listing_type/All/page/1`
       );
     }
   }

src/shared/components/person.tsx

@@ -49,6 +49,7 @@ import {
   setOptionalAuth,
   saveScrollPosition,
   restoreScrollPosition,
+  showLocal,
 } from "../utils";
 import { PersonListing } from "./person-listing";
 import { HtmlTags } from "./html-tags";
@@ -655,9 +656,7 @@ export class Person extends Component<any, PersonState> {
                   this.state.saveUserSettingsForm.default_listing_type
                 ]
               }
-              showLocal={
-                this.state.siteRes.federated_instances?.linked.length > 0
-              }
+              showLocal={showLocal(this.isoData)}
               onChange={this.handleUserSettingsListingTypeChange}
             />
           </form>

src/shared/components/post-form.tsx

@@ -15,6 +15,7 @@ import {
   Search,
   SearchType,
   SearchResponse,
+  ListingType,
 } from "lemmy-js-client";
 import { WebSocketService, UserService } from "../services";
 import { PostFormParams } from "../interfaces";
@@ -406,6 +407,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         q: this.state.postForm.url,
         type_: SearchType.Url,
         sort: SortType.TopAll,
+        listing_type: ListingType.All,
         page: 1,
         limit: 6,
         auth: authField(false),
@@ -435,6 +437,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       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,

src/shared/components/post.tsx

@@ -21,6 +21,7 @@ import {
   SearchResponse,
   GetSiteResponse,
   GetCommunityResponse,
+  ListingType,
 } from "lemmy-js-client";
 import {
   CommentSortType,
@@ -132,6 +133,7 @@ export class Post extends Component<any, PostState> {
         q: this.state.postRes.post_view.post.url,
         type_: SearchType.Url,
         sort: SortType.TopAll,
+        listing_type: ListingType.All,
         page: 1,
         limit: 6,
         auth: authField(false),

src/shared/components/search.tsx

@@ -13,6 +13,7 @@ import {
   PostResponse,
   CommentResponse,
   Site,
+  ListingType,
 } from "lemmy-js-client";
 import { WebSocketService } from "../services";
 import {
@@ -32,6 +33,8 @@ import {
   setOptionalAuth,
   saveScrollPosition,
   restoreScrollPosition,
+  routeListingTypeToEnum,
+  showLocal,
 } from "../utils";
 import { PostListing } from "./post-listing";
 import { HtmlTags } from "./html-tags";
@@ -39,6 +42,7 @@ import { Spinner } from "./icon";
 import { PersonListing } from "./person-listing";
 import { CommunityLink } from "./community-link";
 import { SortSelect } from "./sort-select";
+import { ListingTypeSelect } from "./listing-type-select";
 import { CommentNodes } from "./comment-nodes";
 import { i18n } from "../i18next";
 import { InitialFetchRequest } from "shared/interfaces";
@@ -47,6 +51,7 @@ interface SearchProps {
   q: string;
   type_: SearchType;
   sort: SortType;
+  listingType: ListingType;
   page: number;
 }
 
@@ -54,6 +59,7 @@ interface SearchState {
   q: string;
   type_: SearchType;
   sort: SortType;
+  listingType: ListingType;
   page: number;
   searchResponse: SearchResponse;
   loading: boolean;
@@ -65,6 +71,7 @@ interface UrlParams {
   q?: string;
   type_?: SearchType;
   sort?: SortType;
+  listingType?: ListingType;
   page?: number;
 }
 
@@ -75,6 +82,9 @@ export class Search extends Component<any, SearchState> {
     q: Search.getSearchQueryFromProps(this.props.match.params.q),
     type_: Search.getSearchTypeFromProps(this.props.match.params.type),
     sort: Search.getSortTypeFromProps(this.props.match.params.sort),
+    listingType: Search.getListingTypeFromProps(
+      this.props.match.params.listing_type
+    ),
     page: Search.getPageFromProps(this.props.match.params.page),
     searchText: Search.getSearchQueryFromProps(this.props.match.params.q),
     searchResponse: {
@@ -100,6 +110,10 @@ export class Search extends Component<any, SearchState> {
     return sort ? routeSortTypeToEnum(sort) : SortType.TopAll;
   }
 
+  static getListingTypeFromProps(listingType: string): ListingType {
+    return listingType ? routeListingTypeToEnum(listingType) : ListingType.All;
+  }
+
   static getPageFromProps(page: string): number {
     return page ? Number(page) : 1;
   }
@@ -109,6 +123,7 @@ export class Search extends Component<any, SearchState> {
 
     this.state = this.emptyState;
     this.handleSortChange = this.handleSortChange.bind(this);
+    this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
 
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
@@ -134,6 +149,9 @@ export class Search extends Component<any, SearchState> {
       q: Search.getSearchQueryFromProps(props.match.params.q),
       type_: Search.getSearchTypeFromProps(props.match.params.type),
       sort: Search.getSortTypeFromProps(props.match.params.sort),
+      listingType: Search.getListingTypeFromProps(
+        props.match.params.listing_type
+      ),
       page: Search.getPageFromProps(props.match.params.page),
     };
   }
@@ -146,7 +164,8 @@ export class Search extends Component<any, SearchState> {
       q: this.getSearchQueryFromProps(pathSplit[3]),
       type_: this.getSearchTypeFromProps(pathSplit[5]),
       sort: this.getSortTypeFromProps(pathSplit[7]),
-      page: this.getPageFromProps(pathSplit[9]),
+      listing_type: this.getListingTypeFromProps(pathSplit[9]),
+      page: this.getPageFromProps(pathSplit[11]),
       limit: fetchLimit,
     };
     setOptionalAuth(form, req.auth);
@@ -163,6 +182,7 @@ export class Search extends Component<any, SearchState> {
       lastState.q !== this.state.q ||
       lastState.type_ !== this.state.type_ ||
       lastState.sort !== this.state.sort ||
+      lastState.listingType !== this.state.listingType ||
       lastState.page !== this.state.page
     ) {
       this.setState({ loading: true, searchText: this.state.q });
@@ -242,6 +262,13 @@ export class Search extends Component<any, SearchState> {
           </option>
           <option value={SearchType.Users}>{i18n.t("users")}</option>
         </select>
+        <span class="ml-2">
+          <ListingTypeSelect
+            type_={this.state.listingType}
+            showLocal={showLocal(this.isoData)}
+            onChange={this.handleListingTypeChange}
+          />
+        </span>
         <span class="ml-2">
           <SortSelect
             sort={this.state.sort}
@@ -460,6 +487,7 @@ export class Search extends Component<any, SearchState> {
       q: this.state.q,
       type_: this.state.type_,
       sort: this.state.sort,
+      listing_type: this.state.listingType,
       page: this.state.page,
       limit: fetchLimit,
       auth: authField(false),
@@ -481,11 +509,19 @@ export class Search extends Component<any, SearchState> {
     });
   }
 
+  handleListingTypeChange(val: ListingType) {
+    this.updateUrl({
+      listingType: val,
+      page: 1,
+    });
+  }
+
   handleSearchSubmit(i: Search, event: any) {
     event.preventDefault();
     i.updateUrl({
       q: i.state.searchText,
       type_: i.state.type_,
+      listingType: i.state.listingType,
       sort: i.state.sort,
       page: i.state.page,
     });
@@ -499,10 +535,11 @@ export class Search extends Component<any, SearchState> {
     const qStr = paramUpdates.q || this.state.q;
     const qStrEncoded = encodeURIComponent(qStr);
     const typeStr = paramUpdates.type_ || this.state.type_;
+    const listingTypeStr = paramUpdates.listingType || this.state.listingType;
     const sortStr = paramUpdates.sort || this.state.sort;
     const page = paramUpdates.page || this.state.page;
     this.props.history.push(
-      `/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/page/${page}`
+      `/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/listing_type/${listingTypeStr}/page/${page}`
     );
   }
 

src/shared/routes.ts

@@ -133,7 +133,7 @@ export const routes: IRoutePropsWithFetch[] = [
     fetchInitialData: req => AdminSettings.fetchInitialData(req),
   },
   {
-    path: `/search/q/:q/type/:type/sort/:sort/page/:page`,
+    path: `/search/q/:q/type/:type/sort/:sort/listing_type/:listing_type/page/:page`,
     component: Search,
     fetchInitialData: req => Search.fetchInitialData(req),
   },

src/shared/utils.ts

@@ -747,6 +747,7 @@ function personSearch(text: string, cb: (persons: PersonTribute[]) => any) {
       q: text,
       type_: SearchType.Users,
       sort: SortType.TopAll,
+      listing_type: ListingType.All,
       page: 1,
       limit: mentionDropdownFetchLimit,
       auth: authField(false),
@@ -792,6 +793,7 @@ function communitySearch(
       q: text,
       type_: SearchType.Communities,
       sort: SortType.TopAll,
+      listing_type: ListingType.All,
       page: 1,
       limit: mentionDropdownFetchLimit,
       auth: authField(false),
@@ -1226,3 +1228,7 @@ export function restoreScrollPosition(context: any) {
   let y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
   window.scrollTo(0, y);
 }
+
+export function showLocal(isoData: IsoData): boolean {
+  return isoData.site_res.federated_instances?.linked.length > 0;
+}

yarn.lock

@@ -5125,10 +5125,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.11.0-rc.6:
-  version "0.11.0-rc.6"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.6.tgz#897671c8e24be8ba2a6074efc63264c421969380"
-  integrity sha512-/AIws5bidcNIi8wSzJx7mwo5Ip2u78s4/bMdEyfEqWKWqdNwEKV/6eYnyThA3j9gYXjd8ty731s0l0kSs/vmhA==
+lemmy-js-client@0.11.0-rc.8:
+  version "0.11.0-rc.8"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.8.tgz#d3b15b7233cf0cd493c5d8a3c8a588b9ce0c2663"
+  integrity sha512-YlG0bkJuWEkBdCoS5RROxz7RyE0zgsTt0emiNTYdE8vFLr3DBPha/19Rzccx8Ewc7ohH35w8gg3XDejcrK0tqw==
 
 levn@^0.4.1:
   version "0.4.1"