Kanak-internship

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "lab-thinking-in-react-new": "file:",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,23 +1,11 @@
-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>
+      <ProductsPage />
     </div>
   );
 }

src/components/ProductRow.js

@@ -0,0 +1,14 @@
+// src/components/ProductRow.js
+function ProductRow({ product }) {
+    const rowStyle = { color: product.inStock ? "black" : "red" };
+
+    return (
+      <tr style={rowStyle}>
+        <td>{product.name}</td>
+        <td>{product.price}</td>
+      </tr>
+    );
+  }
+
+  export default ProductRow;
+

src/components/ProductTable.js

@@ -0,0 +1,22 @@
+// src/components/ProductTable.js
+import ProductRow from "./ProductRow";
+
+function ProductTable({ products }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        {products.map((product) => (
+          <ProductRow key={product.id} product={product} />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default ProductTable;

src/components/ProductsPage.js

@@ -0,0 +1,34 @@
+// src/components/ProductsPage.js
+import { useState } from "react";
+import jsonData from "../mydata.json";
+import SearchBar from "./SearchBar";
+import ProductTable from "./ProductTable";
+
+function ProductsPage() {
+  const [products] = useState(jsonData);
+  const [searchText, setSearchText] = useState(""); 
+  const [showInStockOnly, setShowInStockOnly] = useState(false); 
+
+
+  const filteredProducts = products.filter((product) => {
+    const matchesSearch = product.name.toLowerCase().includes(searchText.toLowerCase());
+    const matchesStock = !showInStockOnly || product.inStock;
+    return matchesSearch && matchesStock;
+  });
+
+  return (
+    <div>
+      <h1>Store</h1>
+      <SearchBar
+        searchText={searchText}
+        setSearchText={setSearchText}
+        showInStockOnly={showInStockOnly}
+        setShowInStockOnly={setShowInStockOnly}
+      />
+      <ProductTable products={filteredProducts} />
+    </div>
+  );
+}
+
+export default ProductsPage;
+

src/components/SearchBar.js

@@ -0,0 +1,28 @@
+// src/components/SearchBar.js
+function SearchBar({ searchText, setSearchText, showInStockOnly, setShowInStockOnly }) {
+  const handleInputChange = (event) => setSearchText(event.target.value);
+  const handleCheckboxChange = (event) => setShowInStockOnly(event.target.checked);
+
+  return (
+    <div>
+      <label>Search
+      <input
+        type="text"
+        value={searchText}
+        onChange={handleInputChange}
+      />
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={showInStockOnly}
+          onChange={handleCheckboxChange}
+        />
+        Only show products in stock
+      </label>
+    </div>
+  );
+}
+
+export default SearchBar;
+

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -11,7 +10,3 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();