u

src/components/article/boxes/ArticleViewName.jsx

@@ -1,7 +1,7 @@
 import { Component, PureComponent } from 'react';
 import { EditablePanelTile } from 'dashgui/panels';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
-import { getCategoryState } from '../../../automats/categoryAutomat';
+import categoryAutomat, { getCategoryState } from '../../../automats/categoryAutomat';
 import artikelAutomat from '../../../automats/artikelAutomat';
 import { getCategoryBreadcrumbs, categoryDisplayName } from '../../../utils/categoryUtils';
 import { Box, Chip, IconButton, Typography } from '@mui/material';
@@ -92,10 +92,29 @@ function categoryLabels(categoryIds, categories, rootCategoryId) {
     .filter((c) => c.label);
 }
 
-class CategoryPills extends Component {
+class CategoryPills extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = { pickerOpen: false, targetPillId: null };
+    const catState = getCategoryState();
+    this.state = {
+      pickerOpen: false,
+      targetPillId: null,
+      categories: catState?.categories ?? categoryAutomat.state.categories,
+      rootCategoryId: catState?.rootCategoryId ?? categoryAutomat.state.rootCategoryId,
+    };
+  }
+
+  componentDidMount() {
+    this._unsubCat = categoryAutomat.subscribe((s) => {
+      this.setState({
+        categories: s.categories,
+        rootCategoryId: s.rootCategoryId,
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    this._unsubCat?.();
   }
 
   handleRemoveCategory = (removeId) => {
@@ -135,8 +154,7 @@ class CategoryPills extends Component {
 
   render() {
     const { categoryIds, editMode } = this.props;
-    const { pickerOpen, targetPillId } = this.state;
-    const { categories, rootCategoryId } = getCategoryState() ?? {};
+    const { pickerOpen, targetPillId, categories, rootCategoryId } = this.state;
     const labels = categoryLabels(categoryIds, categories, rootCategoryId);
 
     const targetNode = categories && targetPillId != null ? categories[String(targetPillId)] : null;