Esmodea burk

frontend/components/App.js

@@ -1,11 +1,75 @@
-import React from 'react'
+import React from 'react';
+import TodoList from './TodoList';
+import Form from './Form';
+
+const todoList = [
+  {
+    name: 'Brush Teeth',
+    id: new Date().getTime(),
+    completed: false
+  }
+];
 
 export default class App extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      todoList: todoList,
+      inputValue: '',
+      hideCompleted: false
+    }
+  }
+
+  toggleHidden = ()=>{
+    this.setState({
+      ...this.state,
+      hideCompleted: !this.state.hideCompleted
+    })
+
+  }
+
+  toggleCompleted = (itemId)=>{
+    this.setState({
+      todoList: this.state.todoList.map(item => {
+        if(itemId === item.id) {
+          return {
+            ...item,
+            completed: !item.completed
+          };
+        };
+        return {...item};
+      })
+    });
+  };
+
+  inputChange = (e)=>{
+    this.setState({
+      ...this.state,
+      inputValue: e.target.value
+    })
+  }
+
+  handleSubmit = (e)=>{
+    e.preventDefault();
+    const newListItem = {
+      name: this.state.inputValue,
+      id: new Date().getTime(),
+      completed: false 
+    }
+    this.setState({
+      ...this.state,
+      todoList: [...this.state.todoList, newListItem],
+      inputValue: ''
+    })
+  }
+
   render() {
     return (
-      <div>
-        Todo App
+      <div className='App'>
+        <TodoList todoItems={this.state.todoList} toggleCompleted={this.toggleCompleted} hideCompleted={this.state.hideCompleted} />
+        <Form inputValue={this.state.inputValue} inputChange={this.inputChange} handleSubmit={this.handleSubmit} />
+        <button onClick={this.toggleHidden}>{this.state.hideCompleted ? 'Show Completed' : 'Hide Completed'}</button>
       </div>
     )
   }
-}
+};

frontend/components/Form.js

@@ -3,9 +3,13 @@ import React from 'react'
 export default class Form extends React.Component {
   render() {
     return (
-      <div>
-        Form
-      </div>
+      <form onSubmit={this.props.handleSubmit}>
+        <input 
+          type='text' 
+          onChange={this.props.inputChange}
+          value={this.props.inputValue} />
+        <button>DO THIS!</button>
+      </form>
     )
   }
 }

frontend/components/Todo.js

@@ -1,10 +1,18 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 
 export default class Todo extends React.Component {
+  constructor(){
+    super();
+  }
   render() {
     return (
-      <div>
-        Todo
+      <div 
+        className={`list-item ${this.props.hideCompleted && this.props.todoItem.completed ? 'hidden' : ''}`} 
+        onClick={()=> this.props.toggleCompleted(this.props.todoItem.id)}
+        >
+        {this.props.todoItem.name}{this.props.todoItem.completed ? ' ✓' : ''}
+        <br/>
+        <br/>
       </div>
     )
   }

frontend/components/TodoList.js

@@ -1,10 +1,20 @@
-import React from 'react'
+import React from 'react';
+import Todo from './Todo';
 
 export default class TodoList extends React.Component {
+  constructor(){
+    super();
+  }
+
   render() {
     return (
-      <div>
-        TodoList
+      <div className='list'>
+        Todos:
+        <br />
+        <br />
+        {this.props.todoItems.map(item => {
+          return <Todo todoItem={item} key={item.id} toggleCompleted={this.props.toggleCompleted} hideCompleted={this.props.hideCompleted} />
+        })}
       </div>
     )
   }

frontend/styles/styles.css

@@ -83,3 +83,11 @@ ul, form {
 .todo:hover {
   cursor: pointer;
 }
+
+.list-item {
+  margin-left: 1rem;
+}
+
+.hidden {
+  display: none;
+}