Infra-Mirrors/lemmy
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-10-01 01:36:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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; this.state = this.emptyState;
} }
static getDerivedStateFromProps(props) {
return {
type_: props.type_,
};
}
render() { render() {
return ( return (
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
@ -42,8 +48,9 @@ export class DataTypeSelect extends Component<
{i18n.t('posts')} {i18n.t('posts')}
</label> </label>
<label <label
className={`pointer btn btn-sm btn-secondary ${this.state.type_ == className={`pointer btn btn-sm btn-secondary ${
DataType.Comment && 'active'}`} this.state.type_ == DataType.Comment && 'active'
}`}
> >
<input <input
type="radio" type="radio"
@ -58,8 +65,6 @@ export class DataTypeSelect extends Component<
} }
handleTypeChange(i: DataTypeSelect, event: any) { handleTypeChange(i: DataTypeSelect, event: any) {
i.state.type_ = Number(event.target.value); i.props.onChange(Number(event.target.value));
i.setState(i.state);
i.props.onChange(i.state.type_);
} }
} }

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

@ -26,6 +26,12 @@ export class ListingTypeSelect extends Component<
this.state = this.emptyState; this.state = this.emptyState;
} }
static getDerivedStateFromProps(props) {
return {
type_: props.type_,
};
}
render() { render() {
return ( return (
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
@ -45,8 +51,9 @@ export class ListingTypeSelect extends Component<
{i18n.t('subscribed')} {i18n.t('subscribed')}
</label> </label>
<label <label
className={`pointer btn btn-sm btn-secondary ${this.state.type_ == className={`pointer btn btn-sm btn-secondary ${
ListingType.All && 'active'}`} this.state.type_ == ListingType.All && 'active'
}`}
> >
<input <input
type="radio" type="radio"
@ -61,8 +68,6 @@ export class ListingTypeSelect extends Component<
} }
handleTypeChange(i: ListingTypeSelect, event: any) { handleTypeChange(i: ListingTypeSelect, event: any) {
i.state.type_ = Number(event.target.value); i.props.onChange(Number(event.target.value));
i.setState(i.state);
i.props.onChange(i.state.type_);
} }
} }

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; this.state = this.emptyState;
} }
static getDerivedStateFromProps(props) {
return {
sort: props.sort,
};
}
render() { render() {
return ( return (
<> <>
@ -59,8 +65,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
} }
handleSortChange(i: SortSelect, event: any) { handleSortChange(i: SortSelect, event: any) {
i.state.sort = Number(event.target.value); i.props.onChange(event.target.value);
i.setState(i.state);
i.props.onChange(i.state.sort);
} }
} }