Add Comment section to Applicant profile, create some action to handle the...

Add Comment section to Applicant profile, create some action to handle the creation and get the notes by profile

src/actions/notes.js

@@ -5,6 +5,8 @@ import {
   ADD_EVENT_NOTE,
   CLEAR_WRITE,
   DELETE_NOTE,
+  GET_NOTES_BY_PROFILE,
+  ADD_PROFILE_NOTE,
 } from './types';
 
 export const getNotesByEvent = id => (
@@ -21,11 +23,25 @@ export const getNotesByEvent = id => (
   }
 );
 
+export const getNotesByProfile = id => (
+  async (dispatch) => {
+    try {
+      const response = await axios.get('/api/v1/notes/', { params: { profileID: id } });
+      dispatch({
+        type: GET_NOTES_BY_PROFILE,
+        payload: response.data,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
+
 export const writeNote = (event) => {
   return (dispatch => (dispatch({ type: WRITE_NOTE, payload: event.target.value })));
 };
 
-export const postEventNote = ({ eventid, userid, note }) => (
+export const postNote = ({ eventid, userid, note }) => (
   async (dispatch) => {
     try {
       const response = await axios.post('/api/v1/notes/', {
@@ -35,11 +51,19 @@ export const postEventNote = ({ eventid, userid, note }) => (
       });
       if (response.data.id) {
         alert('Sikeres mentés!');
+        if (eventid) {
           dispatch({
             type: ADD_EVENT_NOTE,
             payload: response.data,
           });
         }
+        if (userid) {
+          dispatch({
+            type: ADD_PROFILE_NOTE,
+            payload: response.data,
+          });
+        }
+      }
     } catch (e) {
       console.log(e);
     }

src/actions/types.js

@@ -47,6 +47,8 @@ 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 ADD_PROFILE_NOTE = 'add_profile_note';
+export const GET_NOTES_BY_PROFILE = 'get_notes_by_profile';
 
 export const GET_PROFILES = 'get_profiles';
 export const SET_STATUS = 'set_status';

src/components/pages/ApplicantProfile.js

 import React, { Component } from 'react';
-import { Container, Header, Item, Button, Label, List } from 'semantic-ui-react';
+import {
+  Container,
+  Header,
+  Item,
+  Button,
+  Label,
+  List,
+  Form,
+  Comment,
+} from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { getSelectedProfile, setStatus } from '../../actions/statistics';
+import { getNotesByProfile, writeNote, clearWrite, postNote, deleteNote } from '../../actions/notes';
 import ConfirmModal from '../forms/ConfirmModal';
 
+import moment from 'moment';
+
 const options = [
   { key: 'DT', text: 'DevTeam' },
   { key: 'NET', text: 'NETeam' },
@@ -15,6 +27,7 @@ const options = [
 class ApplicantProfile extends Component {
   componentWillMount() {
     this.props.getSelectedProfile(this.props.match.params.id);
+    this.props.getNotesByProfile(this.props.match.params.id);
   }
 
   renderGroups() {
@@ -29,7 +42,45 @@ class ApplicantProfile extends Component {
     ));
   }
 
+  renderComments() {
+    const notes = this.props.profileNotes;
+    return notes.map((note) => {
+      if (!note.event) {
+        return (
+          <Comment>
+            <Comment.Content>
+              <Comment.Author>{note.created_by_name}</Comment.Author>
+              <Comment.Metadata>
+                {moment(note.created_at).format('LL')}
+              </Comment.Metadata>
+              <Comment.Text>
+                {note.note}
+              </Comment.Text>
+            </Comment.Content>
+            { this.props.user.fullName === note.created_by_name ?
+              <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>);
+      }
+      return '';
+    });
+  }
+
   render() {
+    const note = this.props.actualNote;
     const { id, signed, groups, role, full_name, nick, motivation_about, motivation_exercise, motivation_profession }
     = this.props.selectedProfile;
     return (
@@ -90,6 +141,7 @@ class ApplicantProfile extends Component {
           </Item.Content>
         </Item>
         { signed && role !== 'Staff' ?
+          <Container>
             <Container textAlign='center'>
               <ConfirmModal
                 button={
@@ -110,6 +162,31 @@ class ApplicantProfile extends Component {
                 onAccept={() => this.props.setStatus(id, 'Denied')}
               />
             </Container>
+            <Comment.Group>
+              <Header dividing>
+                Megjegyzések
+              </Header>
+              {this.renderComments()}
+              <Form reply>
+                <Form.TextArea
+                  value={note.note}
+                  onChange={e => this.props.writeNote(e)}
+                />
+                <Button
+                  onClick={() => {
+                                  this.props.postNote({ userid: id,
+                                                        note: note.note });
+                                  this.props.clearWrite();
+                                }
+                          }
+                  content='Megjegyzés hozzáadása'
+                  labelPosition='left'
+                  icon='edit'
+                  primary
+                />
+              </Form>
+            </Comment.Group>
+          </Container>
           :
           null
         }
@@ -118,6 +195,18 @@ class ApplicantProfile extends Component {
   }
 }
 
-const mapStateToProps = ({ trainees: { selectedProfile } }) => ({ selectedProfile });
+const mapStateToProps = ({
+  user,
+  trainees: { selectedProfile },
+  notes: { profileNotes, actualNote }
+}) => ({ user, selectedProfile, profileNotes, actualNote });
 
-export default connect(mapStateToProps, { getSelectedProfile, setStatus })(ApplicantProfile);
+export default connect(mapStateToProps, {
+  getSelectedProfile,
+  setStatus,
+  postNote,
+  getNotesByProfile,
+  writeNote,
+  deleteNote,
+  clearWrite,
+})(ApplicantProfile);

src/components/pages/EventDetail.js

@@ -11,7 +11,7 @@ import {
 import { connect } from 'react-redux';
 import moment from 'moment';
 import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
-import { getNotesByEvent, writeNote, clearWrite, postEventNote, deleteNote } from '../../actions/notes';
+import { getNotesByEvent, writeNote, clearWrite, postNote, deleteNote } from '../../actions/notes';
 import TraineeTableRow from './TraineeTableRow';
 import ConfirmModal from '../forms/ConfirmModal';
 
@@ -74,6 +74,7 @@ class EventDetail extends Component {
                 {note.note}
               </Comment.Text>
             </Comment.Content>
+            { this.props.user.fullName === note.created_by_name ?
               <ConfirmModal
                 text='törölni akarod a megjegyzést'
                 button={
@@ -87,6 +88,8 @@ class EventDetail extends Component {
                 }
                 onAccept={() => this.props.deleteNote(note)}
               />
+            :
+            null }
           </Comment>);
       }
       return '';
@@ -162,7 +165,7 @@ class EventDetail extends Component {
               />
               <Button
                 onClick={() => {
-                                this.props.postEventNote({ eventid: event.id,
+                                this.props.postNote({ eventid: event.id,
                                                           note: note.note });
                                 this.props.clearWrite();
                               }
@@ -180,10 +183,11 @@ class EventDetail extends Component {
 }
 
 const mapStateToProps = ({
+  user,
   notes: { eventNotes, actualNote },
   events: { selectedEvent },
   trainees: { trainees }
-}) => ({ eventNotes, selectedEvent, trainees, actualNote });
+}) => ({ user, eventNotes, selectedEvent, trainees, actualNote });
 
 export default connect(mapStateToProps, {
   getEventById,
@@ -193,6 +197,6 @@ export default connect(mapStateToProps, {
   submitVisitors,
   writeNote,
   clearWrite,
-  postEventNote,
+  postNote,
   deleteNote,
 })(EventDetail);

src/components/pages/TraineeTableRow.js

@@ -10,7 +10,7 @@ import {
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { visitorChange } from '../../actions/statistics';
-import { writeNote, clearWrite, postEventNote, deleteNote } from '../../actions/notes';
+import { writeNote, clearWrite, postNote, deleteNote } from '../../actions/notes';
 import CommentModal from './CommentModal'
 
 class TraineeTableRow extends Component {
@@ -109,7 +109,7 @@ class TraineeTableRow extends Component {
                       />
                       <Button
                         onClick={() => {
-                                        this.props.postEventNote({ eventid:selectedEvent.id,
+                                        this.props.postNote({ eventid:selectedEvent.id,
                                                                   userid: trainee.id,
                                                                   note: this.state.note });
                                         this.clearWrite();
@@ -132,4 +132,4 @@ class TraineeTableRow extends Component {
   }
 }
 
-export default connect(() => ({}), { writeNote, clearWrite, postEventNote, visitorChange, deleteNote })(TraineeTableRow)
+export default connect(() => ({}), { writeNote, clearWrite, postNote, visitorChange, deleteNote })(TraineeTableRow)

src/reducers/NoteReducer.js

@@ -4,23 +4,30 @@ import {
   ADD_EVENT_NOTE,
   CLEAR_WRITE,
   DELETE_NOTE,
+  GET_NOTES_BY_PROFILE,
+  ADD_PROFILE_NOTE,
 } from '../actions/types';
 
-const INITIAL_STATE = { eventNotes: [], actualNote: {} };
+const INITIAL_STATE = { eventNotes: [], actualNote: {}, profileNotes: [] };
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case GET_NOTES_BY_EVENT:
       return { ...state, eventNotes: action.payload };
+    case GET_NOTES_BY_PROFILE:
+      return { ...state, profileNotes: action.payload };
     case WRITE_NOTE:
       return { ...state, actualNote: { ...state.actualNote, note: action.payload } };
     case ADD_EVENT_NOTE:
       return { ...state, eventNotes: [...state.eventNotes, action.payload] };
+    case ADD_PROFILE_NOTE:
+      return { ...state, profileNotes: [...state.profileNotes, 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] };
+      state.profileNotes.splice(state.profileNotes.indexOf(action.payload), 1);
+      return { ...state, eventNotes: [...state.eventNotes], profileNotes: [...state.profileNotes] };
     default:
       return state;
   }