Create delete action for events

src/actions/statistics.js

@@ -6,6 +6,7 @@ import {
   GET_NOTES_BY_EVENT,
   WRITE_EVENT,
   ADD_EVENT,
+  DELETE_EVENT,
 } from './types';
 
 export const getEvents = () => (
@@ -114,3 +115,21 @@ export const addEvent = ({ name, date }) => (
     }
   }
 );
+
+export const deleteEvent = event => (
+  async (dispatch) => {
+    try {
+      const response = await axios.delete(`/api/v1/events/${event.id}/`);
+      if (!response.data.id) {
+        alert('Sikeres törlés!');
+        dispatch({
+          type: DELETE_EVENT,
+          payload: event,
+        });
+      } else {
+        alert('A törlés nem sikerült!');
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  });

src/actions/types.js

@@ -21,3 +21,4 @@ export const VISITOR_CHANGE = 'visitor_change';
 export const GET_NOTES_BY_EVENT = 'get_notes_by_event';
 export const WRITE_EVENT = 'write_event';
 export const ADD_EVENT = 'add_event';
+export const DELETE_EVENT = 'delete_event';

src/components/pages/Events.js

 import React, { Component } from 'react';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
-import { Container, Table } from 'semantic-ui-react';
+import { Container, Table, Button } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import { getEvents } from '../../actions/statistics';
+import { getEvents, deleteEvent } from '../../actions/statistics';
 import AddEventForm from '../forms/AddEventForm';
 
 class Events extends Component {
@@ -22,6 +22,16 @@ class Events extends Component {
         </Table.Cell>
         <Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
         <Table.Cell>{event.visitor_number}</Table.Cell>
+        <Table.Cell compact>
+          <Button
+            onClick={() => this.props.deleteEvent(event)}
+            color='red'
+            compact
+            size='small'
+          >
+          Delete
+          </Button>
+        </Table.Cell>
       </Table.Row>
     );
     });
@@ -36,6 +46,7 @@ class Events extends Component {
               <Table.HeaderCell>Alkalom neve</Table.HeaderCell>
               <Table.HeaderCell>Dátum</Table.HeaderCell>
               <Table.HeaderCell>Jelen voltak</Table.HeaderCell>
+              <Table.HeaderCell />
             </Table.Row>
           </Table.Header>
 
@@ -51,4 +62,4 @@ class Events extends Component {
 
 const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
 
-export default connect(mapStateToProps, { getEvents })(Events);
+export default connect(mapStateToProps, { getEvents, deleteEvent })(Events);

src/reducers/EventReducer.js

-import { GET_EVENTS, GET_EVENT_BY_ID, VISITOR_CHANGE, WRITE_EVENT, ADD_EVENT } from '../actions/types';
+import {
+  GET_EVENTS,
+  GET_EVENT_BY_ID,
+  VISITOR_CHANGE,
+  WRITE_EVENT,
+  ADD_EVENT,
+  DELETE_EVENT,
+} from '../actions/types';
 
 const INITIAL_STATE = { newEvent: {} };
 
@@ -14,6 +21,9 @@ export default (state = INITIAL_STATE, action) => {
       return { ...state, newEvent: { ...state.newEvent, [action.target]: action.payload } };
     case ADD_EVENT:
       return { ...state, events: [...state.events, action.payload] };
+    case DELETE_EVENT:
+      state.events.splice(state.events.indexOf(action.payload), 1);
+      return { ...state, events: [...state.events] };
     default:
       return state;
   }