[Update Todo : Conditional Rendering added]

Frontend/src/components/Home.js

@@ -9,10 +9,11 @@ import SubmitForm from './SubmitForm';
 import SearchForm from './SearchForm';
 import TodoList from './TodoList';
 import Todo from './Todo';
+import TodoApp from './Todo';
 import Header from './Header';
 class Home extends React.Component {
   state = {
-    tasks: [{name:'task 1',startDate:'2020-10-30',endDate:'2020-10-30'}]
+    tasks: []
   };
 
   handleSubmit = task => {
@@ -28,18 +29,45 @@ class Home extends React.Component {
   handleDelete = (index) => {
     const newArr = [...this.state.tasks];
     // console.log(newArr[index],index);
-    let task = newArr[index];
+    let pos = -1;
+    for( let i =0 ; i< newArr.length;i++ ){
+      if( newArr[i].id === index){
+        pos = i;
+        break;
+      }
+    }
+    if( pos == -1) return;
+    let task = newArr[pos];
     console.log(task);
     axios.delete(`http://localhost:3001/todos`,  { data: task })
     .then(res => {
       console.log("In Frontend",res.data);
     });
-    newArr.splice(index, 1);
+    newArr.splice(pos, 1);
     this.setState({tasks: newArr});
   }
-  // handleUpdate = (index) => {
+  handleUpdate = (task) => {
+    const newArr = [...this.state.tasks];
 
-  // }
+    let pos = -1;
+    for( let i =0 ; i< newArr.length; i++ ){
+      if( newArr[i].id === task.id){
+        pos = i;
+        break;
+      }
+    }
+    if( pos == -1) return;
+    newArr[pos].name = task.name;
+    newArr[pos].startDate = task.startDate;
+    newArr[pos].endDate= task.endDate;
+    let updateTask = newArr[pos];
+    console.log(updateTask);
+    axios.put(`http://localhost:3001/todos`,  { data: updateTask })
+    .then(res => {
+      console.log("Updating In Frontend",res.data);
+    });
+    this.setState({tasks: newArr});
+  }
   performAPICall =  () => {
     
     let todoData = [];
@@ -69,7 +97,8 @@ class Home extends React.Component {
                 </Button>
             </Link>
              <Header numTodos={this.state.tasks.length} />
-             <TodoList tasks={this.state.tasks} onDelete={this.handleDelete}  />
+             <TodoList tasks={this.state.tasks} onDelete={this.handleDelete} 
+             onUpdate={this.handleUpdate} />
              <SubmitForm onFormSubmit={this.handleSubmit} />
         </div>
       </div>

Frontend/src/components/SearchForm.js

@@ -39,6 +39,18 @@ class SearchForm extends Component{
           startDate: '',
           endDate: ''});
       }
+      handleDelete = (index) => {
+        const newArr = [...this.state.tasks];
+        // console.log(newArr[index],index);
+        let task = newArr[index];
+        console.log(task);
+        axios.delete(`http://localhost:3001/todos`,  { data: task })
+        .then(res => {
+          console.log("In Frontend",res.data);
+        });
+        newArr.splice(index, 1);
+        this.setState({tasks: newArr});
+      }
       handleInputChange = (event) => {
         event.preventDefault()
         this.setState({

Frontend/src/components/Todo.js

 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import App from '../App';
- const Todo = (props) => {
+ class Todo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+        id:'',
+        name: '', 
+        endDate: '',
+        startDate:'',
+        mode:'view'
+    };
+    
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+  }
+
+  handleInputChange = (event) => {
+    event.preventDefault();
+    this.setState({
+       [ event.target.name]: event.target.value
+    })
+  }
+  
+  handleSave(event) {
+    event.preventDefault();
+    if(this.state.name ===''  || this.state.startDate === '' || this.state.endDate==='') return;
+    this.props.onUpdate(this.state);
+    this.setState({
+      name: this.state.name,
+      startDate:this.state.startDate,
+      endDate:this.state.endDate,
+      mode: 'view'
+    });
+  }
+
+  handleEdit() {
+    this.setState({mode: 'edit'});
+  }
+  
+  renderInputField() {
+    if(this.state.mode === 'view') {
+      return <div></div>;
+    } else {
+      return (
+          <p>
+           <form onSubmit={this.handleSave}> 
+            <input
+              name='name'
+              onChange={this.handleInputChange}
+              value={this.state.name}
+            />
+             <input 
+             
+              name='startDate'
+              value={this.state.startDate}
+              onChange={this.handleInputChange}
+              type='date'
+            />
+             <input 
+             type='date'
+              name='endDate'
+              value={this.state.endDate}
+              onChange={this.handleInputChange}
+            />
+            </form>
+          </p>
+      );
+    }
+  }
+  
+  renderButton() {
+    if(this.state.mode === 'view') {
+      return (
+          <button class="button3" onClick={this.handleEdit}>
+            Edit
+          </button>
+      );
+    } else {
+      return (
+          <button class="button1" onClick={this.handleSave}>
+            Save
+          </button>
+          
+      );
+    }
+  }
+  componentDidMount() {
+    this.setState({
+      id:this.props.content.id,
+      name:this.props.content.name,
+      startDate:this.props.content.startDate,
+      endDate:this.props.content.endDate
+    })
+ }
+
+    render(){
+
+      const {name} = this.state;
+      const {startDate} = this.state;
+      const { endDate} = this.state;
     return(
       <div className='list-item'>
         <li >
-              <div>Name : {props.content.name}</div>
-              <div>StartDate : {props.content.startDate}</div>
-              <div>End Date :  {props.content.endDate}</div>
+              <div>Name : {name}</div>
+              <div>StartDate : {startDate}</div>
+              <div>End Date :  {endDate}</div>
         </li>
-        <button class="button3" > Update</button>
-        <button class="button2"onClick={() => {props.onDelete(props.id)} }> Delete</button>
+        
+        <div>
+        {/* <p>Text: {this.state.text}</p> */}
+        {this.renderInputField()}
+        {this.renderButton()}
+      </div> 
+        
+        <button class="button2"onClick={() => {this.props.onDelete(this.props.id)} }> Delete</button>
       </div>
     );
-}
+  }
+ }
+// class TodoApp extends React.Component {
+ 
+//     // {name: '', inputText: '', mode:'view'};
+    
+//     // this.handleChange = this.handleChange.bind(this);
+//     // this.handleSave = this.handleSave.bind(this);
+//     // this.handleEdit = this.handleEdit.bind(this);
+//   }
+  
+//   handleInputChange = (event) => {
+//     event.preventDefault()
+//     this.setState({
+//        [ event.target.name]: event.target.value
+//     })
+//   }
+  
+//   handleSave() {
+//     name=inputText;
+//      mode= 'view';
+//   }
+
+//   handleEdit() {
+//     this.setState({mode: 'edit'});
+//   }
+  
+//   renderInputField(mode) {
+//     if(mode === 'view') {
+//       return <div></div>;
+//     } else {
+//       return (
+//           <p>
+//             <input
+//               onChange={this.handleChange}
+//               value={this.state.inputText}
+//             />
+           
+//           </p>
+//       );
+//     }
+//   }
+  
+//   renderButton() {
+//     if(this.state.mode === 'view') {
+//       return (
+//           <button onClick={this.handleEdit}>
+//             Edit
+//           </button>
+//       );
+//     } else {
+//       return (
+//           <button onClick={this.handleSave}>
+//             Save
+//           </button>
+//       );
+//     }
+//   }
+  
+//   render () {
+//     return (
+//       <div>
+//         <p>Name: {this.state.name}</p>
+//         {this.renderInputField()}
+//         {this.renderButton()}
+//       </div>
+//     );
+//   }
+// }
+
+// ReactDOM.render(
+//   <TodoApp />,
+//   document.getElementById('root')
+// );
+
 export default Todo;
\ No newline at end of file

Frontend/src/components/TodoList.js

@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom';
 import App from '../App';
 import Todo from './Todo';
 import axios from 'axios';
- const TodoList = (props) => {
+ class TodoList extends Component {
+   render(){
   var todoData = [];
   axios.get(`http://localhost:3001/todos`)
   .then(res => {
@@ -12,8 +13,8 @@ import axios from 'axios';
     // console.log(res.data);
   });
 
-    const todos = props.tasks.map((todo, index) => {
-      return <Todo content={todo} key={index} id={index} onDelete={props.onDelete} />
+    const todos = this.props.tasks.map((todo, index) => {
+      return <Todo content={todo} key={todo.id} id={todo.id}  onUpdate={this.props.onUpdate} onDelete={this.props.onDelete} />
     })
     return( 
       <div className='list-wrapper'>
@@ -21,4 +22,5 @@ import axios from 'axios';
       </div>
     );
   }
+  }
   export default TodoList;
\ No newline at end of file