Completed

src/components/ProductRow.css

@@ -0,0 +1,21 @@
+.productRow {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+
+    border: none;
+
+    background-color: white;
+
+    font-size: 20px;
+
+    margin: 5px;
+}
+
+.available {
+    color: rgb(7, 7, 59);
+}
+
+.soldOut {
+    color: red;
+}

src/components/ProductRow.js

@@ -0,0 +1,15 @@
+import './ProductRow.css';
+
+import React from 'react'
+
+export default function ProductRow(props) {
+
+    const inStock = props.inStock;
+
+    return (
+        <tr className={inStock ? 'productRow available' : 'productRow soldOut'}>
+            <td>{props.name}</td>
+            <td>{props.price}</td>
+        </tr>
+    )
+}

src/components/ProductsPage.css

@@ -0,0 +1,5 @@
+.title {
+    font-size: 50px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    color: rgb(231, 54, 15)
+}

src/components/ProductsPage.js

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import jsonData from './../data.json';
+
+import './ProductsPage.css';
+
+import SearchBar from './SearchBar';
+import ProductsTable from './ProductsTable';
+
+
+
+export default function ProductsPage() {
+
+    const [products, setProducts] = useState(jsonData);
+    const [searchString, setSearchString] = useState('');
+    const [isChecked, setIsChecked] = useState(false);
+
+    function onSearchChange(newSearchString) {
+        setSearchString(newSearchString);
+    }
+
+    function onCheck() {
+        setIsChecked(isChecked ? false : true);
+    }
+
+    return (
+        <div>
+            <h1 className='title'>Root Store</h1>
+            <SearchBar onSearchChange={onSearchChange} onCheck={onCheck}/>
+            <ProductsTable data={products} searchString={searchString} isChecked={isChecked}/>
+        </div>
+    )
+}

src/components/ProductsTable.css

@@ -0,0 +1,37 @@
+.productsTable {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-around;
+
+    border: none;
+
+    margin: 20px;
+}
+
+.tableHeader {
+    display: flex;
+    flex-flow: row nowrap;
+
+    font-size: 30px;
+    color: white;
+
+    background-color: rgb(212, 86, 40);
+} 
+
+.rowContainer {
+    background-color: rgb(212, 212, 235);
+}
+
+.productInfo {
+    margin: 5px;
+    padding: 5px;
+
+    margin-left: 275px;
+}
+
+.productPrice {
+    margin-left: 0px;
+    padding-left: 0px;
+
+    margin-left: 600px;
+}

src/components/ProductsTable.js

@@ -0,0 +1,34 @@
+import './ProductsTable.css';
+
+import React from 'react';
+
+import ProductRow from './ProductRow';
+
+export default function ProductsTable(props) {
+    const products = props.data;
+    const searchString = props.searchString.toLowerCase();
+
+    let filteredProducts = products.filter((product) => {
+        return product.name.toLowerCase().startsWith(searchString);
+    });
+
+    // let inStockProducts = [];
+    if (props.isChecked) {
+        filteredProducts = filteredProducts.filter((product) => product.inStock)
+    }
+
+
+    return (
+        <div className='productsTable'>
+            <div>
+                <tr className='tableHeader'>
+                    <td className='productInfo'>Product Name</td>
+                    <td className='productInfo productPrice'>Price</td>
+                </tr>
+            </div>
+            <div className='rowContainer'>
+                {filteredProducts.map((product) => <ProductRow key={product.id} name={product.name} price={product.price} inStock={product.inStock} />)}
+            </div>
+        </div>
+    )
+}

src/components/SearchBar.css

@@ -0,0 +1,40 @@
+.searchBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    margin: 20px;
+
+    border: none;
+
+    background-color: rgb(200, 200, 224);
+}
+
+.searchHeading {
+    color: rgb(33, 33, 59);
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: 35px;
+
+    margin: 10px;
+    margin-bottom: 5px;
+}
+
+.inputField {
+    width: 500px;
+    height: 30px;
+
+    font-size: 25px;
+
+    border: none;
+
+    margin: 10px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.checkBox {
+    margin: 10px;
+
+    font-size: 20px;
+    color: rgb(33, 33, 59);
+}

src/components/SearchBar.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import './SearchBar.css';
+
+export default function SearchBar({onSearchChange, onCheck}) {
+
+    function updateSearchString (event) {
+        const newSearchString = event.target.value;
+        onSearchChange(newSearchString);
+    }
+
+    function handleCheckBox () {
+        onCheck();
+    }
+
+    return (
+        <div className="searchBox">
+            <h3 className='searchHeading'>Search</h3>
+            <input type="text" className='inputField' onChange={updateSearchString}/>
+            <div className='checkBox'>
+                <input type="checkbox" id="checkbox" onChange={handleCheckBox}/>
+                <label htmlFor="checkbox">Only show items in stock</label>
+            </div>
+        </div>
+    )
+}