aboutsummaryrefslogtreecommitdiff
path: root/part2
diff options
context:
space:
mode:
authorIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-05-02 22:11:31 -0400
committerIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-05-02 22:12:29 -0400
commitc02f5c6f75a6420cb0a901f1463ed8ebf89e4268 (patch)
tree5f31361b186700514833ace6ed0e9b8026a1a1b3 /part2
parent3469bae0c3c9f68aba48585c1aa92d5781b9bd58 (diff)
ex2.14 add option to delete selected contact. Input validation could be
added
Diffstat (limited to 'part2')
-rw-r--r--part2/phonebook/db.json10
-rw-r--r--part2/phonebook/src/App.js35
-rw-r--r--part2/phonebook/src/services/persons.js6
3 files changed, 32 insertions, 19 deletions
diff --git a/part2/phonebook/db.json b/part2/phonebook/db.json
index f12c730..9e7b167 100644
--- a/part2/phonebook/db.json
+++ b/part2/phonebook/db.json
@@ -1,16 +1,6 @@
{
"persons": [
{
- "name": "Arto Hellas",
- "number": "040-123456",
- "id": 1
- },
- {
- "name": "Ada Lovelace",
- "number": "39-44-5323523",
- "id": 2
- },
- {
"name": "Dan Abramov",
"number": "12-43-234345",
"id": 3
diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
index bbf7fc2..1cc7210 100644
--- a/part2/phonebook/src/App.js
+++ b/part2/phonebook/src/App.js
@@ -1,21 +1,41 @@
-/* eslint no-use-before-define: 0 */ // --> OFF
+/* 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}</li>)
+ return (<li key={person.id}>{person.name} {person.number}
+ <button onClick={removePerson(person.id)} >delete</button></li>)
})
} else {
- const searchedList = persons.filter((person) =>
- { return person.name.includes(props.searchTerm)
- });
+ 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}</li>)
+ return (<li key={searched.id}>{searched.name} {searched.number}
+ <button onClick={removePerson(searched.id)} >delete</button></li>)
})
}
}
@@ -52,7 +72,6 @@ const App = () => {
} else {
const newPerson = {
name: newName,
- id: persons.length + 1, // eslint-disable-next-line
number: number
}
// store new person locally and on the local server
@@ -90,7 +109,7 @@ const App = () => {
</form>
<h2>Numbers</h2>
<ShowPerson
- searchTerm={searchTerm} persons={persons}
+ searchTerm={searchTerm} persons={persons} setPersons={setPersons}
/>
</div>
)
diff --git a/part2/phonebook/src/services/persons.js b/part2/phonebook/src/services/persons.js
index d65f4a3..1da7de4 100644
--- a/part2/phonebook/src/services/persons.js
+++ b/part2/phonebook/src/services/persons.js
@@ -13,4 +13,8 @@ const update = (id, changedPerson) => {
return axios.put(`${baseUrl}/${id}`, changedPerson)
}
-export default { getAll, create, update }
+const remove = (id) => {
+ return axios.delete(`${baseUrl}/${id}`)
+}
+
+export default { getAll, create, update, remove }