Adding styles to react exercises 2.19.-2.20.

Author: erikpeik

part2/photobook/src/App.js

@@ -19,23 +19,59 @@ const PersonForm = ({addUser, newName, newNumber, setNewName, setNewNumber}) =>
 	</form>
 )
 
-const Persons = ({persons, filter, setPersons}) => {
+const Persons = ({persons, filter, setPersons, setColor, setMessage}) => {
 	const personsFilter = persons.filter(person =>
 		person.name.toLowerCase().includes(filter.toLowerCase())
 	)
 
-	const deleteUser = (person, setPersons) => {
+	const deleteUser = (person, setPersons, setColor, setMessage) => {
 		if (window.confirm(`Delete ${person.name}?`)) {
 			personService
 				.remove(person.id)
-				.then(response => setPersons(persons.filter(p => p.id !== person.id)))
+				.then(response => {
+					setPersons(persons.filter(p => p.id !== person.id))
+					setMessage(`Deleted ${person.name}`)
+					setTimeout(() => { setMessage(null) }, 5000)
+				})
+				.catch(error => {
+					setPersons(persons.filter(p => p.id !== person.id))
+					setColor('red')
+					setMessage(`Information of ${persons.name} has already been removed from server`)
+					setTimeout(() => {
+						setMessage(null)
+						setColor('green')
+					}, 5000)
+				})
 		}
 	}
 
 	return personsFilter.map((person, i) =>
 		<div key={i}>
 			{person.name} {person.number} <button
-			onClick={() => deleteUser(person, setPersons)}>delete</button>
+			onClick={() =>
+			deleteUser(person, setPersons, setColor, setMessage)}>delete</button>
+		</div>
+	)
+}
+
+const Notification = ({message, color}) => {
+	const greenStyle = {
+		color: color,
+		background: 'lightgrey',
+		fontSize: 20,
+		borderStyle: 'solid',
+		borderRadius: 5,
+		padding: 10,
+		marginBottom: 10
+	}
+
+	if (message === null) {
+		return null
+	}
+
+	return (
+		<div style={greenStyle}>
+			{message}
 		</div>
 	)
 }
@@ -45,6 +81,8 @@ const App = () => {
 	const [newName, setNewName] = useState('')
 	const [newNumber, setNewNumber] = useState('')
 	const [filter, setFilter] = useState('')
+	const [message, setMessage] = useState(null)
+	const [color, setColor] = useState('green')
 
 	useEffect(() => {
 		personService
@@ -68,12 +106,27 @@ const App = () => {
 					.update(person.id, changedPerson)
 					.then(response => {
 						setPersons(persons.map(p => p.id !== person.id ? p : response.data))
+						setMessage(`Updated ${newName}`)
+						setTimeout(() => { setMessage(null) }, 5000)
+					})
+					.catch(error => {
+						setPersons(persons.filter(p => p.id !== person.id))
+						setColor('red')
+						setMessage(`Information of ${newName} has already been removed from server`)
+						setTimeout(() => {
+							setMessage(null)
+							setColor('green')
+						}, 5000)
 					})
 			}
 		} else {
 			personService
 				.create(personObject)
-				.then(response => setPersons(persons.concat(response.data)))
+				.then(response => {
+					setPersons(persons.concat(response.data))
+					setMessage(`Added ${newName}`)
+					setTimeout(() => { setMessage(null) }, 5000)
+				})
 		}
 		setNewName('')
 		setNewNumber('')
@@ -83,6 +136,9 @@ const App = () => {
 		<div>
 			<h2>Phonebook</h2>
 
+			<Notification message={message} color={color}
+			setMessage={setMessage} />
+
 			<Filter value={filter} onchange={setFilter} />
 
 			<h3>Add a new</h3>
@@ -95,7 +151,11 @@ const App = () => {
 
 			<h3>Numbers</h3>
 
-			<Persons persons={persons} filter={filter} setPersons={setPersons}/>
+			<Persons
+				persons={persons} filter={filter}
+				setPersons={setPersons} setMessage={setMessage}
+				setColor={setColor}
+				/>
 		</div>
 	)
 }