diff --git a/src/actions/news.js b/src/actions/news.js
index 90445677d03444e12a69067ff853aceae75682e2..cc564fa280fa61e6ae3aa2749dd5df8401b2a25e 100644
--- a/src/actions/news.js
+++ b/src/actions/news.js
@@ -1,5 +1,6 @@
import { axios } from './auth';
-import { GET_NEWS, WRITE_NEWS, ADD_NEWS, DELETE_NEWS, CLEAR_WRITE } from './types';
+import { GET_NEWS, WRITE_NEWS, ADD_NEWS, DELETE_NEWS,
+ CLEAR_WRITE, SELECT_NEWS, EDIT_NEWS } from './types';
export const getNews = () => (
async (dispatch) => {
@@ -38,6 +39,30 @@ export const postNews = ({ title, author, text }) => (
}
);
+export const editNews = ({ id, title, editedBy, text }) => (
+ async (dispatch) => {
+ try {
+ const response = await axios.patch(`/api/v1/news/${id}/`, {
+ author: editedBy,
+ title,
+ text,
+ });
+ if (response.data.id) {
+ alert('Sikeres mentĂŠs!');
+ dispatch({
+ type: EDIT_NEWS,
+ payload: response.data,
+
+ });
+ } else {
+ alert('MentĂŠs nem sikerĂźlt!');
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ }
+);
+
export const deleteNews = news => (
async (dispatch) => {
try {
@@ -67,3 +92,9 @@ export const clearWrite = () => (
dispatch({ type: CLEAR_WRITE });
}
);
+
+export const setSelectedNews = item => (
+ (dispatch) => {
+ dispatch({ type: SELECT_NEWS, payload: item });
+ }
+);
diff --git a/src/actions/types.js b/src/actions/types.js
index 51fd06f8f252b9e2302c28a1d801c6d511d738bd..177bbd756bb8212baabdd05a82dd959c67c65514 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -8,3 +8,5 @@ export const WRITE_NEWS = 'write_news';
export const CLEAR_WRITE = 'clear_write';
export const ADD_NEWS = 'add_news';
export const DELETE_NEWS = 'delete_news';
+export const EDIT_NEWS = 'edit_news';
+export const SELECT_NEWS = 'select_news';
diff --git a/src/components/forms/EditNewsForm.js b/src/components/forms/EditNewsForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..36d5f2953ab7cad0cdc8eaad0f18a975623fea06
--- /dev/null
+++ b/src/components/forms/EditNewsForm.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+
+import { writeNews, editNews, clearWrite } from '../../actions/news';
+
+class EditNewsForm extends Component {
+ 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.Header>SzerkesztĂŠs:</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.editNews({
+ id, title, text, editedBy,
+ });
+ this.props.clearWrite();
+ }}
+ >
+ <Icon name='checkmark' /> Edit
+ </Button>
+ </Modal.Actions>
+ </Modal>
+ );
+ }
+}
+
+const mapStateToProps = ({ user, selectedNews }) => ({ user, selectedNews });
+
+export default connect(mapStateToProps, {
+ editNews, writeNews, clearWrite,
+})(EditNewsForm);
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index 4a2a414981ad0a7e7355364443725ed4564dcc97..13145c6c01622cc7ae5e6d60b74aa8e22bcf3d4d 100644
--- a/src/components/pages/News.js
+++ b/src/components/pages/News.js
@@ -2,8 +2,9 @@ import React, { Component } from 'react';
import { Container, Header, Segment, Divider, List, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
import AddNewsForm from '../forms/AddNewsForm';
+import EditNewsForm from '../forms/EditNewsForm';
-import { getNews, deleteNews } from '../../actions/news';
+import { getNews, deleteNews, setSelectedNews } from '../../actions/news';
class News extends Component {
componentWillMount() {
@@ -16,6 +17,7 @@ class News extends Component {
{ index > 0 ? <Divider /> : ''}
<Header as='h3' style={{ fontSize: '2em' }}>{item.title}</Header>
<p style={{ fontSize: '1.33em' }}>{item.text}</p>
+ <EditNewsForm onClick={() => this.props.setSelectedNews(item)} />
<Button
color='red'
size='mini'
@@ -80,4 +82,4 @@ class News extends Component {
const mapStateToProps = ({ news }) => ({ news });
-export default connect(mapStateToProps, { getNews, deleteNews })(News);
+export default connect(mapStateToProps, { getNews, deleteNews, setSelectedNews })(News);
diff --git a/src/reducers/EditNewsReducer.js b/src/reducers/EditNewsReducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..5a0ead1a0221a31f377978a594d131dc9b0849fc
--- /dev/null
+++ b/src/reducers/EditNewsReducer.js
@@ -0,0 +1,16 @@
+import { WRITE_NEWS, CLEAR_WRITE, SELECT_NEWS } from '../actions/types';
+
+const INITIAL_STATE = { };
+
+export default (state = INITIAL_STATE, action) => {
+ switch (action.type) {
+ case SELECT_NEWS:
+ return 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 4b8c8547aeeb3b318557000dc55fc879a0155e76..68a263deafa4dec0fd5a14020d44e65bb6b7581b 100644
--- a/src/reducers/NewsReducer.js
+++ b/src/reducers/NewsReducer.js
@@ -1,4 +1,4 @@
-import { GET_NEWS, ADD_NEWS, DELETE_NEWS } from '../actions/types';
+import { GET_NEWS, ADD_NEWS, DELETE_NEWS, EDIT_NEWS } from '../actions/types';
const INITIAL_STATE = [];
@@ -8,6 +8,10 @@ export default (state = INITIAL_STATE, action) => {
return action.payload;
case ADD_NEWS:
return [action.payload, ...state];
+ case EDIT_NEWS:
+ const array = state.filter(item => item.id === action.payload.id);
+ state.splice(state.indexOf(array.pop()), 1, action.payload);
+ return [...state];
case DELETE_NEWS:
state.splice(state.indexOf(action.payload), 1);
return [...state];
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 8ffee6c93e483b41482af367ac7217ea28f35f6b..370c0afc2a7d0b08ef7dae9b4ea79c79fe2c6694 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
import UserReducer from './UserReducer';
import NewsReducer from './NewsReducer';
import AddNewsReducer from './AddNewsReducer';
+import EditNewsReducer from './EditNewsReducer';
const rootReducer = combineReducers({
user: UserReducer,
news: NewsReducer,
newNews: AddNewsReducer,
+ selectedNews: EditNewsReducer,
});
export default rootReducer;