Allow sorting on /communities (#1934)

* Allow sorting on communities page

Just a few minor changes to communities.tsx that add a sort dropdown - same element as the sort dropdown in home.tsx

* Fix alignment of communities.tsx selector row

Simple CSS fix for correct alignment of a few elements

---------

Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 7510bb1ae7248301e5c3ca452ad84cddeee1bbe5..4ab1bfeceeb5b18a382084ca343e739ecd796fc8 100644 (file)
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -20,6 +20,7 @@ import {
   ListCommunities,
   ListCommunitiesResponse,
   ListingType,
+  SortType,
 } from "lemmy-js-client";
 import { InitialFetchRequest } from "../../interfaces";
 import { FirstLoadService, I18NextService } from "../../services";
@@ -28,6 +29,7 @@ import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import { ListingTypeSelect } from "../common/listing-type-select";
 import { Paginator } from "../common/paginator";
+import { SortSelect } from "../common/sort-select";
 import { CommunityLink } from "./community-link";
 
 const communityLimit = 50;
@@ -45,6 +47,7 @@ interface CommunitiesState {
 
 interface CommunitiesProps {
   listingType: ListingType;
+  sort: SortType;
   page: number;
 }
 
@@ -52,6 +55,10 @@ function getListingTypeFromQuery(listingType?: string): ListingType {
   return listingType ? (listingType as ListingType) : "Local";
 }
 
+function getSortTypeFromQuery(type?: string): SortType {
+  return type ? (type as SortType) : "TopMonth";
+}
+
 export class Communities extends Component<any, CommunitiesState> {
   private isoData = setIsoData<CommunitiesData>(this.context);
   state: CommunitiesState = {
@@ -64,6 +71,7 @@ export class Communities extends Component<any, CommunitiesState> {
   constructor(props: any, context: any) {
     super(props, context);
     this.handlePageChange = this.handlePageChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
     this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
 
     // Only fetch the data if coming from another route
@@ -99,13 +107,13 @@ export class Communities extends Component<any, CommunitiesState> {
           </h5>
         );
       case "success": {
-        const { listingType, page } = this.getCommunitiesQueryParams();
+        const { listingType, sort, page } = this.getCommunitiesQueryParams();
         return (
           <div>
             <h1 className="h4 mb-4">
               {I18NextService.i18n.t("list_of_communities")}
             </h1>
-            <div className="row g-2 justify-content-between">
+            <div className="row g-3 align-items-center mb-2">
               <div className="col-auto">
                 <ListingTypeSelect
                   type_={listingType}
@@ -114,6 +122,9 @@ export class Communities extends Component<any, CommunitiesState> {
                   onChange={this.handleListingTypeChange}
                 />
               </div>
+              <div className="col-auto me-auto">
+                <SortSelect sort={sort} onChange={this.handleSortChange} />
+              </div>
               <div className="col-auto">{this.searchForm()}</div>
             </div>
 
@@ -224,10 +235,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   searchForm() {
     return (
-      <form
-        className="row mb-2"
-        onSubmit={linkEvent(this, this.handleSearchSubmit)}
-      >
+      <form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
         <div className="col-auto">
           <input
             type="text"
@@ -252,12 +260,16 @@ export class Communities extends Component<any, CommunitiesState> {
     );
   }
 
-  async updateUrl({ listingType, page }: Partial<CommunitiesProps>) {
-    const { listingType: urlListingType, page: urlPage } =
-      this.getCommunitiesQueryParams();
+  async updateUrl({ listingType, sort, page }: Partial<CommunitiesProps>) {
+    const {
+      listingType: urlListingType,
+      sort: urlSort,
+      page: urlPage,
+    } = this.getCommunitiesQueryParams();
 
     const queryParams: QueryParams<CommunitiesProps> = {
       listingType: listingType ?? urlListingType,
+      sort: sort ?? urlSort,
       page: (page ?? urlPage)?.toString(),
     };
 
@@ -270,6 +282,10 @@ export class Communities extends Component<any, CommunitiesState> {
     this.updateUrl({ page });
   }
 
+  handleSortChange(val: SortType) {
+    this.updateUrl({ sort: val, page: 1 });
+  }
+
   handleListingTypeChange(val: ListingType) {
     this.updateUrl({
       listingType: val,
@@ -290,7 +306,7 @@ export class Communities extends Component<any, CommunitiesState> {
   }
 
   static async fetchInitialData({
-    query: { listingType, page },
+    query: { listingType, sort, page },
     client,
     auth,
   }: InitialFetchRequest<
@@ -298,7 +314,7 @@ export class Communities extends Component<any, CommunitiesState> {
   >): Promise<CommunitiesData> {
     const listCommunitiesForm: ListCommunities = {
       type_: getListingTypeFromQuery(listingType),
-      sort: "TopMonth",
+      sort: getSortTypeFromQuery(sort),
       limit: communityLimit,
       page: getPageFromString(page),
       auth: auth,
@@ -314,6 +330,7 @@ export class Communities extends Component<any, CommunitiesState> {
   getCommunitiesQueryParams() {
     return getQueryParams<CommunitiesProps>({
       listingType: getListingTypeFromQuery,
+      sort: getSortTypeFromQuery,
       page: getPageFromString,
     });
   }
@@ -334,12 +351,12 @@ export class Communities extends Component<any, CommunitiesState> {
   async refetch() {
     this.setState({ listCommunitiesResponse: { state: "loading" } });
 
-    const { listingType, page } = this.getCommunitiesQueryParams();
+    const { listingType, sort, page } = this.getCommunitiesQueryParams();
 
     this.setState({
       listCommunitiesResponse: await HttpService.client.listCommunities({
         type_: listingType,
-        sort: "TopMonth",
+        sort: sort,
         limit: communityLimit,
         page,
         auth: myAuth(),