Display event notes and notes to trainees, connect creation actions to the button and text area.

src/actions/notes.js

@@ -2,7 +2,8 @@ import axios from './session';
 import {
   GET_NOTES_BY_EVENT,
   WRITE_NOTE,
-  ADD_NOTE,
+  ADD_EVENT_NOTE,
+  CLEAR_WRITE,
 } from './types';
 
 export const getNotesByEvent = id => (
@@ -26,9 +27,9 @@ export const writeNote = (event) => {
 export const postEventNote = ({ eventid, userid, note }) => (
   async (dispatch) => {
     try {
-      const response = await axios.post('/api/v1/note/', {
+      const response = await axios.post('/api/v1/notes/', {
         event: eventid ? eventid : '',
-        user: userid ? eventid : '',
+        profile: userid ? eventid : '',
         note,
       });
       if (response.data.id) {
@@ -37,7 +38,14 @@ export const postEventNote = ({ eventid, userid, note }) => (
           type: ADD_EVENT_NOTE,
           payload: response.data,
         });
+      }
     } catch (e) {
       console.log(e);
     }
   });
+
+export const clearWrite = () => (
+  (dispatch) => {
+    dispatch({ type: CLEAR_WRITE });
+  }
+);

src/actions/statistics.js

@@ -4,7 +4,6 @@ import {
   GET_EVENT_BY_ID,
   GET_TRAINEES,
   VISITOR_CHANGE,
-  GET_NOTES_BY_EVENT,
   WRITE_EVENT,
   ADD_EVENT,
   DELETE_EVENT,

src/components/forms/AddEventForm.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { DateTimeInput } from 'semantic-ui-calendar-react';
-
-// import { clearWrite } from '../../actions/news';
 import { writeEvent, eventDate, addEvent } from '../../actions/statistics'
 
 class AddEventForm extends Component {

src/components/pages/EventDetail.js

@@ -12,7 +12,8 @@ import {
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import { getEventById, getTrainees, visitorChange, getNotesByEvent, submitVisitors } from '../../actions/statistics';
+import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
+import { getNotesByEvent, writeNote, clearWrite, postEventNote } from '../../actions/notes';
 
 class EventDetail extends Component {
   constructor(props) {
@@ -31,7 +32,7 @@ class EventDetail extends Component {
 
   renderTrainees() {
     return this.props.trainees.map((item) => {
-      const isVisitor = this.props.selectedEvent.visitors.find(i => i === item.id);
+      const isVisitor = this.props.selectedEvent.visitors.includes(item.id);
       return (
         <Table.Row>
           <Table.Cell>
@@ -55,6 +56,20 @@ class EventDetail extends Component {
             </Table.Cell>
           }
           <Table.Cell>
+            {this.props.eventNotes.map((note) => {
+              if (note.profile === item.id) {
+                return (
+                  <Comment.Content>
+                    <Comment.Author>{note.created_by_name}</Comment.Author>
+                    <Comment.Text>
+                      {note.note}
+                    </Comment.Text>
+                  </Comment.Content>
+                );
+            }
+            return ('');
+          })
+          }
           </Table.Cell>
         </Table.Row>
       );
@@ -62,7 +77,7 @@ class EventDetail extends Component {
   }
 
   renderEvent() {
-    const { id, name, date, visitors } = this.props.selectedEvent;
+    const { name, date } = this.props.selectedEvent;
     return (
       <Item>
         <Item.Header as='h2'>{name}</Item.Header>
@@ -89,6 +104,8 @@ class EventDetail extends Component {
   }
 
   render() {
+    const event = this.props.selectedEvent;
+    const note = this.props.actualNote;
     return (
       <Container>
         <Container textAlign='center'>
@@ -147,8 +164,22 @@ class EventDetail extends Component {
               ''
             }
             <Form reply>
-              <Form.TextArea />
-              <Button content='Megjegyzés hozzáadása' labelPosition='left' icon='edit' primary />
+              <Form.TextArea
+                value={note.note}
+                onChange={e => this.props.writeNote(e)}
+              />
+              <Button
+                onClick={() => {
+                                this.props.postEventNote({ eventid: event.id,
+                                                          note: note.note });
+                                this.props.clearWrite();
+                              }
+                        }
+                content='Megjegyzés hozzáadása'
+                labelPosition='left'
+                icon='edit'
+                primary
+              />
             </Form>
           </Comment.Group>
         </Container>
@@ -157,6 +188,19 @@ class EventDetail extends Component {
   }
 }
 
-const mapStateToProps = ({ notes: { eventNotes }, events: { selectedEvent }, trainees: { trainees } }) => ({ eventNotes, selectedEvent, trainees });
+const mapStateToProps = ({
+  notes: { eventNotes, actualNote },
+  events: { selectedEvent },
+  trainees: { trainees }
+}) => ({ eventNotes, selectedEvent, trainees, actualNote });
 
-export default connect(mapStateToProps, { getEventById, getTrainees, visitorChange, getNotesByEvent, submitVisitors })(EventDetail);
+export default connect(mapStateToProps, {
+  getEventById,
+  getTrainees,
+  visitorChange,
+  getNotesByEvent,
+  submitVisitors,
+  writeNote,
+  clearWrite,
+  postEventNote,
+})(EventDetail);

src/reducers/NoteReducer.js

-import { GET_NOTES_BY_EVENT, WRITE_NOTE, ADD_EVENT_NOTE } from '../actions/types';
+import {
+  GET_NOTES_BY_EVENT,
+  WRITE_NOTE,
+  ADD_EVENT_NOTE,
+  CLEAR_WRITE,
+} from '../actions/types';
 
 const INITIAL_STATE = { eventNotes: [], actualNote: {} };
 
@@ -10,6 +15,8 @@ export default (state = INITIAL_STATE, action) => {
       return { ...state, actualNote: { ...state.actualNote, note: action.payload } };
     case ADD_EVENT_NOTE:
       return { ...state, eventNotes: [...state.eventNotes, action.payload] };
+    case CLEAR_WRITE:
+      return { ...state, actualNote: { note: '' } };
     default:
       return state;
   }