u

src/components/article/NewArticleTile.jsx

@@ -0,0 +1,58 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+import { enqueueSnackbar } from 'notistack';
+import { ActionTile } from '../tiles';
+import { createArticle as createArticleThunk } from '../../store/categorySlice';
+import ArticleNameDialog from './ArticleNameDialog';
+
+class NewArticleTile extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { open: false };
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleOpen() {
+    this.setState({ open: true });
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+  }
+
+  async handleSubmit({ name }) {
+    const { parentId } = this.props;
+    const article = await this.props.createArticle({ parentId, name }).unwrap();
+    enqueueSnackbar('Artikel angelegt.', { variant: 'success' });
+    if (article) {
+      this.props.onOpenArticle?.(article);
+    }
+  }
+
+  render() {
+    const { parentId, disabled } = this.props;
+
+    return (
+      <>
+        <ActionTile
+          label="Neuer Artikel"
+          disabled={disabled || parentId == null}
+          onClick={this.handleOpen}
+        />
+        <ArticleNameDialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          onSubmit={this.handleSubmit}
+        />
+      </>
+    );
+  }
+}
+
+const mapDispatchToProps = {
+  createArticle: createArticleThunk,
+};
+
+export default connect(null, mapDispatchToProps)(NewArticleTile);