diff options
author | derek <wwsage@gmail.com> | 2020-07-13 00:19:34 -0400 |
---|---|---|
committer | derek <wwsage@gmail.com> | 2020-07-13 20:14:01 -0400 |
commit | 47548905ce1b20035ffa467391f06280b6fbfcb4 (patch) | |
tree | df83020eb7ff82bd699a354a6e9b65bd651b0225 | |
parent | 195bf022bb38499754263f71d52b0596ebd0e333 (diff) |
ui.components: fix selector components to work with browser buttons
Use getDerivedState to set state and only send back props
-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); } } |