Refactor phonebook database and add new contact and update contact de…

…tails

part2/phonebook/db.json

@@ -19,6 +19,16 @@
       "name": "Mary Poppendieck",
       "number": "39-23-6423122",
       "id": "4"
+    },
+    {
+      "id": "1352",
+      "name": "rashmika1",
+      "number": "122"
+    },
+    {
+      "id": "c680",
+      "name": "rashmika1",
+      "number": "444"
     }
   ]
 }

part2/phonebook/src/App.jsx

@@ -6,13 +6,22 @@ import personService from './services/persons'
 import axios from 'axios'
 
 
-const Notification = ({ message }) => {
+const Notification = ( {message,givencolor} ) => {
   if (message === null || message=== '') {
     return null
   }
+  const notificationStyle={
+    color: givencolor,
+    background: 'lightgrey',
+    fontSize: 20,
+    borderStyle: 'solid',
+    borderRadius: 5,
+    padding: 10,
+    marginBottom: 10,
+  }
 
   return (
-    <div className='error'>
+    <div className='error' style={notificationStyle}>
       {message}
     </div>
   )
@@ -24,6 +33,7 @@ const App = () => {
   const [newName, setNewName] = useState('')
   const [newNumber, setNumber] = useState("")
   const [errorMessage, setErrorMessage] = useState('')
+  const [errorColor, setColor] = useState('green')
 
   useEffect(() => {
     personService
@@ -133,12 +143,16 @@ const DeletePersonFromArray=(id)=>{
         })
 
         .catch(error => {
+          //setColor('red')
           setErrorMessage(
             `infromation of ${newName} has already removed from server`
           )
+          setColor('red')
           setTimeout(() => {
             setErrorMessage(null)
           }, 5000)
+
+
 
         })
 
@@ -190,7 +204,7 @@ const DeletePersonFromArray=(id)=>{
   return (
     <div>
       <h2>Phonebook</h2>
-      <Notification message={errorMessage} />
+      <Notification message={errorMessage} givencolor={errorColor} />
       <Filter/>
       <form onSubmit={addPerson}>
       <h2>Add a new</h2>

part2/phonebook/src/index.css

@@ -1,9 +0,0 @@
-.error {
-    color: green;
-    background: lightgrey;
-    font-size: 20px;
-    border-style: solid;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
-  }

part2/phonebook/src/main.jsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
-import './index.css'
+
 
 
 createRoot(document.getElementById('root')).render(