import { Component, linkEvent } from "inferno";
import { SortType } from "lemmy-js-client";
import { i18n } from "../../i18next";
-import { randomStr, sortingHelpUrl } from "../../utils";
+import { randomStr, relTags, sortingHelpUrl } from "../../utils";
import { Icon } from "./icon";
interface SortSelectProps {
sort: SortType;
- onChange?(val: SortType): any;
+ onChange(val: SortType): void;
hideHot?: boolean;
hideMostComments?: boolean;
}
export class SortSelect extends Component<SortSelectProps, SortSelectState> {
private id = `sort-select-${randomStr()}`;
- private emptyState: SortSelectState = {
+ state: SortSelectState = {
sort: this.props.sort,
};
constructor(props: any, context: any) {
super(props, context);
- this.state = this.emptyState;
}
- static getDerivedStateFromProps(props: any): SortSelectState {
+ static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
return {
sort: props.sort,
};
name={this.id}
value={this.state.sort}
onChange={linkEvent(this, this.handleSortChange)}
- class="custom-select w-auto mr-2 mb-2"
+ className="sort-select form-select d-inline-block w-auto me-2"
aria-label={i18n.t("sort_type")}
>
<option disabled aria-hidden="true">
{i18n.t("sort_type")}
</option>
{!this.props.hideHot && [
- <option value={SortType.Hot}>{i18n.t("hot")}</option>,
- <option value={SortType.Active}>{i18n.t("active")}</option>,
+ <option key={"Hot"} value={"Hot"}>
+ {i18n.t("hot")}
+ </option>,
+ <option key={"Active"} value={"Active"}>
+ {i18n.t("active")}
+ </option>,
]}
- <option value={SortType.New}>{i18n.t("new")}</option>
+ <option value={"New"}>{i18n.t("new")}</option>
+ <option value={"Old"}>{i18n.t("old")}</option>
{!this.props.hideMostComments && [
- <option value={SortType.MostComments}>
+ <option key={"MostComments"} value={"MostComments"}>
{i18n.t("most_comments")}
</option>,
- <option value={SortType.NewComments}>
+ <option key={"NewComments"} value={"NewComments"}>
{i18n.t("new_comments")}
</option>,
]}
<option disabled aria-hidden="true">
─────
</option>
- <option value={SortType.TopDay}>{i18n.t("top_day")}</option>
- <option value={SortType.TopWeek}>{i18n.t("top_week")}</option>
- <option value={SortType.TopMonth}>{i18n.t("top_month")}</option>
- <option value={SortType.TopYear}>{i18n.t("top_year")}</option>
- <option value={SortType.TopAll}>{i18n.t("top_all")}</option>
+ <option value={"TopHour"}>{i18n.t("top_hour")}</option>
+ <option value={"TopSixHour"}>{i18n.t("top_six_hours")}</option>
+ <option value={"TopTwelveHour"}>{i18n.t("top_twelve_hours")}</option>
+ <option value={"TopDay"}>{i18n.t("top_day")}</option>
+ <option value={"TopWeek"}>{i18n.t("top_week")}</option>
+ <option value={"TopMonth"}>{i18n.t("top_month")}</option>
+ <option value={"TopYear"}>{i18n.t("top_year")}</option>
+ <option value={"TopAll"}>{i18n.t("top_all")}</option>
</select>
<a
- className="text-muted"
+ className="sort-select-icon text-muted"
href={sortingHelpUrl}
- rel="noopener"
+ rel={relTags}
title={i18n.t("sorting_help")}
>
<Icon icon="help-circle" classes="icon-inline" />