Clever Niwagaba - Internship

src/App.css

@@ -1,38 +1,38 @@
-.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;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.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;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -1,25 +1,13 @@
-import logo from './logo.svg';
-import './App.css';
-
-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>
-  );
-}
-
-export default App;
+import './App.css';
+import ProductsPage from "./components/ProductsPage";
+
+function App() {
+  return (
+    <div className="App">
+      <h1 className="store-title">Store</h1>
+      <ProductsPage />
+    </div>
+  );
+}
+
+export default App;

src/App.test.js

@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/ProductRow.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function ProductRow({ product }) {
+  return (
+    <tr>
+      <td>{product.name}</td>
+      <td>{product.price}</td>
+    </tr>
+  );
+}
+
+export default ProductRow;

src/components/ProductTable.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import './css/style.css'
+
+function ProductTable({ products }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        {products.map((product) => (
+          <tr
+            key={product.id}
+            className={!product.inStock ? "out-of-stock" : ""}
+          >
+            <td>{product.name}</td>
+            <td>{product.price}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+export default ProductTable;

src/components/ProductsPage.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import SearchBar from "./SearchBar";
+import ProductTable from "./ProductTable";
+import data from "../data.json"; 
+import "./css/style.css";
+
+function ProductsPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [onlyInStock, setOnlyInStock] = useState(false);
+
+  const handleSearchChange = (query) => {
+    setSearchQuery(query);
+  };
+
+  const handleInStockChange = (event) => {
+    setOnlyInStock(event.target.checked);
+  };
+
+  const filteredProducts = data.filter((product) => {
+    const matchesSearchQuery = product.name
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesStockFilter = !onlyInStock || product.inStock;
+    return matchesSearchQuery && matchesStockFilter;
+  });
+
+  return (
+    <div>
+      <div className="search-title">Search</div>
+      <SearchBar
+        searchQuery={searchQuery}
+        onSearchChange={handleSearchChange}
+      />
+      <div className="in-stock-filter">
+        <input
+          type="checkbox"
+          id="in-stock-checkbox"
+          checked={onlyInStock}
+          onChange={handleInStockChange}
+        />
+        <label htmlFor="in-stock-checkbox">Only show products in stock</label>
+      </div>
+      <div className="table-wrapper">
+        <ProductTable products={filteredProducts} />
+      </div>
+    </div>
+  );
+}
+
+export default ProductsPage;

src/components/SearchBar.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import './css/style.css'
+
+function SearchBar({ searchQuery, onSearchChange }) {
+  return (
+    <div className="search-bar">
+      <input
+        type="text"
+        value={searchQuery}
+        onChange={(e) => onSearchChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+export default SearchBar

src/components/style.css

@@ -0,0 +1,77 @@
+.table-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    width: 1500px;
+    margin-left: 0px;
+    padding-left: 200px;    
+  }
+
+  table {
+    width: 100%; 
+    max-width: 2000px; 
+    border-collapse: collapse; 
+  }
+
+  table th:first-child
+  {
+    width: 100%;    
+    padding-left: 0px;
+    padding-right: -300px;               
+  }
+
+  table th:nth-child(2) {
+    width: 300px; 
+    margin-left: 500px;
+}
+
+  table th:first-child,
+  table th:nth-child(2) 
+  {
+    background-color: rgb(209, 213, 222);
+    color: grey;    
+  }
+
+  table th,
+  table td {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 300px;
+    text-align: center; 
+  }
+
+  td:first-child {
+    width: 300px; 
+    padding-left: 0px;
+  }
+
+  table th:nth-child(2) {
+    width: 150px; 
+    padding-right: -200px;
+  }
+
+   th:last-child,
+  .search-bar {
+    width: 100%; 
+    margin-bottom: 20px; 
+}
+
+.search-bar input {
+    width: 80%;
+    padding: 8px;
+    box-sizing: border-box; 
+}
+
+div.search-title {
+  padding-bottom: 15px !important;
+}
+
+.in-stock-filter {
+  padding-bottom: 50px;
+}
+
+
+.out-of-stock {
+  color: red;
+
+}

src/data.json

@@ -1,11 +1,11 @@
-[
-    {"category": "Sporting Goods",  "price": "$49.99",    "inStock": true,    "name": "Football",    "id": "295a4dab-74b2-4e60-b3c2-c1346aba7585"},
-    {"category": "Sporting Goods",  "price": "$9.99",    "inStock": false,   "name": "Basketball",    "id": "6cf41052-7869-490f-9c2c-8f8efd2a4b5d"},
-    {"category": "Electronics",     "price": "$99.99",    "inStock": true,    "name": "iPod Touch",    "id": "6fa4681a-61e1-4bf6-823a-24b2fe335543"},
-    {"category": "Electronics",     "price": "$199.99",   "inStock": false,   "name": "iPhone X",    "id": "bbdabd03-0e02-4e7d-a7fc-ce52cc1164be"},
-    {"category": "Sporting Goods",  "price": "$9.99",   "inStock": true,    "name": "Tennis Balls",    "id": "5358b8a4-fe62-4f7d-9a22-712be95a1f72"},
-    {"category": "Electronics",     "price": "$199.99",   "inStock": true,    "name": "Huawei P10",    "id": "10858000-7894-4d77-bd0f-24639d111e74"},
-    {"category": "Electronics",     "price": "$199.99",   "inStock": true,    "name": "iPad Mini",    "id": "a385a23f-07ed-4340-9ba7-937a0ce5f151"},
-    {"category": "Sporting Goods",  "price": "$9.99",     "inStock": true,    "name": "Baseball",    "id": "4522f16e-3f55-4863-ae36-e935ec9cb4ef"}
-  ]
+[
+    {"category": "Sporting Goods",  "price": "$49.99",    "inStock": true,    "name": "Football",    "id": "295a4dab-74b2-4e60-b3c2-c1346aba7585"},
+    {"category": "Sporting Goods",  "price": "$9.99",    "inStock": false,   "name": "Basketball",    "id": "6cf41052-7869-490f-9c2c-8f8efd2a4b5d"},
+    {"category": "Electronics",     "price": "$99.99",    "inStock": true,    "name": "iPod Touch",    "id": "6fa4681a-61e1-4bf6-823a-24b2fe335543"},
+    {"category": "Electronics",     "price": "$199.99",   "inStock": false,   "name": "iPhone X",    "id": "bbdabd03-0e02-4e7d-a7fc-ce52cc1164be"},
+    {"category": "Sporting Goods",  "price": "$9.99",   "inStock": true,    "name": "Tennis Balls",    "id": "5358b8a4-fe62-4f7d-9a22-712be95a1f72"},
+    {"category": "Electronics",     "price": "$199.99",   "inStock": true,    "name": "Huawei P10",    "id": "10858000-7894-4d77-bd0f-24639d111e74"},
+    {"category": "Electronics",     "price": "$199.99",   "inStock": true,    "name": "iPad Mini",    "id": "a385a23f-07ed-4340-9ba7-937a0ce5f151"},
+    {"category": "Sporting Goods",  "price": "$9.99",     "inStock": true,    "name": "Baseball",    "id": "4522f16e-3f55-4863-ae36-e935ec9cb4ef"}
+  ]
 

src/index.css

@@ -1,13 +1,13 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}