Merge pull request #6 from neuefische/feature-searchbar

Add feature SearchBar

frontend/src/components/ProductView.tsx

@@ -3,10 +3,12 @@ import ProductCard from "./ProductCard.tsx";
 import axios from "axios";
 import {useEffect, useState} from "react";
 import {Product} from "../Product.ts";
+import SearchBar from "./SearchBar.tsx"
 
 export default function ProductView() {
 
-    const [products, setProducts] = useState<Product[]>([])
+    const [products, setProducts] = useState<Product[]>([]);
+    const [filteredProducts, setFilteredProducts] = useState<Product[]>([]);
 
     function fetchAllProducts() {
         axios({
@@ -15,24 +17,36 @@ export default function ProductView() {
 
         })
             .then((response) => {
-                setProducts(response.data)
-            })
+                setProducts(response.data);
+                setFilteredProducts(response.data);
+            });
     }
 
+    const filterProducts = (query: string) => {
+        if (query.trim() === "") {
+            setFilteredProducts(products);
+        } else {
+            const lowercasedQuery = query.toLowerCase();
+            const filtered = products.filter((product) =>
+                product.name.toLowerCase().includes(lowercasedQuery)
+            );
+            setFilteredProducts(filtered);
+        }
+    };
+
     useEffect(() => {
         fetchAllProducts();
     }, []);
 
     return (
         <div className="productView-container">
             <h2>Products</h2>
+            <SearchBar onSearch={filterProducts}/> {/* Add the SearchBar component */}
             <div className="productList-container">
-                {
-                    products.map((product) => {
-                        return <ProductCard product={product} key={product.id}/>
-                    })
-                }
+                {filteredProducts.map((product) => {
+                    return <ProductCard product={product} key={product.id}/>;
+                })}
             </div>
         </div>
     );
-};
+}

frontend/src/components/SearchBar.css

@@ -0,0 +1,30 @@
+.search-bar {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+}
+
+.search-input {
+    width: 300px;
+    padding: 10px;
+    font-size: 16px;
+    border: 2px solid mediumpurple;
+    border-radius: 4px;
+    outline: none;
+    background-color: black;
+    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
+}
+
+.search-input:hover {
+    border-color: deeppink;
+    box-shadow: 0 0 10px rgba(0, 123, 255, 0.75);
+    background-color: rgba(0, 123, 255, 0.1);
+    text-shadow: 0 0 5px rgba(0, 123, 255, 0.75);
+}
+
+.search-input:focus {
+    box-shadow: 0 0 15px rgba(0, 123, 255, 1);
+    border-color: #007bff;
+    background-color: rgba(0, 123, 255, 0.15);
+    text-shadow: 0 0 8px rgba(0, 123, 255, 1);
+}

frontend/src/components/SearchBar.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import './SearchBar.css';
+
+type SearchBarProps = {
+    onSearch: (query: string) => void;
+};
+
+const SearchBar = ({ onSearch }: SearchBarProps) => {
+    const [query, setQuery] = useState('');
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setQuery(value);
+        onSearch(value);  // Trigger filtering when the user types
+    };
+
+    return (
+        <div className="search-bar">
+            <input
+                type="text"
+                placeholder="Search products..."
+                value={query}
+                onChange={handleChange}
+                className="search-input"
+            />
+        </div>
+    );
+};
+
+export default SearchBar;