From 37dc8e22eebaf0d0ef5aa4932e43c23fc29addb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Sat, 26 Jan 2019 14:56:09 +0100
Subject: [PATCH] Create delete action for notes, create modal for display
notes
---
src/actions/auth.js | 3 +-
src/actions/notes.js | 19 ++++++++
src/actions/types.js | 1 +
src/components/pages/CommentModal.js | 58 +++++++++++++++++++++++++
src/components/pages/EventDetail.js | 18 +++++++-
src/components/pages/TraineeTableRow.js | 22 ++--------
src/reducers/NoteReducer.js | 4 ++
7 files changed, 104 insertions(+), 21 deletions(-)
create mode 100644 src/components/pages/CommentModal.js
diff --git a/src/actions/auth.js b/src/actions/auth.js
index ac0e9e5..a480dba 100644
--- a/src/actions/auth.js
+++ b/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) {
diff --git a/src/actions/notes.js b/src/actions/notes.js
index 52074a9..4737c1f 100644
--- a/src/actions/notes.js
+++ b/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);
+ }
+ });
diff --git a/src/actions/types.js b/src/actions/types.js
index 71b7226..7624ef9 100644
--- a/src/actions/types.js
+++ b/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';
diff --git a/src/components/pages/CommentModal.js b/src/components/pages/CommentModal.js
new file mode 100644
index 0000000..eeba0fe
--- /dev/null
+++ b/src/components/pages/CommentModal.js
@@ -0,0 +1,58 @@
+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);
diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index 41b2b7c..e058b6f 100644
--- a/src/components/pages/EventDetail.js
+++ b/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);
diff --git a/src/components/pages/TraineeTableRow.js b/src/components/pages/TraineeTableRow.js
index 4e7f2b7..34e58c3 100644
--- a/src/components/pages/TraineeTableRow.js
+++ b/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)
diff --git a/src/reducers/NoteReducer.js b/src/reducers/NoteReducer.js
index 90e4c8d..37caf2f 100644
--- a/src/reducers/NoteReducer.js
+++ b/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;
}
--
GitLab