mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-09 10:02:12 +00:00
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:
parent
9c489680de
commit
6331323554
|
@ -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(),
|
||||
|
|
Loading…
Reference in a new issue