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

Use getDerivedState to set state and only send back props

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_ ==
+          className={`pointer btn btn-sm btn-secondary ${
-            DataType.Comment && 'active'}`}
+            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.props.onChange(Number(event.target.value));
-    i.setState(i.state);
-    i.props.onChange(i.state.type_);
   }
 }

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_ ==
+          className={`pointer btn btn-sm btn-secondary ${
-            ListingType.All && 'active'}`}
+            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.props.onChange(Number(event.target.value));
-    i.setState(i.state);
-    i.props.onChange(i.state.type_);
   }
 }

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.props.onChange(event.target.value);
-    i.setState(i.state);
-    i.props.onChange(i.state.sort);
   }
 }