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 3f815f5b0eb6e728ff9fea9ad01544fd59fd4505..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;
 }
@@ -17,16 +17,15 @@ interface SortSelectState {
 
 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,
     };
@@ -40,37 +39,44 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           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={SortType.Old}>{i18n.t("old")}</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={relTags}
           title={i18n.t("sorting_help")}