Upload 2.10

part2/phonebook/src/App.js

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import PersonForm from "./components/PersonForm";
+import Filter from "./components/Filter";
+import ShowPersons from "./components/ShowPersons";
+
+const App = () => {
+  const [persons, setPersons] = useState([
+    { name: "Arto Hellas", number: "040-123456", id: 1 },
+    { name: "Ada Lovelace", number: "39-44-5323523", id: 2 },
+    { name: "Dan Abramov", number: "12-43-234345", id: 3 },
+    { name: "Mary Poppendieck", number: "39-23-6423122", id: 4 },
+  ]);
+
+  const [newPerson, setNewPerson] = useState({ name: "", number: "" });
+  const [filter, setFilter] = useState("");
+  const [showedPersons, setShowedPersons] = useState(persons);
+
+  const addPerson = (event) => {
+    event.preventDefault();
+    if (persons.find((person) => person.name === newPerson.name)) {
+      alert(`${newPerson.name} is already added to phonebook`);
+      return;
+    }
+    setPersons(persons.concat(newPerson));
+    setShowedPersons(persons.concat(newPerson));
+    setNewPerson({ name: "", number: "" });
+  };
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setNewPerson({ ...newPerson, [name]: value });
+  };
+
+  const filterByName = (event) => {
+    const search = event.target.value;
+    setFilter(search);
+    setShowedPersons(
+      persons.filter((person) => person.name.toLowerCase().includes(search))
+    );
+  };
+
+  return (
+    <div>
+      <h2>Phonebook</h2>
+      <Filter filter={filter} filterByName={filterByName} />
+      <PersonForm
+        addPerson={addPerson}
+        newPerson={newPerson}
+        handleChange={handleChange}
+      />
+      <h2>Numbers</h2>
+      <ShowPersons showedPersons={showedPersons} />
+    </div>
+  );
+};
+export default App;