Add TodoMVC example

Author: Josema

.gitignore

@@ -17,4 +17,3 @@ npm-debug.log*
 # Files
 dist
 test*.*
-examples/todomvc

examples/todomvc/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["es2015", "react"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}

examples/todomvc/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "dop-todomvc-example",
+  "version": "0.0.0",
+  "description": "dop TodoMVC example",
+  "scripts": {
+    "start": "node src/server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DistributedObjectProtocol/dop.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DistributedObjectProtocol/dop/issues"
+  },
+  "homepage": "http://distributedobjectprotocol.org",
+  "dependencies": {
+    "babel-polyfill": "^6.3.14",
+    "classnames": "^2.1.2",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "dop": "^0.21.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.3.15",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-register": "^6.3.13",
+    "cross-env": "^1.0.7",
+    "enzyme": "^2.2.0",
+    "expect": "^1.8.0",
+    "express": "^4.13.3",
+    "jsdom": "^5.6.1",
+    "mocha": "^2.2.5",
+    "node-libs-browser": "^0.5.2",
+    "raw-loader": "^0.5.1",
+    "react-addons-test-utils": "^0.14.7",
+    "style-loader": "^0.12.3",
+    "todomvc-app-css": "^2.0.1",
+    "webpack": "^1.9.11",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.9.1"
+  }
+}

examples/todomvc/src/actions.js

@@ -0,0 +1,73 @@
+import { collect } from 'dop'
+import state from './state'
+
+
+let todoIdInc = 1
+export function addTodo(text) {
+  if (text.length > 0)
+    state.todos.push({
+      text: text,
+      completed: false,
+      id: todoIdInc++,
+      editing: false
+    })
+}
+
+
+export function deleteTodo(id) {
+  const index = state.todos.findIndex(todo => todo.id === id)
+  const collector = collect()
+  state.todos.splice(index, 1)
+  collector.emit()
+}
+
+
+export function editTodo(id, text) {
+    if (text.length === 0)
+      deleteTodo(id)
+    else {
+      const todo = state.todos.filter(todo => todo.id === id)[0]
+      const collector = collect()
+      todo.editing = false
+      if (text !== todo.text)
+        todo.text = text
+      collector.emit()
+    }
+}
+
+
+export function completeTodo(id) {
+  const todo = state.todos.filter(todo => todo.id === id)[0]
+  const collector = collect()
+  todo.completed = !todo.completed
+  collector.emit()
+}
+
+
+export function completeAll() {
+  const collector = collect()
+  const areAllMarked = state.todos.every(todo => todo.completed)
+  state.todos.forEach(todo => todo.completed=!areAllMarked)
+  collector.emit()
+}
+
+
+export function changeFilter(filter) {
+  state.selectedFilter = filter
+}
+
+
+export function clearCompleted() {
+  const collector = collect()
+  const completeds = state.todos
+    .filter(todo => todo.completed === true)
+    .map(todo => todo.id)
+    .forEach(deleteTodo)
+  collector.emit()  
+}
+
+
+export function editingTodo(id) {
+  const todo = state.todos.filter(todo => todo.id === id)[0]
+  todo.editing = !todo.editing
+}

examples/todomvc/src/components/App.js

@@ -0,0 +1,14 @@
+import React, { Component, PropTypes } from 'react'
+import Header from './Header'
+import Todos from './Todos'
+import Footer from './Footer'
+
+export default function App() {
+  return (
+    <div>
+      <Header />
+      <Todos />
+      <Footer />
+    </div>
+  )
+}

examples/todomvc/src/components/Footer.js

@@ -0,0 +1,73 @@
+import React, { PropTypes, Component } from 'react'
+import classnames from 'classnames'
+import { createObserver } from 'dop'
+import state from '../state'
+import { clearCompleted, changeFilter } from '../actions'
+import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants'
+
+const FILTER_TITLES = {
+  [SHOW_ALL]: 'All',
+  [SHOW_ACTIVE]: 'Active',
+  [SHOW_COMPLETED]: 'Completed'
+}
+
+export default class Footer extends Component {
+
+  componentWillMount() {
+    const observer = createObserver(mutations => {
+      this.forceUpdate()
+    })
+    observer.observe(state, 'itemsLeftCount')
+    observer.observe(state, 'selectedFilter')
+    observer.observe(state, 'completedCount')
+  }
+
+
+  shouldComponentUpdate() {
+    return false
+  }
+
+
+  render() {
+    return <FooterTemplate 
+        activeCount={state.itemsLeftCount}
+        completedCount={state.completedCount}
+        selectedFilter={state.selectedFilter}
+        onChangeFilter={changeFilter}
+        onClearCompleted={clearCompleted} />
+  }
+}
+
+
+
+
+
+function FooterTemplate({ activeCount, completedCount, selectedFilter, onChangeFilter, onClearCompleted }) {
+
+  const itemWord = activeCount === 1 ? 'item' : 'items'
+
+  return (
+    <footer className="footer">
+      <span className="todo-count">
+        <strong>{activeCount || 'No'}</strong> {itemWord} left
+      </span>
+      <ul className="filters">
+        {[ SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED ].map(filter =>
+          <li key={filter}>
+            <a className={classnames({ selected: filter === selectedFilter })}
+              style={{ cursor: 'pointer' }}
+              onClick={() => onChangeFilter(filter)}>
+              {FILTER_TITLES[filter]}
+            </a>
+          </li>
+        )}
+      </ul>
+      { completedCount === 0 ? null : <button
+        className="clear-completed"
+        onClick={onClearCompleted}>
+      Clear completed
+      </button>
+				}
+    </footer>
+  )
+}

examples/todomvc/src/components/Header.js

@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react'
+import { createObserver } from 'dop'
+import state from '../state'
+import { addTodo, completeAll } from '../actions'
+import TodoInput from './TodoInput'
+
+
+export default class Header extends Component {
+
+  componentWillMount() {
+    const observer = createObserver(mutations => {
+      this.forceUpdate()
+    })
+    observer.observe(state, 'areAllItemsCompleted')
+  }
+
+  shouldComponentUpdate() {
+    return false
+  }
+
+  render() {
+    return <HeaderTemplate 
+      onSave={addTodo}
+      onCompleteAll={completeAll}
+      areAllItemsCompleted={state.areAllItemsCompleted}
+    />
+  }
+}
+
+
+
+
+function HeaderTemplate({ onSave, onCompleteAll, areAllItemsCompleted }) {
+  return (
+    <header className="header">
+      <h1>todos</h1>
+      <TodoInput
+        newTodo
+        placeholder="What needs to be done?"
+        onSave={onSave}/>
+      <input className="toggle-all"
+        type="checkbox"
+        checked={areAllItemsCompleted}
+        onChange={onCompleteAll} />
+    </header>
+  )
+}

examples/todomvc/src/components/TodoInput.js

@@ -0,0 +1,64 @@
+import React, { Component, PropTypes } from 'react'
+import classnames from 'classnames'
+
+class TodoInput extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      text: this.props.text || ''
+    }
+  }
+
+  handleSubmit(e) {
+    const text = e.target.value.trim()
+    if (e.which === 13) {
+      this.props.onSave(text)
+      if (this.props.newTodo) {
+        this.setState(()=>{
+          return { text: '' }
+        })
+      }
+    }
+  }
+
+  handleChange(e) {
+    let text = e.target.value.trim()
+    this.setState(()=>{
+      return { text: text }
+    })
+  }
+
+  handleBlur(e) {
+    if (!this.props.newTodo) {
+      this.props.onSave(e.target.value)
+    }
+  }
+
+  render() {
+    // console.log( 'TodoInput' );
+    return (
+      <input className={
+        classnames({
+          edit: this.props.editing,
+          'new-todo': this.props.newTodo
+        })}
+        type="text"
+        placeholder={this.props.placeholder}
+        autoFocus="true"
+        value={this.state.text}
+        onBlur={this.handleBlur.bind(this)}
+        onChange={this.handleChange.bind(this)}
+        onKeyDown={this.handleSubmit.bind(this)} />
+    )
+  }
+}
+
+TodoInput.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  text: PropTypes.string,
+  placeholder: PropTypes.string,
+  editing: PropTypes.bool,
+  newTodo: PropTypes.bool
+}
+
+export default TodoInput