diff --git a/src/actions/auth.js b/src/actions/auth.js index 83463caca7049932819c5b9752490d9a8e9ee949..6ad36fce211c371a926ef86425be4725ca2df31d 100644 --- a/src/actions/auth.js +++ b/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', }); diff --git a/src/actions/news.js b/src/actions/news.js new file mode 100644 index 0000000000000000000000000000000000000000..d9192b0cb8519f89d3f9d028491b1f2790657040 --- /dev/null +++ b/src/actions/news.js @@ -0,0 +1,41 @@ +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 }); + } +); diff --git a/src/actions/types.js b/src/actions/types.js index 1e9da26b22120e378854d0578be9fe10a773ca93..c959455d2ec499a99f0f7c5f2ed1f65f0c9b8741 100644 --- a/src/actions/types.js +++ b/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'; diff --git a/src/components/pages/News.js b/src/components/pages/News.js index d160f296b15d6eaf6ebd53280455313012588c13..730c1436453650da952160e855916e1e9348e9df 100644 --- a/src/components/pages/News.js +++ b/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); diff --git a/src/reducers/AddNewsReducer.js b/src/reducers/AddNewsReducer.js new file mode 100644 index 0000000000000000000000000000000000000000..3c05bdbea4da1ae4cb6f6ec5292e2f9dcdddfb4d --- /dev/null +++ b/src/reducers/AddNewsReducer.js @@ -0,0 +1,12 @@ +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; + } +}; diff --git a/src/reducers/index.js b/src/reducers/index.js index 8fa74b2a23a02498d8b8bc2761cb63e34c4d9e8c..8ffee6c93e483b41482af367ac7217ea28f35f6b 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,10 +1,12 @@ 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;