completed coursework

frontend/components/App.js

@@ -1,10 +1,52 @@
 import React from 'react'
+import Form from './Form'
+import TodoList from './TodoList';
 
 export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      data: [{
+        name: "Obtain Cat",
+        id: Date.now(),
+        completed: false
+      }],
+    }
+  }
+
+  handleSubmit = (e,item) => {
+    e.preventDefault();
+    if(item){
+      const newItem = {
+        name: item,
+        id: Date.now(),
+        completed: false
+      }
+      this.setState({data: [...this.state.data, newItem]})
+    }
+  }
+
+  toggleCompleted = itemId => {
+    this.setState({...this.state, data: this.state.data.map(task => {
+      if(task.id === itemId) {
+        return {...task,completed: !task.completed}
+      }
+      return task
+    })})
+  }
+
+  clearCompleted = () => {
+    this.setState({data: this.state.data.filter(task => {
+      if(!task.completed) return task;
+    })})
+  }
+
+
   render() {
     return (
       <div>
-        Todo App
+        <TodoList toggleCompleted={this.toggleCompleted} data={this.state.data}/>
+        <Form clear={this.clearCompleted} submit={this.handleSubmit} test={this.state.test}/>
       </div>
     )
   }

frontend/components/Form.js

@@ -1,10 +1,29 @@
 import React from 'react'
 
+
 export default class Form extends React.Component {
+  constructor () {
+    super();
+    this.state = {
+      form: ''
+    }
+  }
+  submit = (e,item) => {
+    this.props.submit(e,this.state.form)
+    this.setState({form: ''})
+  }
+
+  change = (e) => {
+    e.preventDefault()
+    this.setState({...this.state.form, form: e.target.value})
+  }
   render() {
     return (
       <div>
-        Form
+        <form onSubmit={this.submit}>
+        <input type="text" name='form' onChange={this.change} value={this.state.form}/><button>Submit</button>
+        </form>
+        <button onClick={this.props.clear}>Clear Completed</button>
       </div>
     )
   }

frontend/components/Todo.js

@@ -1,10 +1,13 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
+
   render() {
     return (
-      <div>
-        Todo
+      <div className={`item${this.props.task.completed ? 'completed' : ''}`}
+      onClick={() => this.props.toggleCompleted(this.props.task.id)}>
+        <h2>{this.props.task.name}</h2>
+
       </div>
     )
   }

frontend/components/TodoList.js

@@ -1,10 +1,18 @@
 import React from 'react'
+import Todo from './Todo'
 
 export default class TodoList extends React.Component {
+
+
+
+
   render() {
     return (
-      <div>
-        TodoList
+      <div className='Todo-list'>
+        {this.props.data.map(task => (
+          <Todo toggleCompleted={this.props.toggleCompleted} key={task.id} task={task}/>
+        ))}
+
       </div>
     )
   }

frontend/styles/styles.css

@@ -83,3 +83,7 @@ ul, form {
 .todo:hover {
   cursor: pointer;
 }
+
+.itemcompleted {
+  text-decoration: line-through;
+}