From c4033a8e28d681f3c038890d70b19a1ee3021fa1 Mon Sep 17 00:00:00 2001
From: Ibrahim Mkusa <ibrahimmkusa@gmail.com>
Date: Wed, 3 May 2023 17:19:50 -0400
Subject: ex2.16 added custom component to display status of phonebook

---
 part2/phonebook/db.json       | 10 ++++++++++
 part2/phonebook/src/App.js    | 16 ++++++++++++++++
 part2/phonebook/src/index.css |  9 +++++++++
 part2/phonebook/src/index.js  | 12 ++++++------
 4 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 part2/phonebook/src/index.css

diff --git a/part2/phonebook/db.json b/part2/phonebook/db.json
index 9e7b167..b631e82 100644
--- a/part2/phonebook/db.json
+++ b/part2/phonebook/db.json
@@ -14,6 +14,16 @@
       "name": "Majaliwa Mtumishi",
       "id": 5,
       "number": "781-598-1070"
+    },
+    {
+      "name": "Jumanne abdulahi",
+      "number": "6078901777",
+      "id": 6
+    },
+    {
+      "name": "Mzee Mkwawa",
+      "number": "0101010178078",
+      "id": 7
     }
   ]
 }
\ No newline at end of file
diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
index 1cc7210..fa46962 100644
--- a/part2/phonebook/src/App.js
+++ b/part2/phonebook/src/App.js
@@ -50,11 +50,24 @@ const Filter = (props) => {
   )
 }
 
+// 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
@@ -75,6 +88,8 @@ const App = () => {
         number: number
       }
       // store new person locally and on the local server
+      setErrorMessage(`Added ${newName}`)
+      setTimeout(() => setErrorMessage('All good'), 5000)
       personService
         .create(newPerson)
         .then(response =>
@@ -96,6 +111,7 @@ const App = () => {
   return (
     <div>
       <h2>Phonebook</h2>
+      <Notification message={errorMessage} />
       <Filter searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
       <h2> add new contact </h2>
       <form onSubmit={addContact}>
diff --git a/part2/phonebook/src/index.css b/part2/phonebook/src/index.css
new file mode 100644
index 0000000..cae3886
--- /dev/null
+++ b/part2/phonebook/src/index.css
@@ -0,0 +1,9 @@
+.error {
+  color: green;
+  font-size: 20px;
+  background: grey;
+  border-style: solid;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
diff --git a/part2/phonebook/src/index.js b/part2/phonebook/src/index.js
index 68a05ff..f3eb11d 100644
--- a/part2/phonebook/src/index.js
+++ b/part2/phonebook/src/index.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
 
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
-    <App />
+  <App />
 )
 
-- 
cgit v1.2.3