kfir/TodoList
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Optimaizing the Todolist Data binding

Browse source
This commit is contained in:
Kfir 2020-01-12 23:23:43 +02:00
parent d02e6061b7
commit 58af8f2ab7
8 changed files with 121 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1 +1 @@
./node_modules
node_modules

7
src/App.js
View file

@ -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>
);
}

23
src/components/AddtodoForm.js Normal file
View file

@ -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

29
src/components/Li.js
View file

@ -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} />
{this.props.todo} At {this.props.at}
<input className={this.setMark()} type="checkbox" onChange={changeMark.bind(this, id)} checked={isDone} />
{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'})
}
}
}

17
src/components/Main.js Normal file
View file

@ -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

12
src/components/Navbar.js
View file

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

5
src/components/NavbarLi.js
View file

@ -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">

73
src/components/TodoList.js
View file

@ -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'},
{todo: 'Buy Milk', at:'2019'},
{todo: 'Walk the dog' , at:'2018'},
]
{id: 123, todo: 'Clean the bathroom' , at:'2020', isDone: false},
{id: 124, todo: 'Buy Milk', at:'2019', isDone: true},
{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;
tmp_state.push({todo:todo, at:'This year'})
let tmp_state = this.state;
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">
<input className="form-control todo-list-input" id="user_input" />
<button className="add btn btn-primary font-weight-bold todo-list-add-btn" onClick={this.addToList}>Add</button>
</div>
<AddTodoForm
checkAllToggleName={this.state.checkAllToggleName}
checkAllToggle={this.checkAllToggle}
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}
id={index}
close={this.closeMark}
changeMark={this.changeMark}
isDone={element.isDone}
key={element.id}
id={element.id}
todo={element.todo}
at={element.at}
/>