diff --git a/src/components/forms/AddNewsForm.js b/src/components/forms/AddNewsForm.js index 70fe2f718a4aa167e4dddf8047837a6c2b30e436..176f677d26430a582564bc503695b1e5a86478d1 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 36d5f2953ab7cad0cdc8eaad0f18a975623fea06..455b956d56fa125c7147b00b751b5c316223d870 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(); }} >