import { useState, useEffect } from 'react'
import axios from 'axios'

import Filter from './components/Filter'
import Form from './components/Form'
import Numbers from './components/Numbers'

const App = () => {
  const [filter, setFilter] = useState('')
  const [persons, setPersons] = useState([])

  useEffect(() => axios
      .get('http://localhost:3001/persons')
      .then(response => setPersons(response.data)), []);

  return (
    <div>
      <h1>Phonebook</h1>
      <Filter filter={filter} setFilter={setFilter} />
      <Form persons={persons} setPersons={setPersons} />
      <Numbers persons={persons} filter={filter.toLowerCase()} />
    </div>
  )
}

export default App