Add EditEventForm, actions to handle editing, add cases to EventReducer

src/actions/statistics.js

@@ -12,6 +12,9 @@ import {
   SET_STATUS,
   ABSENT_CHANGE,
   CHANGE_NO,
+  EDIT_EVENT,
+  WRITE_EDITED_EVENT,
+  SELECT_EVENT_FOR_EDIT,
 } from './types';
 
 export const getStaffEvents = () => (
@@ -104,10 +107,39 @@ export const writeEvent = ({ target: { name, value } }) => (
   }
 );
 
+export const selectEventForEdit = editEvent => (
+  (dispatch) => {
+    dispatch({ type: SELECT_EVENT_FOR_EDIT, payload: editEvent });
+  }
+);
 
-export const eventDate = (name, value) => (
+export const writeEditEvent = ({ target: { name, value } }) => (
   (dispatch) => {
-    dispatch({ type: WRITE_EVENT, payload: value, target: name });
+    dispatch({ type: WRITE_EDITED_EVENT, payload: value, target: name });
+  }
+);
+
+export const editEvent = ({ id, name, description, date }) => (
+  async (dispatch) => {
+    try {
+      const response = await axios.patch(`/api/v1/staff_events/${id}/`, {
+        name,
+        description,
+        date,
+      });
+      if (response.data.id) {
+        alert('Sikeres mentés!');
+        dispatch({
+          type: EDIT_EVENT,
+          payload: response.data,
+
+        });
+      } else {
+        alert('Mentés nem sikerült!');
+      }
+    } catch (e) {
+      console.log(e);
+    }
   }
 );
 

src/actions/types.js

@@ -21,7 +21,10 @@ export const CHANGE_NO = 'change_no';
 
 export const GET_NOTES_BY_EVENT = 'get_notes_by_event';
 export const WRITE_EVENT = 'write_event';
+export const WRITE_EDITED_EVENT = 'write_selected_event';
 export const ADD_EVENT = 'add_event';
+export const SELECT_EVENT_FOR_EDIT = 'select_event_for_edit';
+export const EDIT_EVENT = 'edit_event';
 export const DELETE_EVENT = 'delete_event';
 
 export const WRITE_NOTE = 'write_note';

src/components/forms/AddEventForm.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Modal, Button, Form, Input, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { DateTimeInput } from 'semantic-ui-calendar-react';
-import { writeEvent, eventDate, addEvent } from '../../actions/statistics'
+import { writeEvent, addEvent } from '../../actions/statistics'
 import { clearWrite } from '../../actions/news'
 
 class AddEventForm extends Component {
@@ -21,7 +21,7 @@ class AddEventForm extends Component {
     if (this.state.hasOwnProperty(name)) {
       this.setState({ [name]: value });
     }
-    this.props.eventDate(name, value)
+    this.props.writeEvent({ target: {name, value} });
   }
 
   render() {
@@ -89,6 +89,7 @@ class AddEventForm extends Component {
             onClick={() => {
                     this.props.addEvent(this.props.newEvent);
                     this.setState({ showModal: false, date: '' });
+                    this.props.clearWrite();
                     }}
           >
             <Icon name='checkmark' /> Hozzáad
@@ -101,4 +102,4 @@ class AddEventForm extends Component {
 
 const mapStateToProps = ({ events: { newEvent } }) => ({ newEvent });
 
-export default connect(mapStateToProps, { writeEvent, addEvent, eventDate, clearWrite })(AddEventForm);
+export default connect(mapStateToProps, { writeEvent, addEvent, clearWrite })(AddEventForm);

src/components/forms/EditEventForm.js

+import React, { Component } from 'react';
+import { Modal, Button, Form, Input, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { DateTimeInput } from 'semantic-ui-calendar-react';
+import {
+  writeEditEvent,
+  editEvent,
+} from '../../actions/statistics'
+import { clearWrite } from '../../actions/news'
+
+class EditEventForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+      date: '',
+    };
+  }
+
+  // Handling change in redux action creator throws an exception
+  // Temporal solotion using the components state to display, instead redux state
+  handleChange = (event, {name, value}) => {
+    if (this.state.hasOwnProperty(name)) {
+      this.setState({ [name]: value });
+    }
+    this.props.writeEditEvent({target: {name: name, value: value}})
+  }
+
+  render() {
+    const { name, date, description } = this.props.editedEvent;
+    return (
+      <Modal
+        open={this.state.showModal}
+        trigger={
+          <Button
+            compact
+            onClick={() => { this.props.onClick();
+                             this.setState({ showModal: true }); }}
+            size='mini'
+          >
+            Szerkeszt
+          </Button>
+        }
+      >
+        <Modal.Header>Alkalom szerkesztése:</Modal.Header>
+        <Modal.Content
+          style={{
+            paddingTop: '20px',
+          }}
+        >
+          <Form>
+            <Form.Field
+              control={Input}
+              label='Név'
+              name='name'
+              onChange={e => this.props.writeEditEvent(e)}
+              value={name}
+              style={{
+                marginBottom: '20px',
+              }}
+              placeholder='Név'
+            />
+            <Form.TextArea
+              name='description'
+              label='Leírás:'
+              placeholder='Rövid leírás'
+              value={description}
+              onChange={e => this.props.writeEditEvent(e)}
+            />
+            <DateTimeInput
+              name="date"
+              label="Dátum:"
+              dateFormat='YYYY-MM-DD'
+              placeholder="Dátum"
+              value={date}
+              iconPosition="left"
+              onChange={this.handleChange}
+            />
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color='red'
+            onClick={() => { this.setState({ showModal: false });
+                             this.props.clearWrite();
+                             }}
+          >
+            <Icon name='remove' />
+            Mégse
+          </Button>
+          <Button
+            inverted
+            color='green'
+            onClick={() => {
+                    this.props.editEvent(this.props.editedEvent);
+                    this.setState({ showModal: false, date: '' });
+                    this.props.clearWrite();
+                    }}
+          >
+            <Icon name='checkmark' /> Szerkeszt
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ events: { editedEvent } }) => ({ editedEvent });
+
+export default connect(mapStateToProps, { writeEditEvent, editEvent, clearWrite })(EditEventForm);

src/components/pages/Events.js

@@ -3,8 +3,9 @@ import moment from 'moment';
 import { Link } from 'react-router-dom';
 import { Container, Table, Button } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import { getStaffEvents, deleteEvent } from '../../actions/statistics';
+import { getStaffEvents, deleteEvent, selectEventForEdit } from '../../actions/statistics';
 import AddEventForm from '../forms/AddEventForm';
+import EditEventForm from '../forms/EditEventForm';
 import ConfirmModal from '../forms/ConfirmModal';
 
 class Events extends Component {
@@ -37,6 +38,7 @@ class Events extends Component {
                }
             onAccept={() => this.props.deleteEvent(event)}
           />
+          <EditEventForm onClick={() => this.props.selectEventForEdit(event)} />
         </Table.Cell>
       </Table.Row>
     );
@@ -68,4 +70,4 @@ class Events extends Component {
 
 const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
 
-export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events);
+export default connect(mapStateToProps, { getStaffEvents, selectEventForEdit, deleteEvent })(Events);

src/reducers/EventReducer.js

@@ -8,9 +8,12 @@ import {
   CLEAR_WRITE,
   ABSENT_CHANGE,
   CHANGE_NO,
+  SELECT_EVENT_FOR_EDIT,
+  EDIT_EVENT,
+  WRITE_EDITED_EVENT,
 } from '../actions/types';
 
-const INITIAL_STATE = { events: [], newEvent: {} };
+const INITIAL_STATE = { events: [], newEvent: {}, editedEvent: {} };
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
@@ -75,8 +78,16 @@ export default (state = INITIAL_STATE, action) => {
     case DELETE_EVENT:
       state.events.splice(state.events.indexOf(action.payload), 1);
       return { ...state, events: [...state.events] };
+    case SELECT_EVENT_FOR_EDIT:
+      return { ...state, editedEvent: action.payload }
+    case WRITE_EDITED_EVENT:
+      return { ...state, editedEvent: { ...state.editedEvent, [action.target]: action.payload } };
+    case EDIT_EVENT:
+      const index = state.events.findIndex(item => item.id === action.payload.id);
+      state.events.splice(index, 1, action.payload);
+      return { ...state, events: [...state.events] };
     case CLEAR_WRITE:
-      return { ...state, newEvent: {} };
+      return { ...state, newEvent: {}, editedEvent: {} };
     default:
       return state;
   }