done

README.md

@@ -48,14 +48,14 @@ In this project you will build an application that allows for todos to be added,
 - **Build all components as class components. Find them inside `frontend/components`.**
 - **Don't focus on styling. We want you to worry about function over form today.**
 - Your todo list should display a list of todos, an input field, a submit button, and a button to filter out completed todos.
-- `<App />` will hold all the data needed for this project.
-  - All of your application data will be stored here on `<App />`.
-  - All of your `handler` functions should live here on `<App />`.
-- `<TodoList />` receives your todos array and iterates over the list generating a new `<Todo />` for each element in the array.
-- `<Todo />` is a component that takes in the `todo` data and displays the task to the screen.
-- `<Form />` will hold your input field and your `Add Todo` and `Clear Completed` buttons.
-  - Your input field should take in user input, and allow a user to press `Enter` or click on the `Submit Button` to add a todo to your list.
-  - Once a todo is submitted, the Todo List should re-render and show the added todo.
+- `<App />` will hold all the data needed for this project. -- check
+  - All of your application data will be stored here on `<App />`. -- check
+  - All of your `handler` functions should live here on `<App />`. -- check
+- `<TodoList />` receives your todos array and iterates over the list generating a new `<Todo />` for each element in the array. -- check
+- `<Todo />` is a component that takes in the `todo` data and displays the task to the screen. -- check
+- `<Form />` will hold your input field and your `Add Todo` and `Clear Completed` buttons. --check
+  - Your input field should take in user input, and allow a user to press `Enter` or click on the `Submit Button` to add a todo to your list. -- check
+  - Once a todo is submitted, the Todo List should re-render and show the added todo. -- check
 
 ## Submission Format
 

frontend/components/App.js

@@ -1,10 +1,102 @@
 import React from 'react'
+import TodoList from './TodoList'
+import Form from './Form'
+
+const theListArr = [
+  {
+    name: 'take out the trash',
+    id: Math.random(),
+    completed: false
+  },
+  {
+    name: 'wash the dishes',
+    id: Math.random(),
+    completed: false
+  },
+  {
+    name: 'go running',
+    id: Math.random(),
+    completed: false
+  }
+
+]
 
 export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      theListArr: theListArr,
+      itemText: ''
+    }
+  }
+
+  toggleCompleted = (id) => {
+    this.setState({
+      theListArr: this.state.theListArr.map(list => {
+        if (id === list.id) {
+          return {
+            ...list, completed: !list.completed
+          }
+        }
+        return list
+      })
+    })
+  }
+
+  filterCompleted = () => {
+    this.setState({
+      theListArr: this.state.theListArr.filter(list => list.completed === false
+      )
+    })
+  }
+
+  addList = (name) => {
+    const newList = {
+      name: name,
+      id: Math.random(),
+      completed: false
+    }
+
+    const newListArr = [...this.state.theListArr, newList]
+
+    this.setState({
+      theListArr: newListArr
+    })
+  }
+
+  onSubmit = (e) => {
+    e.preventDefault()
+    this.addList(this.state.itemText)
+    this.setState({
+      itemText: ''
+    })
+  }
+
+
+
+  onChange = (e) => {
+    this.setState({
+      itemText: e.target.value
+    })
+  }
+
+
+
   render() {
+
     return (
       <div>
-        Todo App
+        <TodoList
+          theListArr={this.state.theListArr}
+          toggleCompleted={this.toggleCompleted}
+        />
+        <Form
+          itemText={this.state.itemText}
+          filterCompleted={this.filterCompleted}
+          onSubmit={this.onSubmit}
+          onChange={this.onChange}
+          theListArr={this.state.theListArr}
+        />
       </div>
     )
   }

frontend/components/Form.js

@@ -2,9 +2,18 @@ import React from 'react'
 
 export default class Form extends React.Component {
   render() {
+    console.log(this.props.theListArr.completed)
     return (
       <div>
-        Form
+        <form onSubmit={this.props.onSubmit}>
+          <label>Add a chore</label> <br />
+          <input
+          value={this.props.itemText}
+            onChange={this.props.onChange}
+          /> <br />
+          <button>Add</button>
+          <button onClick={this.props.filterCompleted}>clear</button>
+        </form>
       </div>
     )
   }

frontend/components/Todo.js

@@ -2,10 +2,20 @@ import React from 'react'
 
 export default class Todo extends React.Component {
   render() {
+    console.log(this.props.list.completed)
     return (
       <div>
-        Todo
+        <a href='#' onClick={() => this.props.toggleCompleted(this.props.list.id)}>{this.props.list.name}{this.props.list.completed === true ? '--Completed' : null}</a>
       </div>
     )
   }
 }
+
+
+// {
+//   this.props.theListArr.map(list => (
+//           <div key={list.id}>
+//             {list.name}
+//             </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
+    {
+      this.props.theListArr.map(list =>
+        <Todo
+         list={list}
+         key={list.id} 
+         toggleCompleted={this.props.toggleCompleted}
+          />)
+    }
       </div>
     )
   }