From eb51de2c593e80d954f04a5a69628a22ebf5c605 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
 <122124249+zuzmoskvic@users.noreply.github.com>
Date: Wed, 23 Jul 2025 16:43:49 +0200
Subject: [PATCH 01/10] Iteration 1

---
 src/App.js                     | 28 ++++++----------------------
 src/components/ProductRow.js   |  8 ++++++++
 src/components/ProductTable.js | 10 ++++++++++
 src/components/ProductsPage.js | 11 +++++++++++
 src/components/SearchBar.js    |  8 ++++++++
 5 files changed, 43 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ProductRow.js
 create mode 100644 src/components/ProductTable.js
 create mode 100644 src/components/ProductsPage.js
 create mode 100644 src/components/SearchBar.js

diff --git a/src/App.js b/src/App.js
index 378457572..df89ecd78 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,9 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import ProductsPage from "./components/ProductsPage";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <div className="App">
+    <ProductsPage/>
+  </div>;
 }
-
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
new file mode 100644
index 000000000..3cdb6d072
--- /dev/null
+++ b/src/components/ProductRow.js
@@ -0,0 +1,8 @@
+import "../App.css";
+
+function ProductRow() {
+  return <div className="ProductRow">
+    <p>ProductRow</p>
+  </div>;
+}
+export default ProductRow;
\ No newline at end of file
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
new file mode 100644
index 000000000..c3b8d34cf
--- /dev/null
+++ b/src/components/ProductTable.js
@@ -0,0 +1,10 @@
+import "../App.css";
+import ProductRow from "./ProductRow";
+
+function ProductTable() {
+  return <div className="ProductTable">
+    <p>ProductTable:</p>
+    <ProductRow/>
+  </div>;
+}
+export default ProductTable;
\ No newline at end of file
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
new file mode 100644
index 000000000..81fd17c25
--- /dev/null
+++ b/src/components/ProductsPage.js
@@ -0,0 +1,11 @@
+import "../App.css";
+import ProductTable from "./ProductTable";
+import SearchBar from "./SearchBar";
+
+function ProductsPage() {
+  return <div className="ProductsPage">
+    <SearchBar/>
+    <ProductTable/>
+  </div>;
+}
+export default ProductsPage;
\ No newline at end of file
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 000000000..83d622e9f
--- /dev/null
+++ b/src/components/SearchBar.js
@@ -0,0 +1,8 @@
+import "../App.css";
+
+function SearchBar() {
+  return <div className="SearchBar">
+    <p>SearchBar</p>
+  </div>;
+}
+export default SearchBar;
\ No newline at end of file

From 02d6dbb56fd3edc90fe825b0475b742cdcd6cd0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
 <122124249+zuzmoskvic@users.noreply.github.com>
Date: Wed, 23 Jul 2025 17:38:34 +0200
Subject: [PATCH 02/10] Test change

---
 src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.js b/src/App.js
index df89ecd78..e01e8b18f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import ProductsPage from "./components/ProductsPage";
 function App() {
   return <div className="App">
     <ProductsPage/>
+    <p>Test change</p>
   </div>;
 }
 export default App;
\ No newline at end of file

From 99c662d0d919ec43fc15d817fa62a8cbe8579bc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
 <122124249+zuzmoskvic@users.noreply.github.com>
Date: Wed, 23 Jul 2025 17:55:02 +0200
Subject: [PATCH 03/10] Iteration 2

---
 src/components/ProductRow.js   | 3 ++-
 src/components/ProductTable.js | 7 ++++++-
 src/components/ProductsPage.js | 8 +++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
index 3cdb6d072..50f6bbb51 100644
--- a/src/components/ProductRow.js
+++ b/src/components/ProductRow.js
@@ -1,8 +1,9 @@
 import "../App.css";
 
-function ProductRow() {
+function ProductRow({oneProduct}) {
   return <div className="ProductRow">
     <p>ProductRow</p>
+    <p>{oneProduct.name}</p>
   </div>;
 }
 export default ProductRow;
\ No newline at end of file
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
index c3b8d34cf..441c55b54 100644
--- a/src/components/ProductTable.js
+++ b/src/components/ProductTable.js
@@ -1,10 +1,15 @@
 import "../App.css";
 import ProductRow from "./ProductRow";
+import jsonData from "../data.json";
 
 function ProductTable() {
   return <div className="ProductTable">
     <p>ProductTable:</p>
-    <ProductRow/>
+    {jsonData.map((product) => {
+      return <ProductRow oneProduct={product}/>
+    }
+
+    )}
   </div>;
 }
 export default ProductTable;
\ No newline at end of file
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
index 81fd17c25..46f4ca4a6 100644
--- a/src/components/ProductsPage.js
+++ b/src/components/ProductsPage.js
@@ -1,11 +1,17 @@
 import "../App.css";
 import ProductTable from "./ProductTable";
 import SearchBar from "./SearchBar";
+import { useState } from 'react';
+import jsonData from '../data.json';
+
 
 function ProductsPage() {
+  const [products, setProducts] = useState(jsonData);
+
   return <div className="ProductsPage">
+    <p>ProductsPage</p>
     <SearchBar/>
-    <ProductTable/>
+    <ProductTable products={products}/>
   </div>;
 }
 export default ProductsPage;
\ No newline at end of file

From 102b2b782fcfc969e87b2bcb9cc416d3c8aa69d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
 <122124249+zuzmoskvic@users.noreply.github.com>
Date: Wed, 23 Jul 2025 21:15:22 +0200
Subject: [PATCH 04/10] Iteration 3

---
 src/App.css                    | 46 ++++++++++++----------------------
 src/App.js                     | 16 +++++++-----
 src/components/ProductRow.js   | 13 +++++++---
 src/components/ProductTable.js | 16 ++++++++----
 src/components/ProductsPage.js | 16 ++++++------
 5 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/App.css b/src/App.css
index 74b5e0534..3734058a8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,24 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App{
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.ProductTable{
+  width: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;  
+
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+thead,tr,th,td{
+  text-align: center;
+  padding: 10px;
+  width: 50%;
+  border: 1px solid black;
 }
+
+thead{
+  background-color: gray;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index e01e8b18f..0c22d10aa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,14 @@
-import "./App.css";
+import './App.css';
 import ProductsPage from "./components/ProductsPage";
 
 function App() {
-  return <div className="App">
-    <ProductsPage/>
-    <p>Test change</p>
-  </div>;
+  return (
+    <div className="App">
+      <header className="App-header">
+        <ProductsPage/>
+      </header>
+    </div>
+  );
 }
-export default App;
\ No newline at end of file
+
+export default App;
diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
index 50f6bbb51..14fd5de1a 100644
--- a/src/components/ProductRow.js
+++ b/src/components/ProductRow.js
@@ -1,9 +1,14 @@
 import "../App.css";
 
 function ProductRow({oneProduct}) {
-  return <div className="ProductRow">
-    <p>ProductRow</p>
-    <p>{oneProduct.name}</p>
-  </div>;
+  return <>
+
+    <tr>
+        <td>{oneProduct.name}</td>
+        <td>{oneProduct.price}</td>
+      </tr>
+
+
+  </>;
 }
 export default ProductRow;
\ No newline at end of file
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
index 441c55b54..8f4807aa3 100644
--- a/src/components/ProductTable.js
+++ b/src/components/ProductTable.js
@@ -1,15 +1,21 @@
 import "../App.css";
 import ProductRow from "./ProductRow";
-import jsonData from "../data.json";
+import jsonData from "./../data.json"
 
-function ProductTable() {
+function ProductTable(products) {
   return <div className="ProductTable">
-    <p>ProductTable:</p>
-    {jsonData.map((product) => {
+  <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+    { jsonData.map((product) =>{
       return <ProductRow oneProduct={product}/>
     }
-
     )}
+    </table>
   </div>;
 }
 export default ProductTable;
\ No newline at end of file
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
index 46f4ca4a6..907d7656e 100644
--- a/src/components/ProductsPage.js
+++ b/src/components/ProductsPage.js
@@ -1,17 +1,17 @@
 import "../App.css";
 import ProductTable from "./ProductTable";
 import SearchBar from "./SearchBar";
-import { useState } from 'react';
-import jsonData from '../data.json';
-
+import { useState } from "react";
+import jsonData from "../data.json";
 
 function ProductsPage() {
-  const [products, setProducts] = useState(jsonData);
+  const [products, setProducts]= useState(jsonData);
 
   return <div className="ProductsPage">
-    <p>ProductsPage</p>
     <SearchBar/>
-    <ProductTable products={products}/>
-  </div>;
+    <ProductTable />
+  </div>
 }
-export default ProductsPage;
\ No newline at end of file
+export default ProductsPage;
+
+

From f9d7b6377257e61be1da4d16fc6297f95b9e6c2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
 <122124249+zuzmoskvic@users.noreply.github.com>
Date: Wed, 23 Jul 2025 21:17:38 +0200
Subject: [PATCH 05/10] Test commit

---
 src/components/ProductRow.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
index 14fd5de1a..01fa813c9 100644
--- a/src/components/ProductRow.js
+++ b/src/components/ProductRow.js
@@ -8,7 +8,7 @@ function ProductRow({oneProduct}) {
         <td>{oneProduct.price}</td>
       </tr>
 
-
-  </>;
+{/* Test commit */}
+  </>
 }
 export default ProductRow;
\ No newline at end of file

From bd8ac5c57ba553a0f2c6cddbc8b2e2a8716a8f2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?= <zuzana.moskvic@gmail.com>
Date: Wed, 23 Jul 2025 21:22:07 +0200
Subject: [PATCH 06/10] Test commit 2

---
 src/components/ProductRow.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
index 01fa813c9..8b7163013 100644
--- a/src/components/ProductRow.js
+++ b/src/components/ProductRow.js
@@ -8,7 +8,7 @@ function ProductRow({oneProduct}) {
         <td>{oneProduct.price}</td>
       </tr>
 
-{/* Test commit */}
+{/* Test commit  2 */}
   </>
 }
 export default ProductRow;
\ No newline at end of file

From 772c98956281bab374650821ab819fe00f54691a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?= <zuzana.moskvic@gmail.com>
Date: Sun, 27 Jul 2025 11:16:14 +0200
Subject: [PATCH 07/10] Iteration 3

---
 src/components/ProductRow.js   | 19 +++++++++++--------
 src/components/ProductTable.js | 14 ++++++--------
 src/components/ProductsPage.js |  2 +-
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
index 8b7163013..86cab7b49 100644
--- a/src/components/ProductRow.js
+++ b/src/components/ProductRow.js
@@ -1,14 +1,17 @@
 import "../App.css";
 
-function ProductRow({oneProduct}) {
+function ProductRow({products}) {
   return <>
-
-    <tr>
-        <td>{oneProduct.name}</td>
-        <td>{oneProduct.price}</td>
-      </tr>
-
-{/* Test commit  2 */}
+    {products.map((product) =>{
+        return (
+          <tr>
+            <td style={{color: product.inStock ? "black" : "red"}}>
+            {product.name}</td>
+            <td>{product.price}</td>
+          </tr>
+          )
+    }
+    )}
   </>
 }
 export default ProductRow;
\ No newline at end of file
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
index 8f4807aa3..fba372012 100644
--- a/src/components/ProductTable.js
+++ b/src/components/ProductTable.js
@@ -2,19 +2,17 @@ import "../App.css";
 import ProductRow from "./ProductRow";
 import jsonData from "./../data.json"
 
-function ProductTable(products) {
+function ProductTable() {
+  const products = jsonData;
   return <div className="ProductTable">
-  <table>
-      <thead>
+    <table>
         <tr>
           <th>Name</th>
           <th>Price</th>
         </tr>
-      </thead>
-    { jsonData.map((product) =>{
-      return <ProductRow oneProduct={product}/>
-    }
-    )}
+
+        <ProductRow products={products}/>
+
     </table>
   </div>;
 }
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
index 907d7656e..ae95d93eb 100644
--- a/src/components/ProductsPage.js
+++ b/src/components/ProductsPage.js
@@ -8,7 +8,7 @@ function ProductsPage() {
   const [products, setProducts]= useState(jsonData);
 
   return <div className="ProductsPage">
-    <SearchBar/>
+    {/* <SearchBar/> */}
     <ProductTable />
   </div>
 }

From 6e8b08f8baaaae66ac4cd0e1041a6354d341c67e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?= <zuzana.moskvic@gmail.com>
Date: Sun, 27 Jul 2025 15:59:25 +0200
Subject: [PATCH 08/10] Iteration 4

---
 src/components/ProductRow.js   | 19 ++++++-------------
 src/components/ProductTable.js | 12 ++++++++----
 src/components/ProductsPage.js |  5 +++--
 src/components/SearchBar.js    | 10 +++++++---
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
index 86cab7b49..01c84738c 100644
--- a/src/components/ProductRow.js
+++ b/src/components/ProductRow.js
@@ -1,17 +1,10 @@
-import "../App.css";
-
-function ProductRow({products}) {
+function ProductRow({product}) {
   return <>
-    {products.map((product) =>{
-        return (
-          <tr>
-            <td style={{color: product.inStock ? "black" : "red"}}>
-            {product.name}</td>
-            <td>{product.price}</td>
-          </tr>
-          )
-    }
-    )}
+    <tr>
+        <td>{product.name}</td>
+        <td style={ (product.inStock) ? {color: 'black'} : {color: 'red'}}>{product.name}</td>
+        <td>{product.price}</td>
+    </tr>
   </>
 }
 export default ProductRow;
\ No newline at end of file
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
index fba372012..21a00b637 100644
--- a/src/components/ProductTable.js
+++ b/src/components/ProductTable.js
@@ -1,9 +1,8 @@
 import "../App.css";
 import ProductRow from "./ProductRow";
-import jsonData from "./../data.json"
 
-function ProductTable() {
-  const products = jsonData;
+function ProductTable({products, searchValue}) {
+  
   return <div className="ProductTable">
     <table>
         <tr>
@@ -11,7 +10,12 @@ function ProductTable() {
           <th>Price</th>
         </tr>
 
-        <ProductRow products={products}/>
+      {/* // Filter products for the searchValue and then map them them and ensure they are shown in the ProductRow */}
+        {products
+          .filter((product)=> product.name.toLowerCase().includes(searchValue.toLowerCase()))
+          .map((product)=><ProductRow product={product}/>)
+
+        }
 
     </table>
   </div>;
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
index ae95d93eb..64fbedaa6 100644
--- a/src/components/ProductsPage.js
+++ b/src/components/ProductsPage.js
@@ -6,10 +6,11 @@ import jsonData from "../data.json";
 
 function ProductsPage() {
   const [products, setProducts]= useState(jsonData);
+  const [searchValue, setSearchValue] = useState("");
 
   return <div className="ProductsPage">
-    {/* <SearchBar/> */}
-    <ProductTable />
+    <SearchBar products={products} setProducts={setProducts} searchValue={searchValue} setSearchValue={setSearchValue} />
+    <ProductTable products={products} searchValue={searchValue}/>
   </div>
 }
 export default ProductsPage;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 83d622e9f..32c408479 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -1,8 +1,12 @@
-import "../App.css";
+function SearchBar({products, searchValue, setSearchValue}) {
+
+  const searchValueHandler = (e) => {
+    return setSearchValue(e.target.value);
+  };
 
-function SearchBar() {
   return <div className="SearchBar">
-    <p>SearchBar</p>
+    <label>Search: </label>
+    <input type="text" name="search" value={searchValue} onChange={searchValueHandler}/>
   </div>;
 }
 export default SearchBar;
\ No newline at end of file

From 18b37c05053f10d354d2ce99ed062f9d4ef43f78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?= <zuzana.moskvic@gmail.com>
Date: Sun, 27 Jul 2025 16:20:56 +0200
Subject: [PATCH 09/10] =?UTF-8?q?Iterations=201=E2=80=934?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProductRow.js   | 14 +++++++-------
 src/components/ProductTable.js | 30 +++++++++++++-----------------
 src/components/ProductsPage.js | 20 ++++++++------------
 src/components/SearchBar.js    | 16 ++++++----------
 4 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
index 01c84738c..a16183070 100644
--- a/src/components/ProductRow.js
+++ b/src/components/ProductRow.js
@@ -1,10 +1,10 @@
 function ProductRow({product}) {
-  return <>
-    <tr>
-        <td>{product.name}</td>
-        <td style={ (product.inStock) ? {color: 'black'} : {color: 'red'}}>{product.name}</td>
-        <td>{product.price}</td>
-    </tr>
-  </>
+    return <>
+        <tr>
+            <td>{product.name}</td>
+            <td>{product.price}</td>
+        </tr>
+    </>
 }
+
 export default ProductRow;
\ No newline at end of file
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
index 21a00b637..8cff60b26 100644
--- a/src/components/ProductTable.js
+++ b/src/components/ProductTable.js
@@ -1,23 +1,19 @@
-import "../App.css";
 import ProductRow from "./ProductRow";
 
 function ProductTable({products, searchValue}) {
-  
-  return <div className="ProductTable">
-    <table>
-        <tr>
-          <th>Name</th>
-          <th>Price</th>
-        </tr>
+    return <div>
+        <table>
+            <thead>
+                <th>Name</th>
+                <th>Price</th>
+            </thead>
+    
+            {products
+                .filter((product)=>product.name.toLowerCase().includes(searchValue.toLowerCase()))
+                .map((product)=> <ProductRow product={product}/>)}
 
-      {/* // Filter products for the searchValue and then map them them and ensure they are shown in the ProductRow */}
-        {products
-          .filter((product)=> product.name.toLowerCase().includes(searchValue.toLowerCase()))
-          .map((product)=><ProductRow product={product}/>)
-
-        }
-
-    </table>
-  </div>;
+        </table>
+    </div>
 }
+
 export default ProductTable;
\ No newline at end of file
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
index 64fbedaa6..0442f488b 100644
--- a/src/components/ProductsPage.js
+++ b/src/components/ProductsPage.js
@@ -1,18 +1,14 @@
-import "../App.css";
-import ProductTable from "./ProductTable";
 import SearchBar from "./SearchBar";
+import ProductTable from "./ProductTable";
+import products from "../data.json"
 import { useState } from "react";
-import jsonData from "../data.json";
 
 function ProductsPage() {
-  const [products, setProducts]= useState(jsonData);
-  const [searchValue, setSearchValue] = useState("");
-
-  return <div className="ProductsPage">
-    <SearchBar products={products} setProducts={setProducts} searchValue={searchValue} setSearchValue={setSearchValue} />
-    <ProductTable products={products} searchValue={searchValue}/>
-  </div>
+    const [searchValue, setSearchValue] = useState("");
+    return <div>
+        <SearchBar searchValue={searchValue} setSearchValue={setSearchValue}/>
+        <ProductTable products={products} searchValue={searchValue}/>
+    </div>
 }
-export default ProductsPage;
-
 
+export default ProductsPage;
\ No newline at end of file
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 32c408479..625a53ec2 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -1,12 +1,8 @@
-function SearchBar({products, searchValue, setSearchValue}) {
-
-  const searchValueHandler = (e) => {
-    return setSearchValue(e.target.value);
-  };
-
-  return <div className="SearchBar">
-    <label>Search: </label>
-    <input type="text" name="search" value={searchValue} onChange={searchValueHandler}/>
-  </div>;
+function SearchBar({searchValue, setSearchValue}) {
+    const valueHandler=(e)=>{setSearchValue(e.target.value)};
+    return <div>
+        <input value={searchValue} type="text" onChange={valueHandler}></input>
+    </div>
 }
+
 export default SearchBar;
\ No newline at end of file

From 54bca9a7cf46d80c9b0b4260dc474899eede1d52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?= <zuzana.moskvic@gmail.com>
Date: Sun, 27 Jul 2025 16:38:14 +0200
Subject: [PATCH 10/10] Iteration 5

---
 src/components/ProductTable.js |  3 ++-
 src/components/ProductsPage.js |  6 ++++--
 src/components/SearchBar.js    | 12 +++++++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
index 8cff60b26..4c132d93f 100644
--- a/src/components/ProductTable.js
+++ b/src/components/ProductTable.js
@@ -1,6 +1,6 @@
 import ProductRow from "./ProductRow";
 
-function ProductTable({products, searchValue}) {
+function ProductTable({products, searchValue, onlyShowInStock}) {
     return <div>
         <table>
             <thead>
@@ -10,6 +10,7 @@ function ProductTable({products, searchValue}) {
     
             {products
                 .filter((product)=>product.name.toLowerCase().includes(searchValue.toLowerCase()))
+                .filter((product)=>onlyShowInStock ? product.inStock : true )
                 .map((product)=> <ProductRow product={product}/>)}
 
         </table>
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
index 0442f488b..daae083f2 100644
--- a/src/components/ProductsPage.js
+++ b/src/components/ProductsPage.js
@@ -5,9 +5,11 @@ import { useState } from "react";
 
 function ProductsPage() {
     const [searchValue, setSearchValue] = useState("");
+    const [onlyShowInStock, setOnlyShowInStock] = useState(false);
+
     return <div>
-        <SearchBar searchValue={searchValue} setSearchValue={setSearchValue}/>
-        <ProductTable products={products} searchValue={searchValue}/>
+        <SearchBar searchValue={searchValue} setSearchValue={setSearchValue} onlyShowInStock={onlyShowInStock} setOnlyShowInStock={setOnlyShowInStock}/>
+        <ProductTable products={products} searchValue={searchValue} onlyShowInStock={onlyShowInStock}/>
     </div>
 }
 
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 625a53ec2..af8b42798 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -1,7 +1,13 @@
-function SearchBar({searchValue, setSearchValue}) {
-    const valueHandler=(e)=>{setSearchValue(e.target.value)};
+function SearchBar({searchValue, setSearchValue, onlyShowInStock, setOnlyShowInStock}) {
+    const searchValueHandler=(e)=>{setSearchValue(e.target.value)};
+    const checkboxValueHandler=()=>{setOnlyShowInStock(!onlyShowInStock)};
+
     return <div>
-        <input value={searchValue} type="text" onChange={valueHandler}></input>
+        <label>Search: </label>
+        <input value={searchValue} type="text" onChange={searchValueHandler}></input>
+
+        <label>Only show items in stock? </label>
+        <input value={onlyShowInStock} type="checkbox" onChange={checkboxValueHandler}/>
     </div>
 }