sotre

src/components/article/boxes/ArticleViewEANs.jsx

@@ -1,27 +1,31 @@
+import { Component } 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 { useStorageManager } from '../../../api/storageManagerContext';
+import { StorageManagerContext } from '../../../api/storageManagerContext';
 import { requireObject } from '../../../utils/apiShape';
 import { articleEans } from '../../../utils/articleDetail';
 import { PANEL_TILE_KEYS } from '../../../theme';
 
-function PanelValue({ label, children }) {
-  if (children == null || children === '') return null;
-  return (
-    <Box sx={{ mb: 1 }}>
-      {label ? (
-        <Typography variant="caption" color="text.secondary" display="block">
-          {label}
+class PanelValue extends Component {
+  render() {
+    const { label, children } = this.props;
+    if (children == null || children === '') return null;
+    return (
+      <Box sx={{ mb: 1 }}>
+        {label ? (
+          <Typography variant="caption" color="text.secondary" display="block">
+            {label}
+          </Typography>
+        ) : null}
+        <Typography variant="body2" component="div">
+          {children}
         </Typography>
-      ) : null}
-      <Typography variant="body2" component="div">
-        {children}
-      </Typography>
-    </Box>
-  );
+      </Box>
+    );
+  }
 }
 
 function eansDraftValue(article) {
@@ -40,59 +44,79 @@ function eansDraftValid(draft) {
 
 const SECOND_ROW_MIN_HEIGHT = 220;
 
-export default function ArticleViewEANs({ article: articleData, onArticleUpdated }) {
-  const store = useStorageManager();
+class EansDisplay extends Component {
+  render() {
+    const { sku, eans } = this.props;
+    return (
+      <>
+        <PanelValue label="SKU">{sku}</PanelValue>
+        {(eans ?? []).map((ean) => (
+          <PanelValue key={ean} label="EAN">
+            {ean}
+          </PanelValue>
+        ))}
+      </>
+    );
+  }
+}
 
-  const handleSave = async (draft) => {
+class EansEdit extends Component {
+  render() {
+    const { draft, onChange, inputRef } = this.props;
+    return (
+      <Autocomplete
+        fullWidth
+        multiple
+        freeSolo
+        options={[]}
+        value={draft.eans ?? []}
+        onChange={(_event, eans) => onChange({ eans })}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            inputRef={inputRef}
+            label="EANs (Enter zum Hinzufügen)"
+            size="small"
+            slotProps={{ inputLabel: { shrink: true } }}
+          />
+        )}
+      />
+    );
+  }
+}
+
+export default class ArticleViewEANs extends Component {
+  static contextType = StorageManagerContext;
+
+  handleSave = async (draft) => {
+    const { article: articleData, onArticleUpdated } = this.props;
     const eans = (draft.eans ?? [])
       .map((ean) => String(ean).trim())
       .filter((ean) => ean.length > 0);
-    const res = await store.article.setEans(articleData.sku, { eans });
+    const res = await this.context.article.setEans(articleData.sku, { eans });
     requireObject(res, 'PUT /api/article/:sku/eans');
     requireObject(res.article, 'article');
     onArticleUpdated?.(res.article);
   };
 
-  return (
-    <EditablePanelTile
-      wide={1}
-      tileKey={PANEL_TILE_KEYS.identifiers}
-      title="SKU / EAN"
-      minHeight={SECOND_ROW_MIN_HEIGHT}
-      contentAlignItems="flex-start"
-      value={eansDraftValue(articleData)}
-      onSave={handleSave}
-      isDirty={eansDraftDirty}
-      canSave={eansDraftValid}
-      renderDisplay={(saved) => (
-        <>
-          <PanelValue label="SKU">{articleData.sku}</PanelValue>
-          {(saved.eans ?? []).map((ean) => (
-            <PanelValue key={ean} label="EAN">
-              {ean}
-            </PanelValue>
-          ))}
-        </>
-      )}
-      renderEdit={(draft, onChange, inputRef) => (
-        <Autocomplete
-          fullWidth
-          multiple
-          freeSolo
-          options={[]}
-          value={draft.eans ?? []}
-          onChange={(_event, eans) => onChange({ eans })}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              inputRef={inputRef}
-              label="EANs (Enter zum Hinzufügen)"
-              size="small"
-              slotProps={{ inputLabel: { shrink: true } }}
-            />
-          )}
-        />
-      )}
-    />
-  );
+  render() {
+    const { article: articleData } = this.props;
+    const value = eansDraftValue(articleData);
+
+    return (
+      <EditablePanelTile
+        wide={1}
+        tileKey={PANEL_TILE_KEYS.identifiers}
+        title="SKU / EAN"
+        minHeight={SECOND_ROW_MIN_HEIGHT}
+        contentAlignItems="flex-start"
+        value={value}
+        onSave={this.handleSave}
+        isDirty={eansDraftDirty}
+        canSave={eansDraftValid}
+        display={<EansDisplay sku={articleData.sku} eans={value.eans} />}
+        edit={<EansEdit />}
+      />
+    );
+  }
 }