1 import React from 'react'; |
1 import React, { Component } from 'react'; |
2 |
2 import { connect } from 'react-redux'; |
|
3 import { bindActionCreators } from 'redux'; |
3 import PropTypes from 'prop-types'; |
4 import PropTypes from 'prop-types'; |
4 import Immutable from 'immutable'; |
5 import Immutable from 'immutable'; |
|
6 import { Alert, Modal, Button } from 'react-bootstrap'; |
|
7 import Note from './Note'; |
|
8 import * as notesActions from '../actions/notesActions'; |
5 |
9 |
6 import { Alert } from 'react-bootstrap'; |
10 class NotesList extends Component { |
7 |
11 |
8 import Note from './Note'; |
12 state = { |
|
13 editingNote: null, |
|
14 noteToDelete: null, |
|
15 showModal: false, |
|
16 } |
9 |
17 |
10 const NotesList = ({notes}) => { |
18 enterEditMode = (note) => { |
|
19 this.setState({ editingNote: note }); |
|
20 } |
11 |
21 |
12 if (notes.size === 0) { |
22 closeNote = () => { |
|
23 this.setState({ editingNote: null }); |
|
24 } |
|
25 |
|
26 confirmDelete = (note) => { |
|
27 this.setState({ |
|
28 showModal: true, |
|
29 noteToDelete: note |
|
30 }) |
|
31 } |
|
32 |
|
33 deleteNote = () => { |
|
34 const { noteToDelete } = this.state; |
|
35 this.props.notesActions.deleteNote(noteToDelete); |
|
36 this.closeModal(); |
|
37 } |
|
38 |
|
39 closeModal = () => { |
|
40 this.setState({ |
|
41 showModal: false, |
|
42 noteToDelete: null |
|
43 }) |
|
44 } |
|
45 |
|
46 updateNote = (note, data) => { |
|
47 this.props.notesActions.updateNote(note, data); |
|
48 } |
|
49 |
|
50 render() { |
|
51 if (this.props.notes.size === 0) { |
|
52 return ( |
|
53 <Alert bsStyle="warning">No notes yet. Add notes with the textarea below.</Alert> |
|
54 ); |
|
55 } |
|
56 |
13 return ( |
57 return ( |
14 <Alert bsStyle="warning">No notes yet. Add notes with the textarea below.</Alert> |
58 <div> |
|
59 |
|
60 {this.props.notes.map((note) => |
|
61 <Note |
|
62 note={ note } |
|
63 key={ note._id } |
|
64 onClick={ this.enterEditMode.bind(this, note) } |
|
65 onClose={ this.closeNote } |
|
66 onDelete={ this.confirmDelete.bind(this, note) } |
|
67 onSave={ this.updateNote } |
|
68 isEditing={ this.state.editingNote && note === this.state.editingNote } /> |
|
69 )} |
|
70 |
|
71 <Modal show={this.state.showModal} onHide={this.closeModal}> |
|
72 <Modal.Body> |
|
73 Are you sure? |
|
74 </Modal.Body> |
|
75 <Modal.Footer> |
|
76 <Button bsStyle="primary" onClick={ this.deleteNote }>Confirm</Button> |
|
77 <Button onClick={ this.closeModal }>Close</Button> |
|
78 </Modal.Footer> |
|
79 </Modal> |
|
80 |
|
81 </div> |
15 ); |
82 ); |
16 } |
83 } |
17 return ( |
|
18 <div> |
|
19 {notes.map((note) => |
|
20 <Note note={note} key={note._id} /> |
|
21 )} |
|
22 </div> |
|
23 ); |
|
24 }; |
84 }; |
25 |
85 |
26 NotesList.propTypes = { |
86 NotesList.propTypes = { |
27 notes: PropTypes.instanceOf(Immutable.List).isRequired |
87 notes: PropTypes.instanceOf(Immutable.List).isRequired |
28 }; |
88 }; |
29 |
89 |
30 export default NotesList; |
90 function mapStateToProps(state, props) { |
|
91 return props; |
|
92 } |
|
93 |
|
94 function mapDispatchToProps(dispatch) { |
|
95 return { |
|
96 notesActions: bindActionCreators(notesActions, dispatch), |
|
97 } |
|
98 } |
|
99 |
|
100 export default connect(mapStateToProps, mapDispatchToProps)(NotesList); |