Botón añadir y borrar nota con ReactJS

In this example below you will see how to do a Botón añadir y borrar nota con ReactJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0utKast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0utKast ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Botón añadir y borrar nota con ReactJS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <script src='https://cdn.rawgit.com/bradleyboy/codepen-react/master/dist/codepen-react-0.1.1.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.0/lodash.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0utKast/botandxf3n-aandxf1adir-y-borrar-nota-con-reactjs-gpaOXQ */
.note-list {
    border-bottom: solid 1px gray;
}

.note-summary {
    border-top: solid 1px gray;
}

.note-selected {
    font-weight: bold;
}

/*Downloaded from https://www.codeseek.co/0utKast/botandxf3n-aandxf1adir-y-borrar-nota-con-reactjs-gpaOXQ */
var notepad = {
    notes: [],
    selectedId: null
};

var nextNodeId = 1;

var onAddNote = function () {
    var note = {id: nextNodeId, content: ''};
    nextNodeId++;
    notepad.notes.push(note);
    notepad.selectedId = note.id;
    onChange();
};

var onChangeNote = function (id, value) {
    var note = _.find(notepad.notes, function (note) {
        return note.id === id;
    });
    if (note) {
        note.content = value;
    }
    onChange();
};

var onDeleteNote = function (id) {
    var note = _.find(notepad.notes, function (note) {
        return note.id === id;
    });
    if (note) {
        notepad.notes = notepad.notes.filter(function (note) {
            return note.id !== id;
        });
    }
    if (notepad.selectedId === id) {
        notepad.selectedId = null;
    }
    onChange();
};

var onSelectNote = function (id) {
    notepad.selectedId = id;
    onChange();
};

var NoteSummary = React.createClass({
    render: function () {
        var note = this.props.note;
        var title = note.content;
        if (title.indexOf('\n') > 0) {
            title = note.content.substring(0, note.content.indexOf('\n'));
        }
        if (!title) {
            title = 'Untitled';
        }
    
        return (
            <div className="note-summary">{title}</div>
        );
    }
});

var NotesList = React.createClass({
    render: function () {
        var notepad = this.props.notepad;
        var notes = notepad.notes;
    
        return (
            <div className="note-list">
                {
                    notes.map(function (note) {
                        return (
                            <div key={note.id} className={notepad.selectedId === note.id ? 'note-selected' : ''}>
                                <a href="#" onClick={this.props.onSelectNote.bind(null, note.id)}>
                                    <NoteSummary note={note}/>
                                </a>
                            </div>
                        );
                    }.bind(this))
                }
            </div>
        );
    }
});

var NoteEditor = React.createClass({
    getInitialState: function () {
        return {
            isConfirming: false
        };
    },

    onChange: function (event) {
        this.props.onChange(this.props.note.id, event.target.value);
    },
    
    onDelete: function () {
        if (this.state.isConfirming) {
            this.props.onDelete(this.props.note.id);
            this.setState({isConfirming: false});
        } else {
            this.setState({isConfirming: true});
        }
    },
    
    onCancelDelete: function () {
        this.setState({isConfirming: false});
    },

    render: function () {
        return (
            <div>
                <div>
                    <textarea rows={5} cols={40} value={this.props.note.content} onChange={this.onChange}/>
                </div>
                <button onClick={this.onDelete}>
                    {
                        this.state.isConfirming ? 'Confirmar' : 'Borrar nota'
                    }
                </button>
                {
                    this.state.isConfirming ? <button onClick={this.onCancelDelete}>Cancelar</button> : null
                }
            </div>
        );
    }
});

var Notepad = React.createClass({
    render: function () {
        var notepad = this.props.notepad;
    
        var editor = null;
        
        var selectedNote = _.find(notepad.notes, function (note) {
            return note.id === notepad.selectedId;
        });
        
        if (selectedNote) {
            editor = <NoteEditor key={selectedNote.id} note={selectedNote} onChange={this.props.onChangeNote} onDelete={this.props.onDeleteNote}/>
        }
    
        return (
            <div id="notepad">
                <NotesList notepad={notepad} onSelectNote={this.props.onSelectNote}/>
                <div><button onClick={this.props.onAddNote}>Añadir nota</button></div>
                {editor}
            </div>
        );
    }
});

var onChange = function () {
    React.render(
        <Notepad notepad={notepad} onAddNote={onAddNote} onSelectNote={onSelectNote} onDeleteNote={onDeleteNote} onChangeNote={onChangeNote}/>,
        document.body
    );
};

onChange();

Comments