u

src/components/category/NewCategoryTile.jsx

@@ -0,0 +1,56 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+import { enqueueSnackbar } from 'notistack';
+import { ActionTile } from '../tiles';
+import { createCategory as createCategoryThunk } from '../../store/categorySlice';
+import CategoryNameDialog from './CategoryNameDialog';
+
+class NewCategoryTile 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;
+    await this.props.createCategory({ parentId, name }).unwrap();
+    enqueueSnackbar('Kategorie angelegt.', { variant: 'success' });
+  }
+
+  render() {
+    const { parentId, disabled } = this.props;
+
+    return (
+      <>
+        <ActionTile
+          label="Neue Kategorie"
+          disabled={disabled || parentId == null}
+          onClick={this.handleOpen}
+        />
+        <CategoryNameDialog
+          open={this.state.open}
+          mode="create"
+          onClose={this.handleClose}
+          onSubmit={this.handleSubmit}
+        />
+      </>
+    );
+  }
+}
+
+const mapDispatchToProps = {
+  createCategory: createCategoryThunk,
+};
+
+export default connect(null, mapDispatchToProps)(NewCategoryTile);