completed 2.9

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

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>
   );
 };