Merge pull request #6 from DaraghD/search

initial logic for search page

Author: DaraghD

frontend/package-lock.json

@@ -11,6 +11,7 @@ import ProductView from "./_root/pages/ProductView";
 import Profile from "@/_root/pages/Profile.tsx";
 import ProductListing from "./_root/pages/ProductListing";
 import { Toaster } from "./components/ui/sonner";
+import Products from "./_root/pages/Search";
 
 const App = () => {
     const location = useLocation();
@@ -29,6 +30,7 @@ const App = () => {
                     <Route element={<AuthLayout />}>
                         <Route path="/sign-in" element={<SignInForm />} />
                         <Route path="/sign-up" element={<SignUpForm />} />
+                        <Route path="/search" element={<Products />} />
                         <Route
                             path="/business-sign-up"
                             element={<BusinessSignUpForm />}

frontend/src/App.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+
+type Product = {
+    id: number;
+    name: string;
+  };
+
+const Products = () => {
+const [products, setProducts] = useState<Product[]>([]);
+const [searchTerm, setSearchTerm] = useState("");
+
+const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+}
+
+useEffect(() => {
+    const fetchProducts = async () => {
+        try {
+        const response = await fetch("http://localhost:8080/api/products");
+        const data = await response.json();
+        setProducts(data);     
+    }
+        catch(error){
+            console.error("Error fetching products", error);
+        }
+    }
+    fetchProducts();
+},[]);
+
+const filteredProducts = products.filter((product) =>
+    product.name.toLowerCase().includes(searchTerm.toLowerCase())
+);
+
+return(
+    <div>
+            <form onSubmit={handleSubmit}>
+            <label> Search For Services
+                <input type="text"
+                value = {searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                />
+            </label>
+            <input type="submit" />
+        </form>
+
+
+<ul>
+    {filteredProducts.map((product) => (
+    <li key = {product.id}>
+        <div>
+            <p>{product.name}</p>
+        </div>
+    </li>
+    ))}
+</ul>
+</div>
+);
+};
+
+export default Products;