diff options
-rw-r--r-- | ui/src/components/data-type-select.tsx | 15 | ||||
-rw-r--r-- | ui/src/components/listing-type-select.tsx | 15 | ||||
-rw-r--r-- | ui/src/components/sort-select.tsx | 10 |
3 files changed, 27 insertions, 13 deletions
diff --git a/ui/src/components/data-type-select.tsx b/ui/src/components/data-type-select.tsx index f2539c81..8e905bf4 100644 --- a/ui/src/components/data-type-select.tsx +++ b/ui/src/components/data-type-select.tsx @@ -25,6 +25,12 @@ export class DataTypeSelect extends Component< this.state = this.emptyState; } + static getDerivedStateFromProps(props) { + return { + type_: props.type_, + }; + } + render() { return ( <div class="btn-group btn-group-toggle"> @@ -42,8 +48,9 @@ export class DataTypeSelect extends Component< {i18n.t('posts')} </label> <label - className={`pointer btn btn-sm btn-secondary ${this.state.type_ == - DataType.Comment && 'active'}`} + className={`pointer btn btn-sm btn-secondary ${ + this.state.type_ == DataType.Comment && 'active' + }`} > <input type="radio" @@ -58,8 +65,6 @@ export class DataTypeSelect extends Component< } handleTypeChange(i: DataTypeSelect, event: any) { - i.state.type_ = Number(event.target.value); - i.setState(i.state); - i.props.onChange(i.state.type_); + i.props.onChange(Number(event.target.value)); } } diff --git a/ui/src/components/listing-type-select.tsx b/ui/src/components/listing-type-select.tsx index d583b93c..6d13f19a 100644 --- a/ui/src/components/listing-type-select.tsx +++ b/ui/src/components/listing-type-select.tsx @@ -26,6 +26,12 @@ export class ListingTypeSelect extends Component< this.state = this.emptyState; } + static getDerivedStateFromProps(props) { + return { + type_: props.type_, + }; + } + render() { return ( <div class="btn-group btn-group-toggle"> @@ -45,8 +51,9 @@ export class ListingTypeSelect extends Component< {i18n.t('subscribed')} </label> <label - className={`pointer btn btn-sm btn-secondary ${this.state.type_ == - ListingType.All && 'active'}`} + className={`pointer btn btn-sm btn-secondary ${ + this.state.type_ == ListingType.All && 'active' + }`} > <input type="radio" @@ -61,8 +68,6 @@ export class ListingTypeSelect extends Component< } handleTypeChange(i: ListingTypeSelect, event: any) { - i.state.type_ = Number(event.target.value); - i.setState(i.state); - i.props.onChange(i.state.type_); + i.props.onChange(Number(event.target.value)); } } diff --git a/ui/src/components/sort-select.tsx b/ui/src/components/sort-select.tsx index 05abdb20..22942d1b 100644 --- a/ui/src/components/sort-select.tsx +++ b/ui/src/components/sort-select.tsx @@ -23,6 +23,12 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> { this.state = this.emptyState; } + static getDerivedStateFromProps(props) { + return { + sort: props.sort, + }; + } + render() { return ( <> @@ -59,8 +65,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> { } handleSortChange(i: SortSelect, event: any) { - i.state.sort = Number(event.target.value); - i.setState(i.state); - i.props.onChange(i.state.sort); + i.props.onChange(event.target.value); } } |