Sample React-Express-MongoDB (#59)

Signed-off-by: Afzal <sah.afzal@gmail.com>

react-express-mongodb/frontend/src/components/AddTodo.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default class AddTodo extends React.Component {
+
+    _onAddTodo = () => {
+        if(this.refs.todo.value.length > 0) {
+            this.props.handleAddTodo(this.refs.todo.value);
+            this.refs.todo.value = '';
+        }
+    };
+
+    render() {
+        return (
+            <div className="new-todo form-group">
+                <input type="text" className="form-control" ref="todo"/>
+                <button className="btn btn-primary" onClick={this._onAddTodo}>
+                    Add Todo
+                </button>
+            </div>
+        )
+    }
+}

react-express-mongodb/frontend/src/components/TodoList.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+export default class TodoList extends React.Component {
+
+    constructor(props){
+        super(props);
+
+        this.state = {
+            activeIndex:0,
+        }
+    }
+
+    _handleActive(index) {
+        this.setState({
+            activeIndex: index
+        })
+    }
+
+    _renderTodos(todos) {
+        return (
+            <ul className="list-group">
+                {
+                    todos.map((todo, i) => {
+                        return (<li className={'list-group-item cursor-pointer ' + (i===this.state.activeIndex ? 'active' : '')}
+                                    key={i}
+                                    onClick={() => {this._handleActive(i)}}
+                        >
+                            {todo.text}
+                        </li>)
+                    })
+                }
+            </ul>
+        )
+    }
+
+
+    render() {
+        let { todos } = this.props;
+        return (
+            todos.length > 0 ?
+                this._renderTodos(todos)
+                :
+                <div className="alert alert-primary" role="alert">
+                    No Todos to display
+                </div>
+        )
+    }
+}