From 631eac244837dc71672dd6dcbd797a129e098676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Wed, 19 Dec 2018 21:41:39 +0100
Subject: [PATCH] Make the modal disappear after confirm and when click close.
 Style the code

---
 src/components/forms/AddNewsForm.js  | 27 ++++++++++++++++++++++++---
 src/components/forms/EditNewsForm.js | 22 ++++++++++++++++++++--
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/AddNewsForm.js b/src/components/forms/AddNewsForm.js
index 70fe2f7..176f677 100644
--- a/src/components/forms/AddNewsForm.js
+++ b/src/components/forms/AddNewsForm.js
@@ -5,11 +5,26 @@ import { connect } from 'react-redux';
 import { postNews, writeNews, clearWrite } from '../../actions/news';
 
 class AddNewsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
   render() {
     const { title, text } = this.props.newNews;
     const author = this.props.user.id;
     return (
-      <Modal trigger={<Button >Add news</Button>}>
+      <Modal
+        open={this.state.showModal}
+        trigger={
+          <Button
+            onClick={() => { this.setState({ showModal: true }); }}
+          >Add news
+          </Button>
+        }
+      >
         <Modal.Header>Új hír:</Modal.Header>
         <Modal.Content>
           <Form>
@@ -32,14 +47,20 @@ class AddNewsForm extends Component {
           </Form>
         </Modal.Content>
         <Modal.Actions>
-          <Button inverted color='red' >
-            <Icon name='remove' /> Cancel
+          <Button
+            inverted
+            color='red'
+            onClick={() => { this.setState({ showModal: false }); }}
+          >
+            <Icon name='remove' />
+            Cancel
           </Button>
           <Button
             inverted
             color='green'
             onClick={() => {
                     this.props.postNews({ title, text, author });
+                    this.setState({ showModal: false });
                     this.props.clearWrite();
                     }}
           >
diff --git a/src/components/forms/EditNewsForm.js b/src/components/forms/EditNewsForm.js
index 36d5f29..455b956 100644
--- a/src/components/forms/EditNewsForm.js
+++ b/src/components/forms/EditNewsForm.js
@@ -5,11 +5,24 @@ import { connect } from 'react-redux';
 import { writeNews, editNews, clearWrite } from '../../actions/news';
 
 class EditNewsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
   render() {
     const { id, title, text } = this.props.selectedNews;
     const editedBy = this.props.user.id;
     return (
-      <Modal onOpen={this.props.onClick} trigger={<Button size='mini' >Edit</Button>}>
+      <Modal
+        open={this.state.showModal}
+        onOpen={this.props.onClick}
+        trigger={
+          <Button onClick={() => { this.setState({ showModal: true }); }} size='mini' >Edit</Button>
+        }
+      >
         <Modal.Header>SzerkesztĂŠs:</Modal.Header>
         <Modal.Content>
           <Form>
@@ -32,7 +45,11 @@ class EditNewsForm extends Component {
           </Form>
         </Modal.Content>
         <Modal.Actions>
-          <Button inverted color='red' >
+          <Button
+            inverted
+            color='red'
+            onClick={() => { this.setState({ showModal: false }); }}
+          >
             <Icon name='remove' /> Cancel
           </Button>
           <Button
@@ -42,6 +59,7 @@ class EditNewsForm extends Component {
                     this.props.editNews({
                                        id, title, text, editedBy,
                                       });
+                    this.setState({ showModal: false });
                     this.props.clearWrite();
                     }}
           >
-- 
GitLab