Skip to content

Instantly share code, notes, and snippets.

@pjb3

pjb3/app.jsx

Last active August 29, 2015 14:22
Show Gist options
  • Save pjb3/4bed25a4932f30f545df to your computer and use it in GitHub Desktop.
Save pjb3/4bed25a4932f30f545df to your computer and use it in GitHub Desktop.
Download ZIP
BEWD Spring 2015 Class 4 Homework - React + LocalStorage Notes App
Raw
app.jsx
var NoteEditor = React.createClass({
getInitialState: function() {
return {
content: this.props.note.content
}
},
handleChange: function(event) {
this.setState({ content: event.target.value });
},
render: function() {
return (
<div className="panel panel-default col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div className="panel-body edit-note">
<textarea className="form-control" rows="5" value={this.state.content} onChange={this.handleChange} />
<br />
<button
className="btn btn-success"
onClick={this.props.onSave.bind(null, this.props.note.id, this.state.content)}>Save</button>
{' '}
<button className="btn btn-danger" onClick={this.props.onRemove.bind(null, this.props.note.id)}>Remove</button>
</div>
</div>
);
}
});
var NoteViewer = React.createClass({
render: function() {
var rawMarkup = marked(this.props.note.content.toString(), {sanitize: true});
return (
<div className="panel panel-default col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div
className="panel-body show-note"
onClick={this.props.onEdit.bind(null, this.props.note.id)}
dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});
var NoteList = React.createClass({
getInitialState: function() {
return {
editingNoteId: null
};
},
addNote: function() {
var id = notes[notes.length-1].id + 1;
notes.push({
id: id,
content: ''
});
localStorage.notes = JSON.stringify(notes);
this.setState({ editingNoteId: id });
},
editNote: function(id) {
this.setState({ editingNoteId: id });
},
saveNote: function(id, content) {
var note = notes.filter(function(note) {
return note.id == id;
})[0];
note.content = content;
localStorage.notes = JSON.stringify(notes);
this.setState({ editingNoteId: null });
},
removeNote: function(id) {
notes = notes.filter(function(note){
return note.id != id;
});
localStorage.notes = JSON.stringify(notes);
this.setState({ editingNoteId: null });
},
render: function() {
var noteList = notes.map(function(note) {
if(this.state.editingNoteId == note.id) {
return <NoteEditor
note={note}
key={note.id}
onSave={this.saveNote}
onRemove={this.removeNote} />
} else {
return <NoteViewer
note={note}
key={note.id}
onEdit={this.editNote} />
}
}.bind(this));
return (
<div className="row notes">
{noteList}
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<button className="btn btn-primary" onClick={this.addNote}>Add Note</button>
</div>
</div>
);
}
});
var notes = JSON.parse(localStorage.notes || '[]');
React.render(
<NoteList notes={notes} />,
document.getElementById('notes')
);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div id="notes"></div>
<script type="text/jsx" src="app.jsx"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment