done

README.md

@@ -10,7 +10,7 @@ This module explored lifecycle methods in class components. In your project you
 - Use a submit event handler to `POST` a new resource to the server
 - Use a click handler to `PATCH` an existing resource on the server
 - Update the frontend to keep it in sync with the state of the server
-- Use frontend filtering to display only some resources
+- Use frontend filtering to display only some resources 
 
 ## Introduction
 

frontend/components/App.js

@@ -1,9 +1,79 @@
 import React from 'react'
+import axios from 'axios'
+import Form from './Form'
+import TodoList from './TodoList'
 
 const URL = 'http://localhost:9000/api/todos'
 
 export default class App extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      data: [],
+      text: '',
+      displayCompleted: true
+    }
+  }
+
+  componentDidMount() {
+    axios.get(URL)
+      .then(res => this.setState({ ...this.state, data: res.data.data })
+      )
+      .catch(err => console.log(err))
+  }
+
+  onSubmit = e => {
+    e.preventDefault()
+    const payloadToSend = { name: this.state.text, completed: this.state.data.completed }
+    axios.post(URL, payloadToSend)
+    .then(res => {
+      this.setState({...this.state, data: [...this.state.data, res.data.data]})
+    })
+  }
+
+ onClick = id => {
+    axios.patch(`${URL}/${id}`)
+    .then(res => {
+      this.setState({...this.state, data: this.state.data.map(e => {
+        if(e.id !== id ) return e
+        return res.data.data
+      }) })
+    })
+  }
+
+  onChange = e => {
+    this.setState({...this.state, text: e.target.value})
+  }
+
+  filterCompleted = () => {
+    this.setState({
+      ...this.state, data: this.state.data.filter(e => !e.completed
+      )
+    })
+  }
+
+  hideCompleted = () => {
+    this.setState({ ...this.state, displayCompleted: !this.state.displayCompleted })
+  }
+
   render() {
-    return null
+    return (
+      <div>
+        <h1>Chores &#128543;</h1>
+        <TodoList
+          theData={this.state.data} 
+          onClick={this.onClick}
+          displayCompleted={this.state.displayCompleted}
+          />
+        <Form
+          theData={this.state.data}
+          innerText={this.state.text}
+          onSubmit={this.onSubmit}
+          onChange={this.onChange}
+          hideCompleted={this.hideCompleted}
+          displayCompleted={this.state.displayCompleted}
+          />
+      </div>
+    )
+  }
   }
-}

frontend/components/Form.js

@@ -2,6 +2,18 @@ import React from 'react'
 
 export default class Form extends React.Component {
   render() {
-    return null
+    return(
+      <>
+      <form onSubmit={this.props.onSubmit}>
+        <input
+        type='text'
+        value={this.props.text} 
+        onChange={this.props.onChange}
+        />
+        <button>Submit</button>
+      </form>
+      <button onClick={this.props.hideCompleted}>{this.props.displayCompleted ? 'show' : 'hide'}</button>
+      </>
+    )
   }
 }

frontend/components/Todo.js

@@ -2,6 +2,12 @@ import React from 'react'
 
 export default class Todo extends React.Component {
   render() {
-    return null
+   return(
+    <div>
+    <a href='#' onClick={()=>this.props.onClick(this.props.id)}>
+      {this.props.name}{this.props.completed === true ? '===completed' : null}</a>
+    </div>
+
+   )
   }
 }

frontend/components/TodoList.js

@@ -1,7 +1,22 @@
 import React from 'react'
+import Todo from './Todo'
 
 export default class TodoList extends React.Component {
   render() {
-    return null
-  }
-}
+    console.log(this.props.theData)
+    return (
+      <>
+            {
+              this.props.theData.map(e => 
+             {return !this.props.displayCompleted || !e.completed ? <Todo
+                  key={e.id}
+                  id={e.id}
+                  name= {e.name}
+                  completed={e.completed}
+                  onClick={this.props.onClick}
+                /> : <div key={e.id}></div>}
+              )
+
+                }
+      </>
+    )}}