Lighthouse/src/Pages/Notes/Notes.jsx

import React from 'react'
import { connect } from 'react-redux'
import MarkdownIt from 'markdown-it'
import { Card, Placeholder, Icon } from '../../Shared/Components'
import { Menu, MenuDivider, MenuItem, EditableText, Intent, Button, Alert } from '@blueprintjs/core'
import { SELECT_NOTE, UPDATE_NOTE, UPDATE_SELECTED_NOTE, ADD_NOTE, REMOVE_NOTE, UNSELECT_NOTE } from '../../Store/Actions'
import './Notes.scss'

const md = new MarkdownIt()

const NotesList = ({ notes, select }) =>
    <div>
        { notes.map(e => <MenuItem key={e.id} text={e.title} onClick={() => select(e)}></MenuItem>) }
    </div>

class AlertButton extends React.Component {
    state = { open: false }

    close = () => this.setState({ open: false })

    show = () => this.setState({ open: true })

    confirm = () => {
        this.props.onConfirm()
        this.close();
    }

    render() {
        return (
            <Button iconName={this.props.iconName} className={this.props.className} onClick={this.show}>
                <Alert intent={Intent.DANGER} isOpen={this.state.open}
                    confirmButtonText={this.props.confirmButtonText} cancelButtonText={this.props.cancelButtonText}
                    onConfirm={this.confirm} onCancel={this.close} >
                    {this.props.children}
                </Alert>
            </Button>
        );
    }
}

const Note = ({ note, update, remove }) =>
    <div className="Note">
        <AlertButton iconName="trash" className="trash-btn"
            confirmButtonText="delete" cancelButtonText={"Cancel"}
            onConfirm={() => remove(note)}>
            Do you really want to delete this note ? You won't be able to recover it.
        </AlertButton>
        <h2>{note.title}</h2>
        <div className="editor">
            <EditableText className="source" multiline value={note.content} onChange={value => update({...note, content: value})}></EditableText>
            <div className="preview" dangerouslySetInnerHTML={{__html: md.render(note.content)}}></div>
        </div>
    </div>


const NotesTemplate = ({ notes, selectedNote, selectNote, updateNote, addNote, removeNote }) =>
    <div className="Notes">
        <Card className="List">
            <Menu>
                <MenuDivider title="Notes"/>
                <NotesList notes={notes} select={selectNote}/>
                <MenuDivider />
                <MenuItem iconName="plus" text="New note" onClick={addNote}/>
            </Menu>
        </Card>
        <Card className="content">
            { selectedNote ? <Note note={selectedNote} update={updateNote} remove={removeNote} /> :
                <Placeholder iconName="clipboard" title="No note selected" description="Choose one in the list on the left"/> }
        </Card>
    </div>

const Notes = connect(
    state => ({ notes: state.note.notes, selectedNote: state.note.selectedNote }),
    dispatch => ({
        addNote: () => dispatch(ADD_NOTE()),
        selectNote: note => dispatch(SELECT_NOTE(note)),
        removeNote: note => {
            dispatch(REMOVE_NOTE(note))
            dispatch(UNSELECT_NOTE())
        },
        updateNote: note => {
            dispatch(UPDATE_NOTE(note))
            dispatch(UPDATE_SELECTED_NOTE(note))
        }
    })
)(NotesTemplate)

export default Notes