From bf17d04b1a631d529ff0a9281e1c1549a55a274c Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 11:08:00 +0000 Subject: [PATCH 1/8] Clean the App.js component --- src/App.js | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/src/App.js b/src/App.js index 3784575..1f86946 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,14 @@ -import logo from './logo.svg'; -import './App.css'; + +// src/App.js + +import "./App.css"; + + function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); + +return
; + } -export default App; +export default App; From 5ebf802d2ed178fe6d4f7e6d42cce8e52e25ed2e Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 11:18:01 +0000 Subject: [PATCH 2/8] complete ProductsPage --- src/App.js | 9 ++++++--- src/components/ProductsPage.js | 26 ++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 src/components/ProductsPage.js diff --git a/src/App.js b/src/App.js index 1f86946..7d47767 100644 --- a/src/App.js +++ b/src/App.js @@ -3,12 +3,15 @@ import "./App.css"; - +import ProductsPage from './components/ProductsPage'; function App() { -return
; - + return ( +
+ +
+ ); } export default App; diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js new file mode 100644 index 0000000..89e03c9 --- /dev/null +++ b/src/components/ProductsPage.js @@ -0,0 +1,26 @@ + +// src/components/ProductsPage.js + + + +import { useState } from 'react'; + +import jsonData from './../../data.json'; + + + +function ProductsPage () { + +const [products, setProducts] = useState(jsonData); + +return( + +
+ +

Root Store

+ +
+ +) + +} From 4ff5c64a65f0028da941ab85265a68df15c4172d Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 11:29:58 +0000 Subject: [PATCH 3/8] correct ProductsPage.js and App.js --- src/components/ProductsPage.js | 34 +++++++++++----------------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js index 89e03c9..b43a886 100644 --- a/src/components/ProductsPage.js +++ b/src/components/ProductsPage.js @@ -1,26 +1,14 @@ +import { useState } from "react"; +import jsonData from "../data.json"; -// src/components/ProductsPage.js - - - -import { useState } from 'react'; - -import jsonData from './../../data.json'; - - - -function ProductsPage () { - -const [products, setProducts] = useState(jsonData); - -return( - -
- -

Root Store

- -
- -) +function ProductsPage() { + const [products, setProducts] = useState(jsonData); + return ( +
+

Root Store

+
+ ); } + +export default ProductsPage; From b51bd19e72fc09ce890632a14e424cbdee416ec5 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 11:35:55 +0000 Subject: [PATCH 4/8] complete SearchBar.js and ProductTable.js --- src/components/ProductTable.js | 22 ++++++++++++++++++++++ src/components/ProductsPage.js | 6 ++++++ src/components/SearchBar.js | 9 +++++++++ 3 files changed, 37 insertions(+) create mode 100644 src/components/ProductTable.js create mode 100644 src/components/SearchBar.js diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js new file mode 100644 index 0000000..064540a --- /dev/null +++ b/src/components/ProductTable.js @@ -0,0 +1,22 @@ +function ProductTable({ products }) { + return ( + + + + + + + + + {products.map((product) => ( + + + + + ))} + +
NamePrice
{product.name}{product.price}
+ ); +} + +export default ProductTable; diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js index b43a886..6d57161 100644 --- a/src/components/ProductsPage.js +++ b/src/components/ProductsPage.js @@ -1,12 +1,18 @@ import { useState } from "react"; import jsonData from "../data.json"; +import SearchBar from "./SearchBar"; +import ProductTable from "./ProductTable"; + function ProductsPage() { const [products, setProducts] = useState(jsonData); return (

Root Store

+ + +
); } diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 0000000..821f647 --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,9 @@ +function SearchBar() { + return ( +
+ +
+ ); +} + +export default SearchBar; From 03286bbe138c821658a7ba4352302a4f97a3dabb Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 11:57:55 +0000 Subject: [PATCH 5/8] complete ProductRow.js --- src/components/ProductRow.js | 14 +++++++++++++ src/components/ProductTable.js | 36 +++++++++++++++++----------------- 2 files changed, 32 insertions(+), 18 deletions(-) create mode 100644 src/components/ProductRow.js diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js new file mode 100644 index 0000000..14f27fe --- /dev/null +++ b/src/components/ProductRow.js @@ -0,0 +1,14 @@ +function ProductRow({ product }) { + const textStyle = { + color: product.inStock ? "black" : "red", + }; + + return ( + + {product.name} + {product.price} + + ); +} + +export default ProductRow; diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js index 064540a..5edbb16 100644 --- a/src/components/ProductTable.js +++ b/src/components/ProductTable.js @@ -1,22 +1,22 @@ +import ProductRow from "./ProductRow"; + function ProductTable({ products }) { - return ( - - - - - - - - - {products.map((product) => ( - - - - - ))} - -
NamePrice
{product.name}{product.price}
- ); + return ( + + + + + + + + + + {products.map((product) => ( + + ))} + +
NamePrice
+ ); } export default ProductTable; From 904cb21b9565945f33aa5ec082a3a291427fe7db Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 12:01:35 +0000 Subject: [PATCH 6/8] update SearchBar.js and ProductsPage.js --- src/components/ProductsPage.js | 15 ++++++++++++--- src/components/SearchBar.js | 17 +++++++++++------ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js index 6d57161..87767a8 100644 --- a/src/components/ProductsPage.js +++ b/src/components/ProductsPage.js @@ -5,14 +5,23 @@ import SearchBar from "./SearchBar"; import ProductTable from "./ProductTable"; function ProductsPage() { - const [products, setProducts] = useState(jsonData); + const [products] = useState(jsonData); + const [searchText, setSearchText] = useState(""); + + const filteredProducts = products.filter((product) => + product.name.toLowerCase().includes(searchText.toLowerCase()) + ); return (

Root Store

- - + + +
); } diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 821f647..e7cea28 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -1,9 +1,14 @@ -function SearchBar() { - return ( -
- -
- ); +function SearchBar({ searchText, onSearchChange }) { + return ( +
+ onSearchChange(e.target.value)} + /> +
+ ); } export default SearchBar; From 06cc75adee28027601435c42ab713bb6cb5321ab Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 12:05:41 +0000 Subject: [PATCH 7/8] update SearchBar (add checkbox) and ProductsPage (combine filters) --- src/components/ProductsPage.js | 15 ++++++++++++--- src/components/SearchBar.js | 18 +++++++++++++++++- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js index 87767a8..ccdcaa2 100644 --- a/src/components/ProductsPage.js +++ b/src/components/ProductsPage.js @@ -7,10 +7,17 @@ import ProductTable from "./ProductTable"; function ProductsPage() { const [products] = useState(jsonData); const [searchText, setSearchText] = useState(""); + const [inStockOnly, setInStockOnly] = useState(false); - const filteredProducts = products.filter((product) => - product.name.toLowerCase().includes(searchText.toLowerCase()) - ); + const filteredProducts = products.filter((product) => { + const matchesSearch = product.name + .toLowerCase() + .includes(searchText.toLowerCase()); + + const matchesStock = inStockOnly ? product.inStock : true; + + return matchesSearch && matchesStock; + }); return (
@@ -19,6 +26,8 @@ function ProductsPage() { diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index e7cea28..6422285 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -1,4 +1,9 @@ -function SearchBar({ searchText, onSearchChange }) { +function SearchBar({ + searchText, + onSearchChange, + inStockOnly, + onInStockChange, +}) { return (
onSearchChange(e.target.value)} /> + +
+ +
); } From f6d7a88d563546e082ad154249a30215db8a90a6 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Mon, 15 Dec 2025 12:11:48 +0000 Subject: [PATCH 8/8] done --- src/App.css | 70 ++++++++++++++++++++++++------------- src/components/SearchBar.js | 20 +++++------ 2 files changed, 54 insertions(+), 36 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..57fcfc3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,58 @@ +/* Global reset */ +* { + box-sizing: border-box; +} + +/* App container */ .App { + max-width: 700px; + margin: 40px auto; + padding: 20px; + font-family: Arial, Helvetica, sans-serif; + background-color: #f9f9f9; +} + +/* Title */ +h1 { text-align: center; + margin-bottom: 20px; +} + +/* Search bar */ +input[type="text"] { + width: 100%; + padding: 8px; + margin-bottom: 10px; + font-size: 14px; } -.App-logo { - height: 40vmin; - pointer-events: none; +/* Checkbox area */ +label { + font-size: 14px; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +/* Table */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; + background-color: white; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; +/* Table header */ +th { + text-align: left; + padding: 8px; + border-bottom: 2px solid #ddd; } -.App-link { - color: #61dafb; +/* Table rows */ +td { + padding: 8px; + border-bottom: 1px solid #eee; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +/* Row hover effect */ +tbody tr:hover { + background-color: #f1f1f1; } diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 6422285..f12ffa2 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -5,7 +5,7 @@ function SearchBar({ onInStockChange, }) { return ( -
+
onSearchChange(e.target.value)} /> -
- -
+
); }