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;

part2/phonebook/src/components/Filter.js

@@ -0,0 +1,9 @@
+const Filter = ({ filter, filterByName }) => {
+  return (
+    <p>
+      filter shown with <input value={filter} onChange={filterByName} />
+    </p>
+  );
+};
+
+export default Filter;

part2/phonebook/src/components/Person.js

@@ -0,0 +1,9 @@
+const Person = ({ person }) => {
+  return (
+    <div>
+      {person.name} {person.number}
+    </div>
+  );
+};
+
+export default Person;

part2/phonebook/src/components/PersonForm.js

@@ -0,0 +1,19 @@
+const PersonForm = ({ addPerson, newPerson, handleChange }) => {
+  return (
+    <form onSubmit={addPerson}>
+      <div>
+        name:{" "}
+        <input name="name" value={newPerson.name} onChange={handleChange} />
+      </div>
+      <div>
+        number:{" "}
+        <input name="number" value={newPerson.number} onChange={handleChange} />
+      </div>
+      <div>
+        <button type="submit">add</button>
+      </div>
+    </form>
+  );
+};
+
+export default PersonForm;

part2/phonebook/src/components/ShowPersons.js

@@ -0,0 +1,13 @@
+import Person from "./Person";
+
+const ShowPersons = ({ showedPersons }) => {
+  return (
+    <div>
+      {showedPersons.map((person) => (
+        <Person key={person.name} person={person} />
+      ))}
+    </div>
+  );
+};
+
+export default ShowPersons;

part2/phonebook/src/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

part2/phonebook/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';