From 660a41c394fc7deb2cc375a622b476f59be14782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Tue, 18 Dec 2018 20:06:41 +0100
Subject: [PATCH] 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 | 30 ++++++++++++++-
src/actions/types.js | 3 ++
src/components/forms/AddNewsForm.js | 51 +++++++++++++++++++++++++
src/components/pages/News.js | 58 ++++++-----------------------
src/reducers/AddNewsReducer.js | 6 ++-
src/reducers/NewsReducer.js | 9 ++++-
6 files changed, 106 insertions(+), 51 deletions(-)
create mode 100644 src/components/forms/AddNewsForm.js
diff --git a/src/actions/news.js b/src/actions/news.js
index d9192b0..5d8c48b 100644
--- a/src/actions/news.js
+++ b/src/actions/news.js
@@ -1,5 +1,5 @@
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 });
+ }
+);
diff --git a/src/actions/types.js b/src/actions/types.js
index c959455..54bb782 100644
--- a/src/actions/types.js
+++ b/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'
diff --git a/src/components/forms/AddNewsForm.js b/src/components/forms/AddNewsForm.js
new file mode 100644
index 0000000..1c28bef
--- /dev/null
+++ b/src/components/forms/AddNewsForm.js
@@ -0,0 +1,51 @@
+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);
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index 730c143..6cea137 100644
--- a/src/components/pages/News.js
+++ b/src/components/pages/News.js
@@ -1,10 +1,10 @@
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);
diff --git a/src/reducers/AddNewsReducer.js b/src/reducers/AddNewsReducer.js
index 3c05bdb..0010ea8 100644
--- a/src/reducers/AddNewsReducer.js
+++ b/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;
}
diff --git a/src/reducers/NewsReducer.js b/src/reducers/NewsReducer.js
index 071d2d1..db1d57c 100644
--- a/src/reducers/NewsReducer.js
+++ b/src/reducers/NewsReducer.js
@@ -1,4 +1,4 @@
-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;
}
--
GitLab