From: Ben Wyatt <william.ben.wyatt@gmail.com> Date: Mon, 17 Jul 2023 15:22:01 +0000 (-0500) Subject: Allow sorting on /communities (#1934) X-Git-Url: http://these/git/%22%7Burl%7D/%7B%60https:/%24%7Bi.domain%7D%60%7D?a=commitdiff_plain;h=633132355461a44fb86c142e09124a298c43aa59;p=lemmy-ui.git 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 7510bb1..4ab1bfe 100644 --- 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(),