Optimaizing the Todolist Data binding

.gitignore

@@ -1 +1 @@
-./node_modules
+node_modules

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Todolist from './components/TodoList';
 import Navbar from './components/Navbar';
+import Main from './components/Main';
 import './App.css';
 
 class App extends Component {
@@ -8,7 +8,10 @@ class App extends Component {
     return (
       <div>
         <Navbar />
-        <Todolist />
+        <main>
+          <Main />
+        </main>
+        
       </div>
     );
   }

src/components/AddtodoForm.js

@@ -0,0 +1,23 @@
+import React from 'react' ;
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+class AddTodoForm extends React.Component {
+
+   render(){
+     return(
+       <div>
+         <div className="add-items d-flex">
+           <input className="form-control todo-list-input" id="user_input" value={this.props.formValue}  onChange={this.props.changeNextTodoValue.bind(this)}/>
+           <button className="add btn btn-primary font-weight-bold todo-list-add-btn" onClick={this.props.addToList.bind(this)}>Add</button>
+           <button className="add btn btn-primary font-weight-bold todo-list-add-btn" onClick={this.props.checkAllToggle.bind(this)}>{this.props.isCheckAll ? 'UncheckAll' : 'checkAll'}</button>
+        </div>
+       </div>
+    )
+   }
+
+
+
+
+ }
+
+ export default AddTodoForm

src/components/Li.js

@@ -3,39 +3,28 @@ import 'bootstrap/dist/css/bootstrap.css';
 import './Li.css';
 
 class Li extends React.Component {
-  constructor(props){
-    super(props)
-    console.log(this.props);
-    this.markedFlag = false;
-    this.state = {
-      cssClass: 'unMarked'
-    }
-  }
 
+  setMark = () => (
+    this.props.isDone ? 'marked' : 'unMarked'
+  )
   render(){
+    const {changeMark, id, isDone, at, todo, close} = this.props
     return (
       <div>
-        <li className={this.state.cssClass}>
+        <li className={this.setMark()}>
           <div className="form-check">
             <label className="form-check-label">
-              <input className="checkbox"  type="checkbox" onClick={this.mark} />
+              <input className={this.setMark()}  type="checkbox" onChange={changeMark.bind(this, id)} checked={isDone} />
-                {this.props.todo} At {this.props.at}
+                {todo} At {at}
                 <i className="input-helper"></i>
               </label>
             </div>
         </li>
+        <i className="material-icons dp48" onClick={close.bind(this, id)}>close</i>
       </div>
     )
   }
-  mark = () => {
+
-    if (this.markedFlag) {
-      this.markedFlag = false;
-      this.setState({cssClass:'unmarked'})
-    }else{
-      this.markedFlag = true;
-      this.setState({cssClass:'marked'})
-    }
-  }
 }
 
 

src/components/Main.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import TodoList from './TodoList' ;
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+class Main extends React.Component {
+
+ render(){
+   return(
+      <div>
+        <TodoList />
+      </div>
+    )
+  }
+ }
+
+ export default Main

src/components/Navbar.js

@@ -7,10 +7,10 @@ import 'bootstrap/dist/css/bootstrap.min.css';
    super(props)
    this.state = {
       navbarLinks:[
-        {navTitle: 'Home' , href: 'home'},
+        {navTitle: 'Home' , href: 'home',id:1},
-        {navTitle: 'Blog' , href: 'blog'},
+        {navTitle: 'Blog' , href: 'blog', id:2},
-        {navTitle: 'Contact Us', navTitle: 'contact'},
+        {navTitle: 'Contact Us', navTitle: 'contact', id:3},
-        {navTitle: 'About', navTitle: 'about'}
+        {navTitle: 'About', navTitle: 'about',id:60}
       ]
    	 }
    }
@@ -27,8 +27,8 @@ import 'bootstrap/dist/css/bootstrap.min.css';
           {
             this.state.navbarLinks.map((element, index)=>(
               <NavbarLi
-                key={index}
+                key={element.id}
-                id={++index}
+                id={element.id}
                 navTitle={element.navTitle}
                  />
             ))

src/components/NavbarLi.js

@@ -3,12 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 
 class NavbarLi extends React.Component {
- constructor(props) {
+ 
- super(props)
- this.state = {
-
- 	 }
- }
  render(){
  return(
      <li className="nav-item">

src/components/TodoList.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Li from './Li.js';
+import AddTodoForm from './AddtodoForm.js';
+
 import 'bootstrap/dist/css/bootstrap.css';
 
 
@@ -10,21 +12,57 @@ class TodoList extends React.Component {
     super(props)
     this.state = {
       todoList : [
-        {todo: 'Clean the bathroom' , at:'2020'},
+        {id: 123, todo: 'Clean the bathroom' , at:'2020', isDone: false},
-        {todo: 'Buy Milk', at:'2019'},
+        {id: 124, todo: 'Buy Milk', at:'2019', isDone: true},
-        {todo: 'Walk the dog' , at:'2018'},
+        {id: 129, todo: 'Walk the dog' , at:'2018', isDone: false}
-      ]
+      ],
+      nextTodoValue: '',
+      isCheckAll: false,
+      checkAllToggleName: 'checkAll'
     }
   }
 
+
   addToList = () => {
-    let todo = document.getElementById('user_input').value;
+    let todo = this.state.nextTodoValue;
     if (todo !== '') {
-    let tmp_state = this.state.todoList;
+    let tmp_state = this.state;
-      tmp_state.push({todo:todo, at:'This year'})
+      tmp_state.todoList.push({id: 12900,todo:todo, at:'This year' , isDone: false})
+      tmp_state.nextTodoValue = "";
       this.setState({tmp_state})
     }
   }
+
+  changeNextTodoValue = (event) => {
+    let newNextTodoValue = event.target.value
+    this.setState({
+      nextTodoValue : newNextTodoValue
+    });
+  }
+
+  changeMark = (id) => {
+    let tmp_state = this.state.todoList.map((ele) => {
+      if(id === ele.id) ele.isDone = !ele.isDone; ;
+      return ele
+    });
+    this.setState({todoList:tmp_state});
+  }
+  closeMark = (id) => {
+    let tmp_state = this.state.todoList.filter((ele, index) => (
+          ele.id !== id
+    )
+  )
+  this.setState({todoList:tmp_state})
+  }
+  checkAllToggle = () => {
+      let tmp_state = this.state.todoList.map((element) => {
+        element.isDone = !this.state.checkAllToggle
+        return (element)
+        }
+      )
+      this.setState({todoList:tmp_state,checkAllToggle:!this.state.checkAllToggle,isCheckAll: !this.state.isCheckAll})
+  }
+
   render(){
     return (
           <div className="page-content page-container" id="page-content">
@@ -34,17 +72,24 @@ class TodoList extends React.Component {
                       <div className="card px-3">
                           <div className="card-body">
                               <h4 className="card-title">Awesome Todo list</h4>
-                              <div className="add-items d-flex">
+                                <AddTodoForm
-                                <input className="form-control todo-list-input" id="user_input" />
+                                  checkAllToggleName={this.state.checkAllToggleName}
-                                  <button className="add btn btn-primary font-weight-bold todo-list-add-btn" onClick={this.addToList}>Add</button>
+                                  checkAllToggle={this.checkAllToggle}
-                                 </div>
+                                  isCheckAll={this.state.isCheckAll}
+                                  formValue={this.state.nextTodoValue}
+                                  addToList={this.addToList}
+                                  changeNextTodoValue={this.changeNextTodoValue}
+                                  />
                               <div className="list-wrapper">
                                   <ul className="d-flex flex-column-reverse todo-list">
                                       {
-                                        this.state.todoList.map( (element, index) => (
+                                        this.state.todoList.map( (element) => (
                                             <Li
-                                              key={index}
+                                              close={this.closeMark}
-                                              id={index}
+                                              changeMark={this.changeMark}
+                                              isDone={element.isDone}
+                                              key={element.id}
+                                              id={element.id}
                                               todo={element.todo}
                                               at={element.at}
                                               />