/* eslint-disable */ import { useEffect, useState } from 'react' import personService from './services/persons' const ShowPerson = (props) => { const searchTerm = props.searchTerm const persons = props.persons const setPersons = props.setPersons const removePerson = (id) => { return () => { if (confirm(`Are you sure you want to delete this contact? `)) { personService .remove(id) .then(response => console.log(response.data)) setPersons(personService.getAll()) } } } if (searchTerm === undefined) { return persons.map((person) => { return (
  • {person.name} {person.number}
  • ) }) } else { if (persons === undefined) { return (

    Nothing found

    ) } const searchedList = persons.filter((person) => { return person.name.includes(props.searchTerm) }); console.log(searchedList) return searchedList.map( (searched) => { return (
  • {searched.name} {searched.number}
  • ) }) } } const Filter = (props) => { return (

    filter shown with props.setSearchTerm(event.target.value)} />

    ) } // create component to display error messages const Notification = ({message}) => { if (message === null) return null return (
    {message}
    ) } const App = () => { const [persons, setPersons] = useState([]) const [newName, setNewName] = useState('') const [number, setPhoneNumber] = useState('') const [searchTerm, setSearchTerm] = useState('') const [errorMessage, setErrorMessage] = useState(`error error error`) useEffect(() => { personService .getAll() .then(response => { setPersons(response.data) }) }) const addContact = (event) => { event.preventDefault() console.log(newName, persons) if (persons.find(person => person.name === newName)) { // eslint-disable-next-line alert(`${newName} is already added to phonebook`) } else { const newPerson = { name: newName, number: number } // store new person locally and on the local server setErrorMessage(`Added ${newName}`) setTimeout(() => setErrorMessage('All good'), 5000) personService .create(newPerson) .then(response => console.log(response)) .catch(error => { console.log(error.response.data.error) setErrorMessage(error.response.data.error) }) setPersons(persons.concat(newPerson)) } } const handleTypedName = (event) => { // console.log(event.target.value) setNewName(event.target.value) // console.log(newName) } const handlePhoneNo = (event) => { setPhoneNumber(event.target.value) } return (

    Phonebook

    add new contact

    name:

    number:

    Numbers

    ) } export default App