Added delete, add and edit functionality

static/react/kanban-app/app/components/App.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import Notes from './Notes';
+
+import uuid from 'uuid';
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Temporary datastore for notes
+      notes: [
+        {
+          id: uuid.v4(),
+          task: 'Implement other data structures'
+        },
+        {
+          id: uuid.v4(),
+          task: 'Use test data from other sources'
+        },
+        {
+          id: uuid.v4(),
+          task: 'Finish the kanban implementation'
+        }
+      ]
+    };
+  }
+
+  render() {
+    const {notes} = this.state;
+
+    return (
+      <div>
+        <button onClick={this.addNote}>+</button>
+        <Notes
+          notes={notes}
+          onNoteClick={this.activateNoteEdit}
+          onEdit={this.editNote}
+          onDelete={this.deleteNote}
+          />
+      </div>
+    );
+  }
+
+  addNote = () => {
+    console.log('Adding a new note');
+    this.setState({
+      notes: this.state.notes.concat([{
+        id: uuid.v4(),
+        task: 'New task'
+      }])
+    });
+  }
+
+  deleteNote = (id, e) => {
+    // Avoid bubbling to edit
+    e.stopPropagation();
+
+    this.setState({
+      notes: this.state.notes.filter(note => note.id !== id)
+    });
+  }
+
+  activateNoteEdit = (id) => {
+    this.setState({
+      notes: this.state.notes.map(note => {
+        if(note.id === id) {
+          note.editing = true;
+        }
+        return note;
+      })
+    });
+  }
+
+  editNote = (id, task) => {
+    this.setState({
+      notes: this.state.notes.map(note => {
+        if(note.id === id) {
+          note.editing = false;
+          note.task = task;
+        }
+        return note;
+      })
+    });
+  }
+
+
+
+
+}

static/react/kanban-app/app/components/Editable.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export default ({editing, value, onEdit, ...props}) => {
+  if(editing) {
+    return <Edit value={value} onEdit={onEdit} {...props} />;
+  }
+  return <span {...props}>{value}</span>;
+}
+
+class Edit extends React.Component {
+  render() {
+    const {value, ...props} = this.props;
+
+    return <input
+      type="text"
+      autoFocus={true}
+      defaultValue={value}
+      onBlur={this.finishEdit}
+      onKeyPress={this.checkEnter}
+      {...props} />;
+  }
+  checkEnter = (e) => {
+    if(e.key === 'Enter') {
+      this.finishEdit(e);
+    }
+  }
+  finishEdit = (e) => {
+    const value = e.target.value;
+
+    if(this.props.onEdit) {
+      this.props.onEdit(value);
+    }
+  }
+}

static/react/kanban-app/app/components/Note.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({children, ...props}) => (
+  <div {...props}>
+    {children}
+  </div>
+);

static/react/kanban-app/app/components/Notes.jsx

@@ -1,26 +1,20 @@
 import React from 'react';
+import Note from './Note';
+import Editable from './Editable';
 
-import uuid from 'uuid';
-
-const notes = [
-  {
-    id: uuid.v4(),
-    task: 'Implement other data structures'
-  },
-  {
-    id: uuid.v4(),
-    task: 'Use test data from other sources'
-  },
-  {
-    id: uuid.v4(),
-    task: 'Finish the kanban implementation'
-  }
-];
-
-console.log(notes);
-
-export default () => (
-  <ul>{notes.map(note =>
-    <li key={note.id}>{note.task}</li>
-  )}</ul>
+export default ({
+  notes,
+  onNoteClick=() => {}, onEdit=() => {}, onDelete=() => {}
+}) => (
+    <ul>{notes.map(({id, editing, task}) =>
+      <li key={id}>
+        <Note onClick={onNoteClick.bind(null, id)}>
+          <Editable
+             editing={editing}
+             value={task}
+             onEdit={onEdit.bind(null, id)} />
+          <button onClick={onDelete.bind(null, id)}>x</button>
+        </Note>
+      </li>
+    )}</ul>
 )

static/react/kanban-app/app/index.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import Notes from './components/Notes';
+import App from './components/App';
 
 if(process.env.NODE_ENV !== 'production') {
   React.Perf = require('react-addons-perf');
 }
 
 ReactDOM.render(
-  <Notes />,
+  <App />,
   document.getElementById('app')
 );