blob: fa46962d7d74a917f62b698a42c15972501e05b6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
/* 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 (<li key={person.id}>{person.name} {person.number}
<button onClick={removePerson(person.id)} >delete</button></li>)
})
} else {
if (persons === undefined) {
return (<p> Nothing found </p>)
}
const searchedList = persons.filter((person) =>
{ return person.name.includes(props.searchTerm)
});
console.log(searchedList)
return searchedList.map( (searched) => {
return (<li key={searched.id}>{searched.name} {searched.number}
<button onClick={removePerson(searched.id)} >delete</button></li>)
})
}
}
const Filter = (props) => {
return (
<p>filter shown with <input
value={props.searchTerm} onChange={(event) =>
props.setSearchTerm(event.target.value)}
/>
</p>
)
}
// create component to display error messages
const Notification = ({message}) => {
if (message === null)
return null
return (
<div className='error'>
{message}
</div>
)
}
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))
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 (
<div>
<h2>Phonebook</h2>
<Notification message={errorMessage} />
<Filter searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
<h2> add new contact </h2>
<form onSubmit={addContact}>
<div>
<p>name: <input value={newName} onChange={handleTypedName} /></p>
<p>number: <input value={number} onChange={handlePhoneNo} /></p>
</div>
<div>
<button type='submit'>add</button>
</div>
</form>
<h2>Numbers</h2>
<ShowPerson
searchTerm={searchTerm} persons={persons} setPersons={setPersons}
/>
</div>
)
}
export default App
|
