App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route  } from 'react-router-dom';
import Header from './components/Header';
import Todos from './components/Todos';
import AddTodo from './components/AddTodo';
import About from './components/pages/About';
// import { v4 as uuidv4 } from 'uuid';
import axios from 'axios';

import './App.css';

// This is the main app component
class App extends Component {
  //Todos will no longer be hard coded since we will make use of Axios
  // Only need an empty array
    state = {
      todos: []
    };
    
    componentDidMount() {
      axios
      .get('https://cors-anywhere.herokuapp.com/https://jsonplaceholder.typicode.com/todos?_limit=15')
      .then(res => this.setState({ todos: res.data}));
      
    }

    // Toggle complete
    markComplete = (id) =>  {
      this.setState({todos: this.state.todos.map(todo =>{
        if(todo.id === id){
          todo.completed = !todo.completed;
        }
        return todo;
      }) 
    });
    };
  

// Delete todo
    delTodo = id => {
      axios.delete (`https://jsonplaceholder.typicode.com/todos/${id}`)
// Use filter metehod (high order array method) 
// ... is the spread operator that will copy what is there
        .then(res => this.setState({ todos: [...this.state.todos.filter(todo => todo.id !== id)] 
        })
      );
    };


// Add Todo
    addTodo = (title) => {
      axios.post('https://jsonplaceholder.typicode.com/todos', {
     
        title,
        completed: false
      })

      .then(res => this.setState({ todos: [...this.state.todos, res.data] }));
    
    }

    render() {
    return (
      <Router>
         <div className="App">
            <div className="container">
           <Header/>
           <Route path = "/" render= {props => (
            <React.Fragment>
                <AddTodo addTodo = {this.addTodo} />
                <Todos todos = {this.state.todos} markComplete= {this.markComplete} delTodo={this.delTodo}/>
            </React.Fragment>
           )}/>
           <Route path= "/about" component = {About} />
          </div> 
        </div>
      </Router>
   );
 }
}

export default App;