u

src/routes/artikel/marken.jsx

@@ -23,21 +23,25 @@ class ArtikelMarkenSearchField extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      input: props.value ?? '',
+      input: brandAutomat.state.filter ?? '',
       submitting: false,
     };
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value && this.props.value !== this.state.input) {
-      this.setState({ input: this.props.value ?? '' });
-    }
+  componentDidMount() {
+    this.unsub = brandAutomat.subscribe(this, (state) => ({
+      input: state.filter,
+    }));
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
   }
 
   onInputChange(input) {
     this.setState({ input });
-    this.props.onChange?.(input);
+    brandAutomat.actions.filter(input);
   }
 
   async handleSubmit() {
@@ -49,7 +53,7 @@ class ArtikelMarkenSearchField extends PureComponent {
       const row = await brandAutomat.actions.create({ name });
       enqueueSnackbar(`Marke „${row.name || name}“ angelegt.`, { variant: 'success' });
       this.setState({ input: '', submitting: false });
-      this.props.onChange?.('');
+      brandAutomat.actions.filter('');
     } catch (err) {
       this.setState({ submitting: false });
       notifyError(err);
@@ -105,7 +109,7 @@ class ArtikelMarkenPage extends PureComponent {
     this.state = {
       status: brandAutomat.state.status,
       error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
-      brands: brandAutomat.state.brands
+      brands: brandAutomat.state.filteredBrands ?? brandAutomat.state.brands,
     };
     this.searchRef = createRef();
     this.handleRetry = this.handleRetry.bind(this);
@@ -115,7 +119,7 @@ class ArtikelMarkenPage extends PureComponent {
     setLastArticleSku(null);
 
     this.unsub = brandAutomat.subscribe(this, (state) => ({
-      brands: state.brands,
+      brands: state.filteredBrands,
       status: state.status,
       error: state.error ? backendErrorFrom({ message: state.error }) : null,
     }));