From fe840d486f466c25604d246b0f676dd81b7dee6e Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sun, 25 May 2025 12:04:02 +0200
Subject: [PATCH] completed 2.9

---
 parts/2/notes.md              |  2 +-
 parts/2/phoneBook/src/App.jsx | 24 ++++++++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/parts/2/notes.md b/parts/2/notes.md
index 3c27c8f..7e0fee8 100644
--- a/parts/2/notes.md
+++ b/parts/2/notes.md
@@ -7,5 +7,5 @@ Exercises:
 * [X] 2.6
 * [X] 2.7
 * [X] 2.8
-* [ ] 2.9
+* [X] 2.9
 * [ ] 2.10
diff --git a/parts/2/phoneBook/src/App.jsx b/parts/2/phoneBook/src/App.jsx
index 16dbd74..a61b6cf 100644
--- a/parts/2/phoneBook/src/App.jsx
+++ b/parts/2/phoneBook/src/App.jsx
@@ -5,6 +5,7 @@ const App = () => {
   const [persons, setPersons] = useState([
     { name: "Arto Hellas", number: 123 },
   ]);
+  const [searchString, setSearchString] = useState("");
   const [newName, setNewName] = useState("");
   const [newNumber, setNewNumber] = useState("");
 
@@ -19,6 +20,9 @@ const App = () => {
       return;
     }
     setPersons(persons.concat({ name: newName, number: newNumber }));
+
+    setNewName("");
+    setNewNumber("");
   };
 
   const handleNameChange = (event) => {
@@ -29,22 +33,34 @@ const App = () => {
     setNewNumber(event.target.value);
   };
 
+  const handleSearchChange = (event) => {
+    setSearchString(event.target.value);
+  };
+
   return (
     <div>
       <h2>Phonebook</h2>
+      <div>
+        search name: <input onChange={handleSearchChange} />
+      </div>
+      <h3>Add new</h3>
       <form onSubmit={handleOnSubmit}>
         <div>
-          name: <input onChange={handleNameChange} />
+          name: <input value={newName} onChange={handleNameChange} />
         </div>
         <div>
-          number: <input onChange={handleNumberChange} />
+          number: <input value={newNumber} onChange={handleNumberChange} />
         </div>
         <div>
           <button type="submit">add</button>
         </div>
       </form>
-      <h2>Numbers</h2>
-      <PersonList persons={persons} />
+      <h3>Numbers</h3>
+      <PersonList
+        persons={persons.filter((person) =>
+          person.name.toUpperCase().includes(searchString.toUpperCase())
+        )}
+      />
     </div>
   );
 };