From 87ca787b6880d304d047cf00ebba8c8e414bbf87 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:30:28 +0530 Subject: [PATCH 1/8] Update App.js --- src/App.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 3784575..0dc2a48 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,32 @@ -import logo from './logo.svg'; import './App.css'; +import "./App.css"; +import ProductsPage from "./components/ProductsPage"; + + function App() { return (
- logo -

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

+ - Learn React + +
+ + +
); + + + } export default App; From d68aaa6202817a3a8ef02d9c1d0e0c550b3dfce3 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:31:41 +0530 Subject: [PATCH 2/8] Create ProductRow.js --- src/ProductRow.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/ProductRow.js diff --git a/src/ProductRow.js b/src/ProductRow.js new file mode 100644 index 0000000..875b487 --- /dev/null +++ b/src/ProductRow.js @@ -0,0 +1,20 @@ +import React from 'react' +import './table.css' + +const ProductRow = ({productprop}) => { + return ( + + + {productprop.name} + + {productprop.price} + + + + + ) +} + +export default ProductRow From ccdb6118039b3729ec1246f46516bad0b4a1fd5a Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:32:03 +0530 Subject: [PATCH 3/8] Rename src/ProductRow.js to src/components/ProductRow.js --- src/{ => components}/ProductRow.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{ => components}/ProductRow.js (100%) diff --git a/src/ProductRow.js b/src/components/ProductRow.js similarity index 100% rename from src/ProductRow.js rename to src/components/ProductRow.js From 8bd705fdf2c381d859b459f64b77aa18f5915c08 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:32:30 +0530 Subject: [PATCH 4/8] Create ProductTable.js --- src/components/ProductTable.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/components/ProductTable.js diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js new file mode 100644 index 0000000..f45c8b3 --- /dev/null +++ b/src/components/ProductTable.js @@ -0,0 +1,31 @@ +import React from 'react' +import ProductRow from './ProductRow' +// import './table.css' +import './table.css' + +const ProductTable = ({products}) => { + return ( +
+
+ + + + + + + + + + {products.map((product)=>( + + + ))} + + +
NamePrice
+
+
+ ) +} + +export default ProductTable From b755aa3f999316eed2ec8f3bd149e45faf5e82b7 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:32:49 +0530 Subject: [PATCH 5/8] Create ProductPage.css --- src/components/ProductPage.css | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/components/ProductPage.css diff --git a/src/components/ProductPage.css b/src/components/ProductPage.css new file mode 100644 index 0000000..1ff6f20 --- /dev/null +++ b/src/components/ProductPage.css @@ -0,0 +1,8 @@ +/* src/components/ProductsPage.css */ + +.checkbox-container { + margin-top: 10px; + } + + + From 2d441c4ef3d0ceadf749e38cf83208666afc4342 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:33:10 +0530 Subject: [PATCH 6/8] Create ProductPage.js --- src/components/ProductPage.js | 60 +++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/components/ProductPage.js diff --git a/src/components/ProductPage.js b/src/components/ProductPage.js new file mode 100644 index 0000000..f83b83a --- /dev/null +++ b/src/components/ProductPage.js @@ -0,0 +1,60 @@ +import React, { useState } from "react"; +import jsonData from "../data.json"; +import ProductTable from "./ProductTable"; +import SearchBar from "./SearchBar"; +import "./ProductsPage.css" + +function ProductsPage() { + const [query, setQuery] = useState(''); + const [filterProducts, setFilterProducts] = useState(jsonData); + const [inStockOnly, setInStockOnly] = useState(false); + + function setSearch(val) { + return new Promise((resolve) => { + setQuery(val); + resolve(val); + }); + } + + function handleChange(e) { + setSearch(e.target.value) + .then((value) => { + setFilterProducts( + jsonData.filter((val) => + val.name.split(" ").some((word) => + word.toLowerCase().startsWith(value) + ) + ) + ); + }) + .catch((err) => { + console.log(err); + }); + } + + function handleCheckboxChange() { + setInStockOnly(!inStockOnly); + + // Use the updated value of inStockOnly in the filter function + setFilterProducts( + jsonData.filter((product) => (!inStockOnly ? product.inStock : true)) + ); + } + + return ( +
+ + + +
+ ); +} + +export default ProductsPage; From cc27bf90160f2ba37415b4803394f00eb3833388 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:33:47 +0530 Subject: [PATCH 7/8] Create SearchBar.js --- src/components/SearchBar.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/components/SearchBar.js diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 0000000..34428ef --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,23 @@ +import React from 'react' + + +const SearchBar = ({dvalue,onchange}) => { + + const dstyle = { + width:'60%', + height:'40px', + marginTop:'30px' + + } + return ( +
+ +

Store

+

Search

+ + +
+ ) +} + +export default SearchBar From b2b4ade88671d8216a74af60f1a807693b298f26 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 13:34:04 +0530 Subject: [PATCH 8/8] Create Table.css --- src/components/Table.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/components/Table.css diff --git a/src/components/Table.css b/src/components/Table.css new file mode 100644 index 0000000..e77ed57 --- /dev/null +++ b/src/components/Table.css @@ -0,0 +1,31 @@ +*{ + margin: 50; + padding: 90; + + box-sizing: border-box; + font-family: sans-serif; +} + +.body{ + min-height: 10vh; + display: flex; + justify-content: center; + margin-top: 50px; +} + +table{ + width: 10%; + border-collapse: collapse; +} +th, td{ + padding-left: 20rem; + padding-right: 15rem; + padding-top: 1rem; + padding-bottom: 0.5rem; + +} + +thead{ + background-color: rgb(238, 162, 197); + +}