import React from 'react' import ReactDOM from 'react-dom' import axios from 'axios' import { FiXCircle, FiPlusCircle, FiCheckCircle } from 'react-icons/fi' import { BlockPicker } from 'react-color' class Todo extends React.Component { constructor(props) { super(props) this.state = { todos: [], completed: [], input: '', color: '#ff8c70' } this.getTodos = this.getTodos.bind(this) this.addTodo = this.addTodo.bind(this) this.deleteTodo = this.deleteTodo.bind(this) this.handleColorSelect = this.handleColorSelect.bind(this) } componentDidMount() { this.getTodos() } handleChange(e) { this.setState({ input: e.target.value }) } handleSubmit(e) { e.preventDefault() if(this.state.input !== '') { this.addTodo(this.state.input, this.state.color, () => { this.getTodos() this.setState({input: ''}) }) } } addTodo(description, color, callback) { let todo = { description: description, color: color } axios.post('/todos/', todo) .then(results => { callback() }) .catch(err => { console.log('error occurred submitting todo!') }) } markTodoComplete(id) { axios.put(`/todos/complete/${id}`) .then(results => { this.getTodos() }) .catch(err => { console.log('error marking todo complete') }) } markTodoIncomplete(id) { axios.put(`/todos/incomplete/${id}`) .then(this.getTodos()) .catch(err => { console.log('error marking todo incomplete') }) } deleteTodo(id) { axios.delete(`/todos/${id}`) .then(this.getTodos()) .catch(err => { console.log('error deleting todo') }) } handleColorSelect(e) { this.setState({color: e.hex}) } getTodos() { axios.get('/todos/') .then(results => { let todos = results.data.filter(todo => !todo.completed) let completed = results.data.filter(todo => todo.completed) this.setState({todos: todos}, () => { this.setState({completed: completed}) }) }) .catch(err => { console.log('error occurred retrieving todos') }) } render() { return (

TO DO:

{this.state.todos && this.state.todos.map(item => { return (

{this.deleteTodo(item.id)}} /> this.markTodoComplete(item.id)} />

) })}

COMPLETED:

{this.state.completed && this.state.completed.map(item => { return (

{this.deleteTodo(item.id)}} /> this.markTodoIncomplete(item.id)} />

) })}

) } } ReactDOM.render(, document.getElementById('root'))

Beverly Hernandez

rJjCj8dQB