baseline for ep30

Author: neerajsingh0101

ep30-extract-form-into-componenet-from-app/README.md

@@ -0,0 +1,15 @@
+#### Setting up the application
+
+```
+npm install
+npm start
+```
+
+Visit http://localhost:8080 in browser.
+
+#### Notes
+
+* [Nodejs Events](https://nodejs.org/api/events.html)
+* [object-assign](https://www.npmjs.com/package/object-assign)
+* `npm install --save object-assign`
+* [Source code](...)

ep30-extract-form-into-componenet-from-app/app/actions/TodoActions.js

@@ -0,0 +1,68 @@
+var api = require("../utils/api");
+var TodoStore = require("../stores/TodoStore");
+var AppDispatcher = require('../dispatcher/AppDispatcher');
+
+var TodoActions = {
+
+  addTodo: (todo) => {
+    console.log("adding TODO");
+    api.addTodo(todo)
+       .then( () => {
+          api.getTodos()
+             .then( (responseData) => {
+               var todos = responseData.todos;
+               console.log("All todos", todos);
+               TodoStore.setTodos(todos);
+             })
+       })
+       .then( () => {
+         console.log("Added TODO successfully");
+         AppDispatcher.dispatch({
+          actionType: 'TODO_ADD'
+         });
+       })
+  },
+
+  deleteTodo: (todo) => {
+    console.log("Deleting TODO");
+    api.deleteTodo(todo.id)
+       .then( () => {
+         console.log("Deleted TODO successfully");
+         AppDispatcher.dispatch({
+          actionType: 'TODO_DELETE',
+          todo: todo
+        });
+       })
+  },
+
+  markTodoDone: (todo) => {
+    console.log("Marking TODO as done");
+    api.markTodoDone(todo)
+       .then( () => {
+         console.log("marked TODO as done successfully");
+         AppDispatcher.dispatch({
+          actionType: 'TODO_DONE',
+          todo: todo
+        });
+
+       })
+  },
+
+  markTodoUnDone: (todo) => {
+    console.log("Marking TODO as undone");
+    api.markTodoUnDone(todo)
+       .then( () => {
+         console.log("marked TODO as undone successfully");
+         AppDispatcher.dispatch({
+          actionType: 'TODO_UNDONE',
+          todo: todo
+        });
+       })
+  },
+
+
+
+
+}
+
+module.exports = TodoActions;

ep30-extract-form-into-componenet-from-app/app/components/App.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import DisplayList from './DisplayList';
+
+var rand = require('random-key');
+var api = require("../utils/api");
+var TodoActions = require("../actions/TodoActions");
+var TodoStore = require("../stores/TodoStore");
+
+export default class App extends React.Component {
+
+  constructor () {
+    super();
+    this.state = { title: '', todos:  [] };
+
+    this.getAllTodos();
+  }
+
+  componentDidMount () {
+    var storeIsTellingUsThatDataHasChanged = () => {
+      console.log("Store is telling us that data has change");
+      var todos = TodoStore.getTodos();
+      console.log("todos is");
+      console.log(todos);
+      this.setState({todos: todos});
+    }
+    TodoStore.addChangeListener(storeIsTellingUsThatDataHasChanged);
+  }
+
+  getAllTodos () {
+    api.getTodos()
+      .then( (responseData) => {
+        var todos = responseData.todos;
+        this.setState({todos: todos });
+        TodoStore.setTodos(todos);
+      })
+  }
+
+  handleSubmit (event) {
+    event.preventDefault();
+
+    var newTodo = { title: this.state.title, done: false };
+
+    TodoActions.addTodo(newTodo);
+    this.setState({ title: '' });
+  }
+
+  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
+                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>;
+  }
+}

ep30-extract-form-into-componenet-from-app/app/components/DisplayItem.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+var TodoActions = require('../actions/TodoActions');
+
+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 });
+  }
+
+  toggleDone (todo) {
+    if (todo.done) {
+      TodoActions.markTodoUnDone(todo);
+    } else {
+      TodoActions.markTodoDone(todo);
+    }
+  }
+
+  handleDeleteTodoClick (todo) {
+    TodoActions.deleteTodo(todo);
+  }
+
+  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.toggleDone.bind(this, todo)}
+                  type="checkbox"
+                  style={{ fontSize: 'x-large' }} />
+
+                <label>
+                  { this.state.changedText }
+                </label>
+
+                <a  href='#'
+                    className="destroy"
+                    onClick={ this.handleDeleteTodoClick.bind(this, todo) }>
+                  [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
+}

ep30-extract-form-into-componenet-from-app/app/components/DisplayList.jsx

@@ -0,0 +1,21 @@
+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} />
+                      </section>
+            }) }
+           </ul>
+  }
+
+}
+
+DisplayList.propTypes = {
+  todos: React.PropTypes.array.isRequired
+}

ep30-extract-form-into-componenet-from-app/app/dispatcher/AppDispatcher.js

@@ -0,0 +1,3 @@
+var Dispatcher = require('flux').Dispatcher;
+
+module.exports = new Dispatcher();

ep30-extract-form-into-componenet-from-app/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);
+}

ep30-extract-form-into-componenet-from-app/app/stores/TodoStore.js

@@ -0,0 +1,81 @@
+var AppDispatcher = require('../dispatcher/AppDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var assign = require('object-assign');
+
+AppDispatcher.register(function(action) {
+
+  switch(action.actionType) {
+    case 'TODO_DONE':
+      console.log("Handling TODO_DONE using dispatcher in store");
+      TodoStore.markTodoDone(action.todo);
+      break;
+
+    case 'TODO_UNDONE':
+      console.log("Handling TODO_UNDONE using dispatcher in store");
+      TodoStore.markTodoUnDone(action.todo);
+      break;
+
+    case 'TODO_DELETE':
+      console.log("Handling TODO_DELETE using dispatcher in store");
+      TodoStore.deleteTodo(action.todo);
+      break;
+
+    case 'TODO_ADD':
+      console.log("Handling TODO_ADD using dispatcher in store");
+      TodoStore.getTodos();
+      break;
+  }
+
+});
+
+var _todos = {};
+var CHANGE_EVENT = 'change';
+
+var TodoStore = assign({}, EventEmitter.prototype, {
+
+  deleteTodo: (todo) => {
+    var newTodos = _todos.filter( (t) => {
+      return t.id != todo.id
+    } )
+    _todos = newTodos;
+    TodoStore.emitChange();
+  },
+
+  markTodoDone: (todo) => {
+   var _todo = _todos.filter((t) => {
+      return t.id === todo.id;
+    })[0];
+
+    _todo.done = true;
+    TodoStore.emitChange();
+  },
+
+  markTodoUnDone: (todo) => {
+   var _todo = _todos.filter((t) => {
+      return t.id === todo.id;
+    })[0];
+
+    _todo.done = false;
+    TodoStore.emitChange();
+  },
+
+  setTodos: (todos) => {
+    _todos = todos;
+    TodoStore.emitChange();
+  },
+
+  getTodos: () => {
+    return _todos;
+  },
+
+  emitChange: function() {
+    this.emit(CHANGE_EVENT);
+  },
+
+  addChangeListener: function (callback) {
+    console.log("registering callback for changelistener");
+    this.on(CHANGE_EVENT, callback);
+  }
+})
+
+module.exports = TodoStore;