Merge branch 'main' into main

[lemmy-ui.git] / src / shared / components / common / sort-select.tsx

diff --git a/src/shared/components/common/sort-select.tsx b/src/shared/components/common/sort-select.tsx
index c0d277f0811bd3de37e9765b22104980d3723d66..656a6c09d3c44b92a26d111ec89c0d2fef3f1510 100644 (file)
--- a/src/shared/components/common/sort-select.tsx
+++ b/src/shared/components/common/sort-select.tsx
@@ -6,7 +6,7 @@ import { Icon } from "./icon";
 
 interface SortSelectProps {
   sort: SortType;
-  onChange?(val: SortType): any;
+  onChange(val: SortType): void;
   hideHot?: boolean;
   hideMostComments?: boolean;
 }
@@ -25,7 +25,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
     super(props, context);
   }
 
-  static getDerivedStateFromProps(props: any): SortSelectState {
+  static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
     return {
       sort: props.sort,
     };
@@ -39,41 +39,44 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="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 key={SortType.Hot} value={SortType.Hot}>
+            <option key={"Hot"} value={"Hot"}>
               {i18n.t("hot")}
             </option>,
-            <option key={SortType.Active} value={SortType.Active}>
+            <option key={"Active"} value={"Active"}>
               {i18n.t("active")}
             </option>,
           ]}
-          <option value={SortType.New}>{i18n.t("new")}</option>
-          <option value={SortType.Old}>{i18n.t("old")}</option>
+          <option value={"New"}>{i18n.t("new")}</option>
+          <option value={"Old"}>{i18n.t("old")}</option>
           {!this.props.hideMostComments && [
-            <option key={SortType.MostComments} value={SortType.MostComments}>
+            <option key={"MostComments"} value={"MostComments"}>
               {i18n.t("most_comments")}
             </option>,
-            <option key={SortType.NewComments} 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={relTags}
           title={i18n.t("sorting_help")}
@@ -85,6 +88,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
   }
 
   handleSortChange(i: SortSelect, event: any) {
-    i.props.onChange?.(event.target.value);
+    i.props.onChange(event.target.value);
   }
 }