LemmyNet
/
lemmy
3
2
Fork 3
Code Pull Requests 1 Releases Wiki Activity

ui.components: fix selector components to work with browser buttons 

Use getDerivedState to set state and only send back props
This commit is contained in:
derek 2020-07-13 00:19:34 -04:00
parent 195bf022bb
commit 47548905ce
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/components/data-type-select.tsx vendored
View File

@ -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));
}
}

15
ui/src/components/listing-type-select.tsx vendored
View File

@ -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));
}
}

10
ui/src/components/sort-select.tsx vendored
View File

@ -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);
}
}