Create EditNewsForm. Add actions to handle edit events. Create reducer to swap...

Create EditNewsForm. Add actions to handle edit events. Create reducer to swap the new and the old data.

src/actions/news.js

 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 });
+  }
+);

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';

src/components/forms/EditNewsForm.js

+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);

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);

src/reducers/EditNewsReducer.js

+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;
+  }
+};

src/reducers/NewsReducer.js

-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];

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;