Ep 19

.gitignore

@@ -1,3 +1,4 @@
 npm-debug.log
 **/node_modules/*
 build/*
+.idea

ep19-call-api-jquery/README.md

@@ -0,0 +1,13 @@
+#### Setting up the application
+
+```
+npm install
+npm start
+```
+
+Visit http://localhost:8080 in browser.
+
+#### Notes
+
+* `npm install random-key --save`
+* [Source code](...)

ep19-call-api-jquery/app/components/App.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import DisplayList from './DisplayList';
+
+var rand = require('random-key');
+var api = require("../utils/api");
+
+export default class App extends React.Component {
+
+  constructor () {
+    super();
+    this.state = { title: '', todos:  [] };
+    var processData = function(data) {
+      this.setState({todos: data.todos});
+    };
+    api.getTasks(processData.bind(this));
+  }
+
+  handleDone (idToBeMarkedAsDone) {
+    var _todos = this.state.todos;
+    var todo = _todos.filter((todo) => {
+      return todo.id === idToBeMarkedAsDone;
+    })[0];
+
+    todo.done = !todo.done;
+
+    var processData = function(data) {
+      this.setState({todos: data.todos});
+    };
+
+    var markTaskDoneCallback = function(data){
+      data.success ? api.getTasks(processData.bind(this)) : console.log("Failed to mark task as done/undone");
+    };
+
+    api.markTaskDone(markTaskDoneCallback.bind(this), todo);
+  }
+
+  handleDelete (idToBeDeleted) {
+    var processData = function(data) {
+      this.setState({todos: data.todos});
+    };
+
+    var deleteTaskCallback = function(data){
+      data.success ? api.getTasks(processData.bind(this)) : console.log("Failed to delete task");
+    };
+
+    api.deleteTask(deleteTaskCallback.bind(this), idToBeDeleted);
+  }
+
+  handleSubmit (event) {
+    event.preventDefault();
+
+    var newTodo = { title: this.state.title, done: false };
+
+    var processData = function(data) {
+      this.setState({title: '', todos: data.todos});
+    };
+
+    var addTaskCallback = function(data){
+      data.success ? api.getTasks(processData.bind(this)) : console.log("Failed to add task");
+    };
+
+    api.addTask(addTaskCallback.bind(this), newTodo);
+  }
+
+  handleChange (event) {
+    var title = event.target.value;
+    this.setState({ title: title });
+  }
+
+  handleClearCompleted (event) {
+    var newTodos = this.state.todos.filter((todo) => { return !todo.done});
+    this.setState({ todos: newTodos });
+  }
+
+  render () {
+    return  <div>
+              <h1> TODO </h1>
+              <form onSubmit={this.handleSubmit.bind(this)}>
+                <input  type="text"
+                        onChange={this.handleChange.bind(this)}
+                        value={this.state.title} />
+              </form>
+
+              <DisplayList
+                handleDone={this.handleDone.bind(this)}
+                handleDelete={this.handleDelete.bind(this)}
+                todos={this.state.todos}  />
+
+              <footer>
+                All: ({ this.state.todos.length }) |
+                Completed: ({ this.state.todos.filter((todo) => { return todo.done }).length }) |
+                Pending: ({ this.state.todos.filter((todo) => { return !todo.done }).length }) |
+                <a href='#' onClick={this.handleClearCompleted.bind(this)}>Clear Completed</a>
+              </footer>
+            </div>;
+  }
+}

ep19-call-api-jquery/app/components/DisplayItem.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+export default class DisplayItem extends React.Component {
+
+  constructor () {
+    super();
+    this.state = { editing: false }
+  }
+
+  componentDidMount () {
+    this.setState({ changedText: this.props.todo.title });
+  }
+
+  handleEditing (event) {
+    this.setState({ editing: true, changedText: this.props.todo.title });
+  }
+
+  handleEditingDone (event) {
+    if (event.keyCode === 13 ) { // submit
+      this.setState({ editing: false });
+    }
+  }
+
+  handleEditingChange (event) {
+    var _changedText = event.target.value;
+    this.setState({ changedText: _changedText });
+  }
+
+  render () {
+    var todo = this.props.todo;
+
+    var viewStyle = {};
+    var editStyle = {};
+
+    if (this.state.editing) {
+      viewStyle.display = 'none';
+    } else {
+      editStyle.display = 'none';
+    }
+
+    return <li className={ todo.done ? 'done' : '' }>
+              <div style={viewStyle} onDoubleClick={this.handleEditing.bind(this)}>
+                <input
+                  checked={todo.done}
+                  onChange={this.props.handleDone.bind(null, todo.id)}
+                  type="checkbox"
+                  style={{ fontSize: 'x-large' }} />
+
+                <label>
+                  { this.state.changedText }
+                </label>
+
+                <a  href='#'
+                    className="destroy"
+                    onClick={ this.props.handleDelete.bind(null, todo.id) }>
+                  [x]
+                </a>
+              </div>
+
+              <input  type="text"
+                      onKeyDown={this.handleEditingDone.bind(this)}
+                      onChange={this.handleEditingChange.bind(this)}
+                      style={editStyle}
+                      value={this.state.changedText} />
+           </li>
+  }
+
+}
+
+DisplayItem.propTypes = {
+  todo: React.PropTypes.object.isRequired,
+  handleDone: React.PropTypes.func.isRequired,
+  handleDelete: React.PropTypes.func.isRequired
+}

ep19-call-api-jquery/app/components/DisplayList.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import DisplayItem from './DisplayItem';
+
+export default class DisplayList extends React.Component {
+
+  render () {
+    return <ul id="todo-list">
+            { this.props.todos.map((todo, i) => {
+              return  <section id="main" key={todo.id}>
+                        <DisplayItem
+                          todo={todo}
+                          handleDone={this.props.handleDone}
+                          handleDelete={this.props.handleDelete} />
+                      </section>
+            }) }
+           </ul>
+  }
+
+}
+
+DisplayList.propTypes = {
+  todos: React.PropTypes.array.isRequired,
+  handleDone: React.PropTypes.func.isRequired,
+  handleDelete: React.PropTypes.func.isRequired
+}

ep19-call-api-jquery/app/main.jsx

@@ -0,0 +1,14 @@
+import './stylesheets/main.css';
+
+import React from 'react';
+import App from './components/App';
+
+main();
+
+function main() {
+  var div = document.createElement('div');
+  div.setAttribute("id", "todoapp");
+  document.body.appendChild(div);
+
+  React.render(<App />, div);
+}