Kate ridgle

frontend/components/App.js

@@ -1,9 +1,92 @@
-import React from 'react'
+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 {
-  render() {
-    return null
+export default class App extends React.Component { 
+
+  state = {
+    todos: [],
+    error: '',
+    todoNameInput: '',
+    displayCompleted: true,
+  }
+
+  onNameChange = evt => {
+    const {value} = evt.target
+    this.setState({...this.state, todoNameInput: value})
+  }
+
+  resetForm = () =>{
+    this.setState({...this.state, todoNameInput: ''})
+  }
+
+  setAxiosResponseError = err => this.setState({...this.state, error: err.response.data.message})
+
+  postNewTodo = () => {
+
+    axios.post(URL, {name: this.state.todoNameInput})
+      .then(res =>{
+      this.setState({...this.state, todos: this.state.todos.concat(res.data.data)})
+      this.resetForm()
+      })
+      .catch(this.setAxiosResponseError)
+  }
+
+  onTodoFormSubmit = evt => {
+    evt.preventdefault()
+    this.postNewTodo()
+  }
+
+  fetchAllTodos = () => {
+    axios.get(URL)
+      .then(res => {
+        this.setState({...this.state, todos: res.data.data})
+      })
+      .catch(this.setAxiosResponseError)
   }
+
+  toggleCompleted = id => evt => {
+    axios.patch(`${URL}/${id}`)
+    .then(res => {
+      this.setState({...this.state, todos: this.state.todos.map(td => {
+        if (td.id !== id) return td
+        return res.data.data
+      })})
+    })
+    .catch(err => {
+
+    })
+  }
+  toggleDisplayCompleted = () => {
+    this.setState({...this.state, displayCompleted: this.state.displayCompleted})
+  }
+
+  componentDidMount(){
+  this.fetchAllTodos()
+ }
+
+
+ render() {
+    return (
+
+      <div>
+        <div id="error">Error: {this.state.error}</div>
+          <TodoList 
+          todos={this.state.todos}
+          displayCompleted={this.state.displayCompleted}
+          toggleCompleted={this.toggleCompleted}/>
+          <Form 
+          onTodoFormSubmit={this.onTodoFormSubmit}
+          onNameChange={this.onNameChange}
+          todoNameInput={this.state.todoNameInput}
+          toggleDisplayCompleted={this.toggleDisplayCompleted}
+          displayCompleted={this.state.displayCompleted}/>
+
+      </div>
+    )
+  }
+
 }

frontend/components/Form.js

@@ -2,6 +2,21 @@ import React from 'react'
 
 export default class Form extends React.Component {
   render() {
-    return null
+    return (
+    <div>
+      <form id="todoForm" 
+      onSubmit={this.props.onTodoFormSubmit}>
+          <input value={this.props.todoNameInput} 
+          type="text" 
+          placeholder="type todo" 
+          onchange={this.props.onNameChange} ></input>
+          <input type="submit"></input>
+        </form>
+        <button 
+        onClick={this.props.toggleDisplayCompleted}>
+          {this.props.displayCompleted ? 'Hide': 'Show'}
+          Clear Completed</button>
+    </div>
+    )
   }
 }

frontend/components/Todo.js

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

frontend/components/TodoList.js

@@ -1,7 +1,26 @@
 import React from 'react'
+import Todo from './Todo'
 
 export default class TodoList extends React.Component {
   render() {
-    return null
+    return (
+      <div id="todos">
+            <h2>Todos:</h2>
+            {
+          this.props.todos.reduce((acc, td) => {
+            if (this.props.displayCompleted||
+               !td.completed) return acc.concat
+               (
+                <Todo  
+                key={td.id}
+                toggleCompleted={this.props.toggleCompleted}
+                todo={td}/>
+               )
+            return acc
+          }, [])
+        }
+
+        </div>
+    )
   }
 }