Create delete action for notes, create modal for display notes

src/actions/auth.js

@@ -9,6 +9,7 @@ export const getUserData = () => (
       const {
         id,
         join_date: joinDate,
+        full_name: fullName,
         nick,
         motivation_about: motivationAbout,
         motivation_profession: motivationProfession,
@@ -36,7 +37,7 @@ export const getUserData = () => (
       dispatch({
         type: GET_USERDATA,
         payload: {
-          id, joinDate, nick, motivationAbout, motivationProfession, motivationExercise, signed, groups, role, permission
+          id, fullName, joinDate, nick, motivationAbout, motivationProfession, motivationExercise, signed, groups, role, permission
         },
       });
     } catch (e) {

src/actions/notes.js

@@ -4,6 +4,7 @@ import {
   WRITE_NOTE,
   ADD_EVENT_NOTE,
   CLEAR_WRITE,
+  DELETE_NOTE,
 } from './types';
 
 export const getNotesByEvent = id => (
@@ -49,3 +50,21 @@ export const clearWrite = () => (
     dispatch({ type: CLEAR_WRITE });
   }
 );
+
+export const deleteNote = note => (
+  async (dispatch) => {
+    try {
+      const response = await axios.delete(`/api/v1/notes/${note.id}/`);
+      if (!response.data.id) {
+        alert('Sikeres törlés!');
+        dispatch({
+          type: DELETE_NOTE,
+          payload: note,
+        });
+      } else {
+        alert('A törlés nem sikerült!');
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  });

src/actions/types.js

@@ -27,6 +27,7 @@ export const DELETE_EVENT = 'delete_event';
 export const WRITE_NOTE = 'write_note';
 export const CLEAR_NOTE = 'clear_note';
 export const ADD_EVENT_NOTE = 'add_note';
+export const DELETE_NOTE = 'delete_note';
 
 export const GET_PROFILES = 'get_profiles';
 export const SET_STATUS = 'set_status';

src/components/pages/CommentModal.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Button, Comment, Modal } from 'semantic-ui-react';
+import { deleteNote } from '../../actions/notes';
+import ConfirmModal from '../forms/ConfirmModal';
+
+class CommentModal extends Component {
+  renderComments() {
+    const { notes, user } = this.props;
+    return notes.map((note) => {
+      return (
+        <Comment key={note.id}>
+          <Comment.Content>
+            <Comment.Author>{note.created_by_name}</Comment.Author>
+            <Comment.Text>
+              {note.note}
+            </Comment.Text>
+            { note.created_by_name === user.fullName ?
+              <ConfirmModal
+                text='törölni akarod a megjegyzést'
+                button={
+                  <Button
+                    compact
+                    color='red'
+                    size='mini'
+                  >
+                  Delete
+                  </Button>
+                   }
+                onAccept={() => this.props.deleteNote(note)}
+              />
+              :
+              null }
+          </Comment.Content>
+        </Comment>
+      );
+    });
+  }
+  render() {
+    return (
+      <Modal
+        closeIcon
+        trigger={
+          <Button icon='comment alternate outline' />
+        }
+      >
+        <Modal.Header>Megjegyzések:</Modal.Header>
+        <Modal.Content>
+          {this.renderComments()}
+        </Modal.Content>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ user }) => ({ user });
+
+export default connect(mapStateToProps, { deleteNote })(CommentModal);

src/components/pages/EventDetail.js

@@ -11,9 +11,9 @@ import {
 import { connect } from 'react-redux';
 import moment from 'moment';
 import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
-import { getNotesByEvent, writeNote, clearWrite, postEventNote } from '../../actions/notes';
+import { getNotesByEvent, writeNote, clearWrite, postEventNote, deleteNote } from '../../actions/notes';
 import TraineeTableRow from './TraineeTableRow';
-
+import ConfirmModal from '../forms/ConfirmModal';
 
 class EventDetail extends Component {
   constructor(props) {
@@ -74,6 +74,19 @@ class EventDetail extends Component {
                 {note.note}
               </Comment.Text>
             </Comment.Content>
+            <ConfirmModal
+              text='törölni akarod a megjegyzést'
+              button={
+                <Button
+                  compact
+                  color='red'
+                  size='mini'
+                >
+                  Delete
+                </Button>
+              }
+              onAccept={() => this.props.deleteNote(note)}
+            />
           </Comment>);
       }
       return '';
@@ -177,4 +190,5 @@ export default connect(mapStateToProps, {
   writeNote,
   clearWrite,
   postEventNote,
+  deleteNote,
 })(EventDetail);

src/components/pages/TraineeTableRow.js

@@ -10,8 +10,8 @@ import {
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { visitorChange } from '../../actions/statistics';
-import { writeNote, clearWrite, postEventNote } from '../../actions/notes';
-
+import { writeNote, clearWrite, postEventNote, deleteNote } from '../../actions/notes';
+import CommentModal from './CommentModal'
 
 class TraineeTableRow extends Component {
   constructor(props) {
@@ -94,21 +94,7 @@ class TraineeTableRow extends Component {
               </Grid.Column>
               <Grid.Column floated='right' width={4} textAlign='right'>
                 {notes.length > 0 ?
-                  <Popup
-                    on='click'
-                    position='bottom left'
-                    trigger={<Button icon='comment alternate outline' onClick={this.triggerMore} />}
-                    content={notes.map((note) => {
-                         return (
-                           <Comment.Content>
-                             <Comment.Author>{note.created_by_name}</Comment.Author>
-                             <Comment.Text>
-                               {note.note}
-                             </Comment.Text>
-                           </Comment.Content>
-                         );
-                        })}
-                  />
+                  <CommentModal notes={notes} />
              :
              null}
                 <Popup
@@ -146,4 +132,4 @@ class TraineeTableRow extends Component {
   }
 }
 
-export default connect(() => {}, { writeNote, clearWrite, postEventNote, visitorChange})(TraineeTableRow)
+export default connect(() => ({}), { writeNote, clearWrite, postEventNote, visitorChange, deleteNote })(TraineeTableRow)

src/reducers/NoteReducer.js

@@ -3,6 +3,7 @@ import {
   WRITE_NOTE,
   ADD_EVENT_NOTE,
   CLEAR_WRITE,
+  DELETE_NOTE,
 } from '../actions/types';
 
 const INITIAL_STATE = { eventNotes: [], actualNote: {} };
@@ -17,6 +18,9 @@ export default (state = INITIAL_STATE, action) => {
       return { ...state, eventNotes: [...state.eventNotes, action.payload] };
     case CLEAR_WRITE:
       return { ...state, actualNote: { note: '' } };
+    case DELETE_NOTE:
+      state.eventNotes.splice(state.eventNotes.indexOf(action.payload), 1);
+      return { ...state, eventNotes: [...state.eventNotes] };
     default:
       return state;
   }