diff --git a/part2/phonebook/db.json b/part2/phonebook/db.json index f80f366..82b70a0 100644 --- a/part2/phonebook/db.json +++ b/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" } ] } \ No newline at end of file diff --git a/part2/phonebook/src/App.jsx b/part2/phonebook/src/App.jsx index 2fdd05e..89a9ddc 100644 --- a/part2/phonebook/src/App.jsx +++ b/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 ( -
+
{message}
) @@ -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 (

Phonebook

- +

Add a new

diff --git a/part2/phonebook/src/index.css b/part2/phonebook/src/index.css index f6e6069..e69de29 100644 --- a/part2/phonebook/src/index.css +++ b/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; - } \ No newline at end of file diff --git a/part2/phonebook/src/main.jsx b/part2/phonebook/src/main.jsx index 68b9339..8da6e68 100644 --- a/part2/phonebook/src/main.jsx +++ b/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(