phonebook exec 2.16

phonebook/src/App.jsx

 import { useState, useEffect } from 'react'
 import phonebookService from './services/phonebook'
+import './index.css'
 
 const App = () => {
   const [persons, setPersons] = useState([])
   const [newName, setNewName] = useState('')
   const [newNumber, setNewNumber] = useState('')
+  const [message, setMessage] = useState('')
 
   useEffect(() => {
     phonebookService.getAll().then(initialPhonebook => {
@@ -27,6 +29,8 @@ const App = () => {
         setPersons(persons.concat(addedPerson))
         setNewName('')
         setNewNumber('')
+        setMessage(`${addedPerson.name} added`)
+        setTimeout(() => {setMessage(null)}, 3000)
     })
     .catch(error => {
       console.error("Error adding person:", error)
@@ -63,7 +67,8 @@ const App = () => {
 
   return (
     <div>
-      <h2>Phonebook</h2>
+      <h1>Phonebook</h1>
+      <Notification message={message} />
       <PersonForm 
         addPerson={addPerson} 
         newName={newName}
@@ -111,4 +116,16 @@ const Person = (props) =>{
   )
 }
 
+const Notification = ({ message }) => {
+  if (message == null) {
+    return null
+  }
+
+  return (
+    <div className='message'>
+      {message}
+    </div>
+  )
+}
+
 export default App
\ No newline at end of file

phonebook/src/index.css

+.message {
+    color: green;
+    background: lightgrey;
+    font-size: 20px;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
\ No newline at end of file

phonebook/src/main.jsx

 import ReactDOM from 'react-dom/client'
 import App from './App'
+//import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
\ No newline at end of file