Create the action to add news, connect it to the form. Separate news actions

src/actions/auth.js

@@ -3,7 +3,7 @@
 import ax from 'axios';
 import { GET_USERDATA, PROFILE_CHANGE, GROUP_CHANGE, GET_NEWS } from './types';
 
-const axios = ax.create({
+export const axios = ax.create({
   xsrfCookieName: 'csrftoken',
   xsrfHeaderName: 'X-CSRFToken',
 });

src/actions/news.js

+import { axios } from './auth'
+import { GET_NEWS, CLEAR_WRITE, WRITE_NEWS } from './types'
+
+export const getNews = () => (
+  async (dispatch) => {
+    try {
+      const response = await axios.get('/api/v1/news');
+      dispatch({
+        type: GET_NEWS,
+        payload: response.data,
+      });
+    } catch(e) {
+    }
+
+  }
+);
+
+export const postNews = ({title, author, text}) =>(
+  async(dispatch) =>{
+    try{
+      const response = await axios.post('/api/v1/news/', {
+        "author": author,
+        "title": title,
+        "text": text,
+      })
+      if (response.data.id) {
+        alert('Sikeres mentés!');
+      } else {
+        alert('Mentés nem sikerült!');
+      }
+    }catch(e){
+        console.log(e);
+      }
+    }
+);
+
+export const writeNews = ({target : {name, value}}) => (
+  (dispatch) => {
+    dispatch({ type: WRITE_NEWS, payload: value, target: name });
+  }
+);

src/actions/types.js

@@ -3,3 +3,5 @@ export const GET_NEWS = 'get_news';
 
 export const PROFILE_CHANGE = 'profile_change';
 export const GROUP_CHANGE = 'group_change';
+
+export const WRITE_NEWS = 'write_news';

src/components/pages/News.js

@@ -3,7 +3,8 @@ import { Container, Header, Segment, Divider,
         List, Modal, Button, Image, Form, Input, TextArea, Checkbox, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 
-import { getNews } from '../../actions';
+import { getNews, } from '../../actions';
+import { postNews, writeNews } from '../../actions/news.js'
 
 class News extends Component {
 
@@ -13,21 +14,36 @@ class News extends Component {
 
 
   render_add_news(){
+    const { title, text } = this.props.newNews;
+    const author = this.props.user.id;
     return (
     <Modal trigger={<Button >Add news</Button>}>
-    <Modal.Header>Select a Photo</Modal.Header>
-    <Modal.Content image>
+    <Modal.Header>Új hír:</Modal.Header>
+    <Modal.Content>
     <Form>
-      <Form.Field control={Input} label='Title' placeholder='Title' />
-      <Form.Field control={TextArea} label='Text' placeholder='Tell us what you wanr...' />
-      <Form.Field control={Checkbox} label='I agree to the Terms and Conditions' />
+      <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 basic color='red' >
+       <Button inverted color='red' >
          <Icon name='remove' /> Cancel
        </Button>
-       <Button color='green'>
+       <Button
+         inverted color='green'
+         onClick={() => this.props.postNews({title, text, author})}>
          <Icon name='checkmark' /> Add
        </Button>
      </Modal.Actions>
@@ -104,6 +120,6 @@ class News extends Component {
 }
 
 
-const mapStateToProps = ({ news }) => ({ news });
+const mapStateToProps = ({ news, newNews, user }) => ({ news, newNews, user });
 
-export default connect(mapStateToProps, { getNews })(News);
+export default connect(mapStateToProps, { getNews, postNews, writeNews,  })(News);

src/reducers/AddNewsReducer.js

+import { WRITE_NEWS, CLEAR_WRITE } from '../actions/types';
+
+const INITIAL_STATE = { title: '', text: ''};
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+     case WRITE_NEWS:
+       return {...state, [action.target]: action.payload}
+    default:
+      return state;
+  }
+};

src/reducers/index.js

 import { combineReducers } from 'redux';
 import UserReducer from './UserReducer';
 import NewsReducer from './NewsReducer';
+import AddNewsReducer from './AddNewsReducer';
 
 const rootReducer = combineReducers({
   user: UserReducer,
   news: NewsReducer,
+  newNews: AddNewsReducer,
 });
 
 export default rootReducer;