From fd47e32489a44a59438d6f86ae36b19373ccea94 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sun, 25 May 2025 12:11:55 +0200
Subject: [PATCH] refactored into componenets, completed 2.1

---
 parts/2/phoneBook/src/App.jsx | 42 ++++++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/parts/2/phoneBook/src/App.jsx b/parts/2/phoneBook/src/App.jsx
index 858c1f6..f9f0b4c 100644
--- a/parts/2/phoneBook/src/App.jsx
+++ b/parts/2/phoneBook/src/App.jsx
@@ -9,6 +9,30 @@ const SearchArea = ({ onChangeHandler }) => {
   );
 };
 
+const AddPersonForm = ({
+  onSubmitHandler,
+  onNameChangeHandler,
+  nameValue,
+  onNumberChangeHandler,
+  numberValue,
+}) => {
+  return (
+    <>
+      <form onSubmit={onSubmitHandler}>
+        <div>
+          name: <input value={nameValue} onChange={onNameChangeHandler} />
+        </div>
+        <div>
+          number: <input value={numberValue} onChange={onNumberChangeHandler} />
+        </div>
+        <div>
+          <button type="submit">add</button>
+        </div>
+      </form>
+    </>
+  );
+};
+
 const App = () => {
   const [persons, setPersons] = useState([
     { name: "Arto Hellas", number: 123 },
@@ -50,17 +74,13 @@ const App = () => {
       <h2>Phonebook</h2>
       <SearchArea onChangeHandler={handleSearchChange} />
       <h3>Add new</h3>
-      <form onSubmit={handleOnSubmit}>
-        <div>
-          name: <input value={newName} onChange={handleNameChange} />
-        </div>
-        <div>
-          number: <input value={newNumber} onChange={handleNumberChange} />
-        </div>
-        <div>
-          <button type="submit">add</button>
-        </div>
-      </form>
+      <AddPersonForm
+        onSubmitHandler={handleOnSubmit}
+        onNameChangeHandler={handleNameChange}
+        nameValue={newName}
+        onNumberChangeHandler={handleNumberChange}
+        numberValue={newNumber}
+      />
       <h3>Numbers</h3>
       <PersonList
         persons={persons.filter((person) =>