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>
This commit is contained in:
Ben Wyatt 2023-07-17 10:22:01 -05:00 committed by GitHub
parent 9c489680de
commit 6331323554
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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(),