u

src/components/article/tabs/ArticleHistoryTab.jsx

@@ -1,10 +1,12 @@
-import { Component } from 'react';
+import { PureComponent } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import { StorageManagerContext } from '../../../api/storageManagerContext';
+import { articleHistoryAutomat } from '../../../automats/articleDetailAutomat';
+import sseAutomat from '../../../automats/sseAutomat';
+import { notifyError } from '../../../utils/notify';
 import ResultsPagination from '../ResultsPagination';
 
 const PAGE_SIZE = 20;
@@ -13,46 +15,68 @@ function formatDate(iso) {
   return new Date(iso).toLocaleString('de-DE');
 }
 
-export default class ArticleHistoryTab extends Component {
-  static contextType = StorageManagerContext;
-
+export default class ArticleHistoryTab extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = {
-      history: null,
-      total: null,
-      skip: 0,
-    };
-    this.unwatchHistory = null;
-    this.setSkipAndOffset = null;
+    this.state = { all: [], skip: 0 };
     this.handlePageChange = this.handlePageChange.bind(this);
   }
 
   componentDidMount() {
-    const { unwatch, setSkipAndOffset } = this.context.article.historyWatch(
-      this.props.sku,
-      (history, total) => this.setState({ history, total }),
-    );
-    this.unwatchHistory = unwatch;
-    this.setSkipAndOffset = setSkipAndOffset;
-    setSkipAndOffset(0, PAGE_SIZE);
+    this.watch();
+    void articleHistoryAutomat.load(String(this.props.sku)).catch((err) => {
+      if (this.unsub) notifyError(err);
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.sku !== this.props.sku) {
+      this.watch();
+      void articleHistoryAutomat.load(String(this.props.sku)).catch((err) => {
+        if (this.unsub) notifyError(err);
+      });
+    }
   }
 
   componentWillUnmount() {
-    this.unwatchHistory?.();
-    this.unwatchHistory = null;
-    this.setSkipAndOffset = null;
+    this.unsub?.();
+    this.unsub = null;
+    this.unwatchSignal?.();
+    this.unwatchSignal = null;
+  }
+
+  /**
+   * Subscribes to the keyed history cache and to the article SSE signal.
+   * The backend re-emits `article-<sku>` whenever the article changes, and
+   * `sseAutomat` reloads the history key for us.
+   */
+  watch() {
+    this.unsub?.();
+    const handle = articleHistoryAutomat.key(String(this.props.sku));
+    this.unsub = handle.subscribe(this, (item) => {
+      const all = Array.isArray(item.data) ? item.data : [];
+      this.setState({ all });
+    });
+
+    this.unwatchSignal?.();
+    this.unwatchSignal = sseAutomat.actions.watchArticle(String(this.props.sku), () => {
+      void articleHistoryAutomat.reload(String(this.props.sku)).catch(() => {});
+    });
+  }
+
+  /** Client-side pagination over the full history list. */
+  pageOf(all, skip) {
+    return all.slice(skip, skip + PAGE_SIZE);
   }
 
   handlePageChange(_event, page) {
-    const skip = (page - 1) * PAGE_SIZE;
-    this.setSkipAndOffset?.(skip, PAGE_SIZE);
-    this.setState({ skip });
+    this.setState({ skip: (page - 1) * PAGE_SIZE });
   }
 
   render() {
-    const { history, total, skip } = this.state;
-    if (history == null || total == null) return null;
+    const { all, skip } = this.state;
+    const total = all.length;
+    const history = this.pageOf(all, skip);
 
     const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
     const currentPage = Math.floor(skip / PAGE_SIZE) + 1;