v2: prepare to move

v2/website/components/Todo/index.js

@@ -0,0 +1,205 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import TodoList from './TodoList';
+
+const ENTER_KEY = 13;
+
+function uuid() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+}
+
+const todos = [
+  {
+    id: 'ed0bcc48-bbbe-5f06-c7c9-2ccb0456ceba',
+    title: 'Build this Todo App.',
+    completed: true
+  },
+  {
+    id: '42582304-3c6e-311e-7f88-7e3791caf88c',
+    title: '?????',
+    completed: true
+  },
+  {
+    id: '1cf63885-5f75-8deb-19dc-9b6765deae6c',
+    title: '1,000 stars on GitHub.',
+    completed: false
+  },
+  {
+    id: '63a871b2-0b6f-4427-9c35-304bc680a4b7',
+    title: 'Write a popular medium post.',
+    completed: false
+  },
+  {
+    id: '63a871b2-0b6f-4422-9c35-304bc680a4b7',
+    title: 'Contribute to open source.',
+    completed: false
+  },
+  {
+    id: '036af7f9-1181-fb8f-258f-3f06034c020f',
+    title: 'Write a blog post.',
+    completed: false
+  }
+];
+
+class TodoApp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editing: null,
+      newTodo: '',
+      todos: todos
+    };
+  }
+
+  handleChange(event) {
+    this.setState({newTodo: event.target.value});
+  }
+
+  handleNewTodoKeyDown(event) {
+    if (event.keyCode !== ENTER_KEY) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const val = this.state.newTodo.trim();
+
+    if (val) {
+      this.setState({
+        todos: this.state.todos.concat({
+          id: uuid(),
+          title: val,
+          completed: false
+        }),
+        newTodo: ''
+      });
+    }
+  }
+
+  toggleAll(event) {
+    const {checked} = event.target;
+    this.setState({
+      todos: this.state.todos.map(todo =>
+        Object.assign({}, todo, {completed: checked})
+      )
+    });
+  }
+
+  toggle(todoToToggle) {
+    this.setState({
+      todos: this.state.todos.map(todo => {
+        if (todo === todoToToggle) {
+          return Object.assign({}, todo, {
+            completed: !todo.completed
+          });
+        }
+        return todo;
+      })
+    });
+  }
+
+  destroy(passedTodo) {
+    this.setState({
+      todos: this.state.todos.filter(todo => todo !== passedTodo)
+    });
+  }
+
+  edit(todo) {
+    this.setState({editing: todo.id});
+  }
+
+  save(todoToSave, text) {
+    this.setState({
+      todos: this.state.todos.map(todo => {
+        if (todo === todoToSave) {
+          return Object.assign({}, todo, {
+            title: text
+          });
+        }
+        return todo;
+      }),
+      editing: null
+    });
+  }
+
+  cancel() {
+    this.setState({editing: null});
+  }
+
+  clearCompleted() {
+    this.setState({
+      todos: this.state.todos.filter(todo => !todo.completed)
+    });
+  }
+
+  render() {
+    let main;
+    const {todos} = this.state;
+
+    const activeTodoCount = todos.reduce(
+      (accum, todo) => (todo.completed ? accum : accum + 1),
+      0
+    );
+
+    if (todos.length) {
+      main = (
+        <section className="main">
+          <input
+            className="toggle-all"
+            type="checkbox"
+            onChange={this.toggleAll}
+            checked={activeTodoCount === 0}
+          />
+          <ul className="todo-list">
+            <TodoList
+              todos={todos}
+              onToggle={todo => {
+                this.toggle(todo);
+              }}
+              onDestroy={todo => {
+                this.destroy(todo);
+              }}
+              onEdit={todo => {
+                this.edit(todo);
+              }}
+              editing={todo => this.state.editing === todo.id}
+              onSave={(todo, text) => {
+                this.save(todo, text);
+              }}
+              onCancel={() => this.cancel()}
+            />
+          </ul>
+        </section>
+      );
+    }
+
+    return (
+      <div className="todoapp">
+        <header className="header">
+          <h1>todos</h1>
+          <input
+            className="new-todo"
+            placeholder="What needs to be done?"
+            value={this.state.newTodo}
+            onKeyDown={event => {
+              this.handleNewTodoKeyDown(event);
+            }}
+            onChange={event => {
+              this.handleChange(event);
+            }}
+            autoFocus
+          />
+        </header>
+        {main}
+      </div>
+    );
+  }
+}
+
+export default TodoApp;