Added Changes of todo and navigation to diff pages

src/components/App.js

@@ -7,14 +7,6 @@ import TodoListCreationModal from './TodoListCreationModal';
 
 
 class App extends React.Component {
-    //state = {
-    //    todoArray: [{
-    //        id: 0,
-    //        isDone: false,
-    //        name: 'This is a quick task'
-    //    }]
-    //}
-
     state = {
         mode: 'NONE',
         todoArrayList: [{
@@ -23,8 +15,13 @@ class App extends React.Component {
                 todoList: [{
                        id: 0,
                        isDone: false,
-                       name: 'This is a quick task'
-                    }
+                       name: 'hi'
+                    },
+                    {
+                        id: 1,
+                        isDone: false,
+                        name: 'bye'
+                     }
                 ]
             }    
         ]
@@ -39,7 +36,7 @@ class App extends React.Component {
             todoList: [{
                    id: 0,
                    isDone: false,
-                   name: 'This is a quick task'
+                   name: ''
                 }
             ]
         }
@@ -58,38 +55,43 @@ class App extends React.Component {
     }
 
     createNewTodo = listId => {
-        const currentList = this.state.todoArrayList.filter(todo => {
-            if(listId === todo.id) return true;
+        const currentList = this.state.todoArrayList.find(todo => {
+            if(listId == todo.id) return true;
         });
+
+        console.log(currentList);
+
         let lastTodoId = 0;
         if(currentList.todoList.length > 0) lastTodoId = currentList.todoList[currentList.todoList.length-1].id;
-        //let addToArray = {
-        //    id: lastTodoArray.id + 1,
-        //    isDone: false,
-        //    name: ''
-        //}
-
-        //currentArray.push(addToArray);
-        //this.setState({
-        //    todoArray: currentArray
-        //});
 
+        this.setState({
+            todoArrayList: this.state.todoArrayList.map(todoArray => {
+                if(listId === todoArray.id) todoArray.todoList = [...todoArray.todoList, {         
+                    id: lastTodoId + 1,
+                    isDone: false,
+                    name: 'ok'
+                }];
+                return todoArray;
+            })
+        },() => console.log(this.state))
     }
 
-    changeTodo = (id, changedTodo) => {
-        let upcomingTodoArray = this.state.todoArray.map(todo => {
-            if(id === todo.id) {
-                todo = changedTodo;
-            }
-            return todo;
-        })  
-        console.log(upcomingTodoArray);
+
+
+    changeTodo = (listId, changedTodo) => {
         this.setState({
-            todoArray: upcomingTodoArray
-        })
+            todoArrayList: this.state.todoArrayList.map(todoArray => {
+                if(listId == todoArray.id){
+                    todoArray.todoList = todoArray.todoList.map(todo => {
+                        if(todo.id == changedTodo.id) return changedTodo;
+                        return todo;
+                    })
+                }
+                return todoArray;
+            })
+        },() => console.log(this.state))
     }
 
-
     deleteTodo = id => {
         let upcomingTodoArray = this.state.todoArray.filter(todo => {
             if(id == todo.id) {
@@ -105,20 +107,12 @@ class App extends React.Component {
     render() {
         return(
             <div className="ui container">
-                <Router history={history}>
-                    <div className="ui menu">
-                        <h2>Tesonet Todo List</h2>
-                        <div className="ui right menu">
-                            <button onClick={() => history.push('/todo/create')} className="ui button simple">New</button>
-                        </div>        
-                    </div>
-
+                <Router history={history}>                  
                     <div>
                         <Switch>
                             <Route exact path="/" render={(props) => <TodoPage {...props} deleteTodoArrayList={this.deleteTodoArrayList} todoArrayList={this.state.todoArrayList} /> } /> 
                             <Route exact path="/todo/create" render={(props) => <TodoListCreationModal createNewTodoList={this.createNewTodoList} />} />
-                            <Route exact path="/todo/:id" render={(props) => <TodoList {...props} deleteTodo={this.deleteTodo} changeTodo={this.changeTodo} todoArray={this.state.todoArrayList} />} />
-
+                            <Route exact path="/todo/:id" render={(props) => <TodoList {...props} createTodo={this.createNewTodo} deleteTodo={this.deleteTodo} changeTodo={this.changeTodo} todoArray={this.state.todoArrayList} />} />
                         </Switch>
                     </div>
                 </Router>

src/components/CheckBox.js

@@ -5,7 +5,7 @@ class Checkbox extends React.Component {
         return(
         <div>
             <div className="ui checkbox">
-                <input onChange={() => this.props.valueChange()} type="checkbox"></input>
+                <input checked={this.props.value}  onChange={() => this.props.valueChange()} type="checkbox"></input>
                 <label>Is Done?</label>
             </div>
         </div>

src/components/TodoCard.js

@@ -3,19 +3,41 @@ import Checkbox from './CheckBox';
 
 
 class TodoCard extends React.Component {
-
-    onChange = () => {
-
+    state = {
+        id: 0,
+        isDone: false,
+        name: ''
     }
 
-    onCheckboxChange = () => {
-        this.props.changeTodo(this.props.todo.id, {
+    componentDidMount() {
+        console.log(this.props)
+        this.setState({
             id: this.props.todo.id,
-            isDone: !this.props.isDone,
+            isDone: this.props.isDone,
             name: this.props.name
         })
     }
 
+    onCheckboxChange = () => {
+        this.setState({
+            isDone: !this.state.isDone
+        }, () => this.props.changeTodo(this.props.listId, {
+            id: this.state.id,
+            isDone: this.state.isDone,
+            name: this.state.name
+        }))
+    }
+
+    onInputChange = (changedInput) => {
+        this.setState({
+            name: changedInput
+        }, () => this.props.changeTodo(this.props.listId, {
+            id: this.state.id,
+            isDone: this.state.isDone,
+            name: this.state.name
+        }))
+    }
+
     render() {
         return( 
             <div className="ui segment">
@@ -24,11 +46,10 @@ class TodoCard extends React.Component {
                         <label>Todo</label>
                         <div className="inline fields">
                             <div className="field">
-                                <Checkbox value={this.props.todo.isDone} valueChange={this.onCheckboxChange}/>                        
+                                <Checkbox  value={this.state.isDone} valueChange={this.onCheckboxChange}/>                        
                             </div>
-
                             <div className="twelve wide field">
-                                <input  type="text" placeholder="What do you want to do?" />
+                                <input value={this.state.name}  onChange={(e) => this.onInputChange(e.target.value)} type="text" placeholder="What do you want to do?" />
                             </div>
                             <div className="two wide field">
                                 <button className="ui button red" onClick={() => {this.props.deleteTodo(this.props.todo.id)}}>Delete</button>

src/components/TodoList.js

@@ -1,14 +1,58 @@
 import React from 'react';
 import TodoCard from './TodoCard';
-
+import TodoMenu from './TodoMenu';
 
 class TodoList extends React.Component {
+    state = {
+        id: 0,
+        name: "",
+        todoList: [{
+            id: 0,
+            isDone: false,
+            name: ''
+        }]
+    };
+
+    componentDidMount() {
+        this.getStateFromParent();
+        console.log('TODOList:' );
+        console.log(this.state);
+    }
+
+
+
+
+    createNewTodo = () => {
+        this.props.createTodo(this.state.id);
+        let lastTodoId = 0;
+        if(this.state.todoList.length > 0) lastTodoId = this.state.todoList[this.state.todoList.length-1].id;
+
+        this.setState({
+            todoList: [...this.state.todoList, {
+                id: lastTodoId + 1,
+                isDone: false,
+                name: ''
+            }]
+        },console.log(this.state))
+    } 
+
+    getStateFromParent = () => {
+        const todo = this.props.todoArray.find(todoParam => {
+            if(todoParam.id == this.props.match.params.id) return true;
+        })
+        console.log(this.props);
+        this.setState({
+            id: todo.id,
+            name: todo.name,
+            todoList: todo.todoList
+        },() => console.log(this.state))
+    }
 
     renderCards = () => {
         return(
-            this.props.todoArray.map(todo => {
+            this.state.todoList.map(todo => {
                 return(
-                    <TodoCard key={todo.id} deleteTodo={this.props.deleteTodo} changeTodo={this.props.changeTodo} todo={todo}/>
+                    <TodoCard listId={this.state.id} key={todo.id} deleteTodo={this.props.deleteTodo} changeTodo={this.props.changeTodo} todo={todo}/>
                 );
             })
         );
@@ -17,6 +61,7 @@ class TodoList extends React.Component {
     render() {
         return(
             <div>
+                <TodoMenu buttonName='Create new Todo!' menuName='TestTonet Task' onClick={this.createNewTodo} />
                 {this.renderCards()}
             </div>
         );

src/components/TodoListCard.js

@@ -1,10 +1,10 @@
 import React from 'react';
+import history from '../history';
 
 class TodoListCard extends React.Component {
-
     render() {
         return (
-            <div className="ui card">
+            <div className="ui link card" onClick={() => history.push(`/todo/${this.props.TodoList.id}`)}>
                 <div className="content">
                     <div className="header">{this.props.TodoList.name}</div>
                 </div>

src/components/TodoMenu.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import history from '../history';
+
+
+const TodoMenu = (props) => {
+    return(
+        <div className="ui menu">
+            <h2 onClick={() => history.push('/')}>{props.menuName}</h2>
+            <div className="ui right menu">
+                <button onClick={props.onClick} className="ui button simple">{props.buttonName}</button>
+            </div>        
+        </div>
+    )
+}
+
+export default TodoMenu;

src/components/TodoPage.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import history from '../history';
 import TodoListCard from './TodoListCard';
-
+import TodoMenu from './TodoMenu';
 
 class TodoPage extends React.Component {
 
@@ -17,10 +18,14 @@ class TodoPage extends React.Component {
 
     render() {
         return (
-            <div className="ui grid">
-                {this.renderTodoListCards()}
+            <div>
+                <TodoMenu buttonName="Create new Todo List" menuName="TesTonet Task" onClick={() => history.push('/todo/create')}/>
+                <div className="ui grid">
+                    {this.renderTodoListCards()}
+                </div>
             </div>
 
+
         );
     }
 }