baseline for episode 13

Author: neerajsingh0101

ep13-clear-completed/README.md

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

ep13-clear-completed/app/components/App.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import DisplayList from './DisplayList';
+
+export default class App extends React.Component {
+
+  constructor () {
+    super();
+    this.state = { title: '', todos:  [
+                                        { title: 'eggs', done: false },
+                                        { title: 'banana', done: false },
+                                        { title: 'bread', done: false }
+                                      ] };
+  }
+
+  handleDone (titleToBeMarkedAsDone) {
+    console.log(titleToBeMarkedAsDone + " wants to be marked as done");
+    var _todos = this.state.todos;
+    var todo = _todos.filter((todo) => {
+      return todo.title === titleToBeMarkedAsDone;
+    })[0];
+
+    todo.done = !todo.done;
+
+    this.setState({ todos: _todos });
+  }
+
+  handleDelete (titleToBeDeleted) {
+    var newTodos = this.state.todos.filter( (todo) => {
+      return todo.title != titleToBeDeleted
+    } )
+
+    this.setState({ todos: newTodos});
+  }
+
+  handleSubmit (event) {
+    event.preventDefault();
+
+    var title = this.state.title;
+    var newTodos = this.state.todos.concat({ title: title, done: false });
+
+    this.setState({ title: '', todos: newTodos });
+  }
+
+  handleChange (event) {
+    var title = event.target.value;
+    this.setState({ title: title });
+  }
+
+  render () {
+    return  <div>
+              <p> TODO </p>
+              <form onSubmit={this.handleSubmit.bind(this)}>
+                <input onChange={this.handleChange.bind(this)} value={this.state.title} />
+                <button> Submit </button>
+              </form>
+
+              <p>
+                Number of total tasks: { this.state.todos.length }
+              </p>
+              <p>
+                Number of total tasks done: { this.state.todos.filter((todo) => { return todo.done }).length }
+              </p>
+
+              <DisplayList
+                handleDone={this.handleDone.bind(this)}
+                handleDelete={this.handleDelete.bind(this)}
+                todos={this.state.todos}  />
+            </div>;
+  }
+}

ep13-clear-completed/app/components/DisplayItem.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default class DisplayItem extends React.Component {
+
+  render () {
+    var todo = this.props.todo;
+    var title = todo.title;
+
+    return <li>
+              <input
+                checked={todo.done}
+                onChange={this.props.handleDone.bind(null, title)}
+                type="checkbox"
+                style={{ fontSize: 'x-large' }} />
+
+              { title }
+              <a href='#' onClick={ this.props.handleDelete.bind(null, title) }>
+                [x]
+              </a>
+           </li>;
+  }
+
+}
+

ep13-clear-completed/app/components/DisplayList.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import DisplayItem from './DisplayItem';
+
+export default class DisplayList extends React.Component {
+
+  render () {
+    return <ul>
+            { this.props.todos.map((todo, i) => {
+              return <DisplayItem
+                        key={todo.title}
+                        todo={todo}
+                        handleDone={this.props.handleDone}
+                        handleDelete={this.props.handleDelete.bind(null, todo.title)} />;
+            }) }
+           </ul>
+  }
+
+}

ep13-clear-completed/app/main.jsx

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

ep13-clear-completed/app/stylesheets/main.css

@@ -0,0 +1,3 @@
+body{
+  font-size: 200%;
+}

ep13-clear-completed/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "learning-reactjs-in-steps",
+  "version": "0.0.1",
+  "description": "Learn ReactJS in steps",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "TAGET=build webpack",
+    "start": "TARGET=dev webpack-dev-server --devtool eval --progress --colors --hot"
+  },
+  "author": "Neeraj Singh",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^5.6.15",
+    "babel-loader": "^5.3.1",
+    "css-loader": "^0.15.1",
+    "html-webpack-plugin": "^1.5.2",
+    "node-libs-browser": "^0.5.2",
+    "react-hot-loader": "^1.2.7",
+    "style-loader": "^0.12.3",
+    "webpack": "^1.10.1",
+    "webpack-dev-server": "^1.10.1",
+    "webpack-merge": "^0.1.2"
+  },
+  "dependencies": {
+    "react": "^0.13.3"
+  }
+}

ep13-clear-completed/webpack.config.js

@@ -0,0 +1,54 @@
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var merge = require('webpack-merge');
+
+var TARGET = process.env.TARGET;
+var ROOT_PATH = path.resolve(__dirname);
+
+var common = {
+  entry: [path.resolve(ROOT_PATH, 'app/main')],
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+  },
+  output: {
+    path: path.resolve(ROOT_PATH, 'build'),
+    filename: 'bundle.js',
+  },
+  plugins: [
+     new HtmlWebpackPlugin({ title: 'Todo app', }),
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.css$/,
+        loaders: ['style', 'css'],
+      },
+      {
+        test: /\.jsx?$/,
+        loader: 'babel?stage=1',
+        include: path.resolve(ROOT_PATH, 'app'),
+      }
+    ],
+  },
+};
+
+if (TARGET === 'build') {
+  module.exports = common;
+}
+
+if (TARGET === 'dev') {
+  module.exports = merge(common, {
+    entry: [
+      'webpack-dev-server/client?http://0.0.0.0:8080',
+      'webpack/hot/dev-server'
+    ],
+    module: {
+      loaders: [ {
+          test: /\.jsx?$/,
+          loaders: ['react-hot', 'babel?stage=1'],
+          include: path.resolve(ROOT_PATH, 'app'),
+        },
+      ],
+    },
+  });
+}