u

src/routes/artikel.jsx

@@ -10,7 +10,7 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
 import ClearIcon from '@mui/icons-material/Clear';
-import { StorageManagerContext, getStorageManager } from '../api/storageManagerContext';
+import articleSearchAutomat from '../automats/articleSearchAutomat';
 import BackendError from '../components/BackendError';
 import { formatPrice } from '../utils/price';
 import {
@@ -83,12 +83,6 @@ function initialSearchState(searchParams) {
 }
 
 class ArtikelSearchPage extends Component {
-  static contextType = StorageManagerContext;
-
-  get storageManager() {
-    return this.context || getStorageManager();
-  }
-
   state = initialSearchState(this.props.searchParams);
   listSlotRef = { current: null };
   rowMeasureRef = { current: null };
@@ -176,20 +170,18 @@ class ArtikelSearchPage extends Component {
     window.addEventListener('resize', this.handleWindowResize);
     setLastArticleSku(null);
 
+    // Push search results into local component state.
+    this.unsubSearch = articleSearchAutomat.subscribe(this, (state) => state.result);
+
     // Kick off initial search (empty input = show all products).
-    const { input } = this.state;
-    this.storageManager?.doSearch({
-      target: input,
-      filter: this.props.searchParams.get('filter') || undefined,
-      offset: 0,
-      maxCount: this.state.pageSize ?? 20,
-      onUpdate: (result) => this.setState(result),
-    });
+    void articleSearchAutomat.actions.search(this.state.input).catch(() => {});
   }
 
   componentWillUnmount() {
     document.removeEventListener('mouseup', preserveSearchFocus, true);
     window.removeEventListener('resize', this.handleWindowResize);
+    this.unsubSearch?.();
+    this.unsubSearch = null;
     this.persistQuery();
   }
 
@@ -226,34 +218,18 @@ class ArtikelSearchPage extends Component {
   handleInputChange = (event) => {
     const value = event.target.value;
     this.setState({ input: value });
-
-    this.storageManager?.doSearch({
-      target: value,
-      filter: this.props.searchParams.get('filter') || undefined,
-      offset: 0,
-      maxCount: this.state.pageSize ?? 20,
-      onUpdate: (result) => this.setState(result),
-    });
+    void articleSearchAutomat.actions.search(value).catch(() => {});
   };
 
   fetchResults = () => {
     const { target, filter, offset } = queryFromParams(this.props.searchParams);
-    const trimmed = target.trim();
     const { pageSize } = this.state;
 
     if (pageSize == null) return;
 
     writeArtikelQuery({ target, filter, offset });
 
-    // Delegate fetch + debounce to the global StorageManager.
-    // The callback pushes results into local component state.
-    this.storageManager?.doSearch({
-      target: trimmed,
-      filter: filter || undefined,
-      offset,
-      maxCount: pageSize,
-      onUpdate: (result) => this.setState(result),
-    });
+    void articleSearchAutomat.actions.search(target.trim()).catch(() => {});
   };
 
   render() {