Andrew gary

frontend/components/App.js

@@ -1,10 +1,82 @@
 import React from 'react'
+import Form from './Form';
+import TodoList from './TodoList';
+import axios from 'axios';
 
+const initialState = {
+  toDos: []
+};
 export default class App extends React.Component {
+
+  state = initialState;
+
+  componentDidMount(){
+    axios.get('http://localhost:9000/api/todos')
+    .then(resp => {
+      this.setState({...this.state, 
+        toDos: resp.data.data
+      })
+    })
+    .catch(error => {
+      console.error(error);
+    })
+  }
+
+  clearFinished = () => {
+
+    const filtered = this.state.toDos.filter(item => {
+      return !item.completed;
+    })
+
+    this.setState({...this.state, toDos: filtered})
+  }
+
+  addTodo = (task) => {
+
+    const newTask = {
+      name: task,
+      completed: false
+    }
+
+    axios.post('http://localhost:9000/api/todos', newTask)
+    .then(resp => {
+      const taskToAdd = {...resp.data.data};
+      this.setState({ ...this.state,
+        toDos: [...this.state.toDos, taskToAdd]
+      })
+    })
+    .catch(error => {
+      console.error(error);
+    })
+  }
+
+  handleToggle = (task) => {
+    const id = task.id;
+
+    axios.patch(`http://localhost:9000/api/todos/${id}`)
+    .then(resp => {
+      const newStateArray = this.state.toDos.map(item => {
+        if(item.id === id){
+          return resp.data.data;
+        }else{
+          return item
+        }
+      })
+
+      this.setState({...this.state,
+        toDos: [...newStateArray]
+      })
+    })
+    .catch(error => {
+      console.log(error);
+    })
+  }
+
   render() {
     return (
       <div>
-        Todo App
+        <TodoList toDos={this.state.toDos} handleToggle={this.handleToggle}/>
+        <Form addTodo={this.addTodo} clearFinished={this.clearFinished}/>
       </div>
     )
   }

frontend/components/Form.js

@@ -1,10 +1,33 @@
 import React from 'react'
 
+const initialState = {inputTodo: ''}
 export default class Form extends React.Component {
+
+  state = initialState;
+
+  handleChange = (e) => {
+    this.setState({...this.state,
+    inputTodo: e.target.value})
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.addTodo(this.state.inputTodo)
+  }
+
   render() {
     return (
       <div>
-        Form
+        <form onSubmit={this.handleSubmit}>
+          <input 
+            type='text'
+            name='todo'
+            onChange={this.handleChange}
+            value={this.state.inputTodo}
+          />  
+          <button>Add Todo</button>
+        </form>
+        <button onClick={this.props.clearFinished}>Clear Finished</button>
       </div>
     )
   }

frontend/components/Todo.js

@@ -1,11 +1,23 @@
 import React from 'react'
+import styled from 'styled-components';
 
+const StyledToDo = styled.div`
+  .finished{
+    text-decoration: line-through;
+    color: red;
+  }
+`
 export default class Todo extends React.Component {
+
+  handleClick = () => {
+    this.props.handleToggle(this.props.item);
+  }
+
   render() {
     return (
-      <div>
-        Todo
-      </div>
+      <StyledToDo onClick={this.handleClick} >
+        <p className={this.props.item.completed ? "finished" : ""}>{this.props.item.name}</p>
+      </StyledToDo>
     )
   }
 }

frontend/components/TodoList.js

@@ -1,10 +1,18 @@
 import React from 'react'
-
+import { v4 as uuid } from 'uuid';
+import Todo from './Todo';
 export default class TodoList extends React.Component {
+
   render() {
     return (
       <div>
-        TodoList
+        {this.props.toDos.map(item => (
+          <Todo 
+            item={item}
+            key={uuid()}
+            handleToggle={this.props.handleToggle}
+          />
+        ))}
       </div>
     )
   }