u

src/components/article/boxes/ArticleViewBrand.jsx

@@ -1,13 +1,11 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import { EditablePanelTile } from '../../panels';
-import { article } from '../../../api';
+import { useStorageManager } from '../../../api/storageManager';
 import { requireDefined, requireObject } from '../../../utils/apiShape';
-import { loadBrands, selectBrands, selectBrandsStatus, upsertBrand } from '../../../store/brandSlice';
 import { notifyError } from '../../../utils/notify';
 import { PANEL_TILE_KEYS } from '../../../theme';
 
@@ -42,14 +40,22 @@ function brandDraftValid(draft) {
 const SECOND_ROW_MIN_HEIGHT = 220;
 
 export default function ArticleViewBrand({ article: articleData, onArticleUpdated }) {
-  const dispatch = useDispatch();
-  const brands = useSelector(selectBrands);
-  const brandsStatus = useSelector(selectBrandsStatus);
+  const store = useStorageManager();
+  const [brands, setBrands] = useState([]);
 
   useEffect(() => {
-    if (brandsStatus !== 'idle') return;
-    void dispatch(loadBrands()).unwrap().catch((err) => notifyError(err));
-  }, [dispatch, brandsStatus]);
+    let cancelled = false;
+    store.brandPromise
+      .then((list) => {
+        if (!cancelled) setBrands(list);
+      })
+      .catch((err) => {
+        if (!cancelled) notifyError(err);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [store]);
 
   const handleSave = async (draft) => {
     const name = String(draft.name ?? '').trim();
@@ -65,12 +71,16 @@ export default function ArticleViewBrand({ article: articleData, onArticleUpdate
     if (existing) {
       brandId = existing.id;
     } else {
-      const created = await dispatch(upsertBrand({ name })).unwrap();
-      requireDefined(created.id, 'brand.id');
-      brandId = created.id;
+      const createdRes = await store.brand.upsert({ name });
+      requireObject(createdRes, 'PUT /api/brand');
+      requireObject(createdRes.brand, 'brand');
+      requireDefined(createdRes.brand.id, 'brand.id');
+      brandId = createdRes.brand.id;
+      const nextBrands = await store.updateBrand();
+      setBrands(nextBrands);
     }
 
-    const res = await article.setBrandIdBySku(articleData.sku, brandId);
+    const res = await store.article.setBrand(articleData.sku, { brandId });
     requireObject(res, 'PUT /api/article/:sku/brand');
     requireObject(res.article, 'article');
     onArticleUpdated?.(res.article);