]> Untitled Git - lemmy.git/blob - ui/src/components/sort-select.tsx
ui.components.sort-select: always parse to number
[lemmy.git] / ui / src / components / sort-select.tsx
1 import { Component, linkEvent } from 'inferno';
2 import { SortType } from '../interfaces';
3 import { sortingHelpUrl } from '../utils';
4 import { i18n } from '../i18next';
5
6 interface SortSelectProps {
7   sort: SortType;
8   onChange?(val: SortType): any;
9   hideHot?: boolean;
10 }
11
12 interface SortSelectState {
13   sort: SortType;
14 }
15
16 export class SortSelect extends Component<SortSelectProps, SortSelectState> {
17   private emptyState: SortSelectState = {
18     sort: this.props.sort,
19   };
20
21   constructor(props: any, context: any) {
22     super(props, context);
23     this.state = this.emptyState;
24   }
25
26   static getDerivedStateFromProps(props) {
27     console.log('sort-select', props);
28     return {
29       sort: Number(props.sort),
30     };
31   }
32
33   render() {
34     return (
35       <>
36         <select
37           value={this.state.sort}
38           onChange={linkEvent(this, this.handleSortChange)}
39           class="custom-select custom-select-sm w-auto mr-2"
40         >
41           <option disabled>{i18n.t('sort_type')}</option>
42           {!this.props.hideHot && (
43             <option value={SortType.Hot}>{i18n.t('hot')}</option>
44           )}
45           <option value={SortType.New}>{i18n.t('new')}</option>
46           <option disabled>─────</option>
47           <option value={SortType.TopDay}>{i18n.t('top_day')}</option>
48           <option value={SortType.TopWeek}>{i18n.t('week')}</option>
49           <option value={SortType.TopMonth}>{i18n.t('month')}</option>
50           <option value={SortType.TopYear}>{i18n.t('year')}</option>
51           <option value={SortType.TopAll}>{i18n.t('all')}</option>
52         </select>
53         <a
54           className="text-muted"
55           href={sortingHelpUrl}
56           target="_blank"
57           rel="noopener"
58           title={i18n.t('sorting_help')}
59         >
60           <svg class={`icon icon-inline`}>
61             <use xlinkHref="#icon-help-circle"></use>
62           </svg>
63         </a>
64       </>
65     );
66   }
67
68   handleSortChange(i: SortSelect, event: any) {
69     i.props.onChange(event.target.value);
70   }
71 }