Extract the add news form to a new file. Create deleteNews action, and connect...

Extract the add news form to a new file. Create deleteNews action, and connect it to the news list as a Delete button.

src/actions/news.js

 import { axios } from './auth'
-import { GET_NEWS, CLEAR_WRITE, WRITE_NEWS } from './types'
+import { GET_NEWS, WRITE_NEWS, ADD_NEWS, DELETE_NEWS, CLEAR_WRITE } from './types'
 
 export const getNews = () => (
   async (dispatch) => {
@@ -25,6 +25,10 @@ export const postNews = ({title, author, text}) =>(
       })
       if (response.data.id) {
         alert('Sikeres mentés!');
+        dispatch({
+          type: ADD_NEWS,
+          payload: response.data,
+        });
       } else {
         alert('Mentés nem sikerült!');
       }
@@ -34,8 +38,32 @@ export const postNews = ({title, author, text}) =>(
     }
 );
 
+export const deleteNews = (news) =>(
+  async(dispatch) =>{
+    try{
+      const response = await axios.delete(`/api/v1/news/${news.id}/`);
+      if (!response.data.id) {
+        alert('Sikeres törlés!');
+        dispatch({
+          type: DELETE_NEWS,
+          payload: news,
+        });
+      } else {
+        alert('A törlés nem sikerült!');
+      }
+    }catch(e){
+      console.log(e);
+    }
+  });
+
 export const writeNews = ({target : {name, value}}) => (
   (dispatch) => {
     dispatch({ type: WRITE_NEWS, payload: value, target: name });
   }
 );
+
+export const clearWrite = () => (
+  (dispatch) => {
+    dispatch({ type: CLEAR_WRITE });
+  }
+);

src/actions/types.js

@@ -5,3 +5,6 @@ export const PROFILE_CHANGE = 'profile_change';
 export const GROUP_CHANGE = 'group_change';
 
 export const WRITE_NEWS = 'write_news';
+export const CLEAR_WRITE = 'clear_write';
+export const ADD_NEWS = 'add_news';
+export const DELETE_NEWS = 'delete_news'

src/components/forms/AddNewsForm.js

+import React, { Component } from 'react';
+import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+
+import { postNews, writeNews, clearWrite } from '../../actions/news.js'
+
+class AddNewsForm extends Component {
+
+  render(){
+    const { title, text } = this.props.newNews;
+    const author = this.props.user.id;
+    return (
+    <Modal trigger={<Button >Add news</Button>}>
+    <Modal.Header>Új hír:</Modal.Header>
+    <Modal.Content>
+    <Form>
+      <Form.Field
+        control={Input}
+        label='Title'
+        name='title'
+        onChange={e => this.props.writeNews(e)}
+        value={title}
+        placeholder='Title' />
+      <Form.Field
+        control={TextArea}
+        label='Text'
+        name='text'
+        onChange={e => this.props.writeNews(e)}
+        value={text}
+        placeholder='Tell us what you want...' />
+    </Form>
+    </Modal.Content>
+    <Modal.Actions>
+       <Button inverted color='red' >
+         <Icon name='remove' /> Cancel
+       </Button>
+       <Button
+         inverted color='green'
+         onClick={() => {this.props.postNews({title, text, author});
+                         this.props.clearWrite()}}>
+         <Icon name='checkmark' /> Add
+       </Button>
+     </Modal.Actions>
+  </Modal>
+  );
+  }
+}
+
+const mapStateToProps = ({ newNews, user }) => ({ newNews, user });
+
+export default connect(mapStateToProps, { postNews, writeNews, clearWrite  })(AddNewsForm);

src/components/pages/News.js

 import React, { Component } from 'react';
-import { Container, Header, Segment, Divider,
-        List, Modal, Button, Image, Form, Input, TextArea, Checkbox, Icon } from 'semantic-ui-react';
+import { Container, Header, Segment, Divider, List, Modal,
+         Button, Image, Form, Input, TextArea, Checkbox, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
+import AddNewsForm  from '../forms/AddNewsForm'
 
-import { getNews, } from '../../actions';
-import { postNews, writeNews } from '../../actions/news.js'
+import { getNews, deleteNews } from '../../actions/news'
 
 class News extends Component {
 
@@ -12,46 +12,6 @@ class News extends Component {
     this.props.getNews();
   }
 
-
-  render_add_news(){
-    const { title, text } = this.props.newNews;
-    const author = this.props.user.id;
-    return (
-    <Modal trigger={<Button >Add news</Button>}>
-    <Modal.Header>Új hír:</Modal.Header>
-    <Modal.Content>
-    <Form>
-      <Form.Field
-        control={Input}
-        label='Title'
-        name='title'
-        onChange={e => this.props.writeNews(e)}
-        value={title}
-        placeholder='Title' />
-      <Form.Field
-        control={TextArea}
-        label='Text'
-        name='text'
-        onChange={e => this.props.writeNews(e)}
-        value={text}
-        placeholder='Tell us what you want...' />
-    </Form>
-    </Modal.Content>
-    <Modal.Actions>
-       <Button inverted color='red' >
-         <Icon name='remove' /> Cancel
-       </Button>
-       <Button
-         inverted color='green'
-         onClick={() => this.props.postNews({title, text, author})}>
-         <Icon name='checkmark' /> Add
-       </Button>
-     </Modal.Actions>
-  </Modal>
-
-);
-  }
-
   render_news() {
     const news = this.props.news;
 
@@ -60,6 +20,10 @@ class News extends Component {
         { index > 0 ? <Divider /> : ''}
         <Header as='h3' style={{ fontSize: '2em' }}>{item.title}</Header>
         <p style={{ fontSize: '1.33em' }}>{item.text}</p>
+        <Button
+          color='red'
+          size='mini'
+          onClick={() => this.props.deleteNews(item)}  >Delete</Button>
       </div>
     ));
 
@@ -104,7 +68,7 @@ class News extends Component {
         */}
 
         <Segment floated={'left'} style={{ padding: '3em 3em' }} vertical>
-          {this.render_add_news()}
+          <AddNewsForm />
           <Container text textAlign = {'center'}>
             {this.render_news()}
           </Container>
@@ -120,6 +84,6 @@ class News extends Component {
 }
 
 
-const mapStateToProps = ({ news, newNews, user }) => ({ news, newNews, user });
+const mapStateToProps = ({ news }) => ({ news });
 
-export default connect(mapStateToProps, { getNews, postNews, writeNews,  })(News);
+export default connect(mapStateToProps, { getNews, deleteNews })(News);

src/reducers/AddNewsReducer.js

@@ -4,8 +4,10 @@ const INITIAL_STATE = { title: '', text: ''};
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
-     case WRITE_NEWS:
-       return {...state, [action.target]: action.payload}
+    case WRITE_NEWS:
+      return {...state, [action.target]: action.payload}
+    case CLEAR_WRITE:
+      return INITIAL_STATE;
     default:
       return state;
   }

src/reducers/NewsReducer.js

-import { GET_NEWS } from '../actions/types';
+import { GET_NEWS, ADD_NEWS, DELETE_NEWS } from '../actions/types';
 
 const INITIAL_STATE = [];
 
@@ -6,6 +6,13 @@ export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case GET_NEWS:
       return action.payload;
+    case ADD_NEWS:
+      return [action.payload, ...state];
+    case DELETE_NEWS:
+      let index = state.indexOf(action.payload);
+      let array = [...state];
+      array.splice(index, 1);
+      return [...array];
     default:
       return state;
   }