Merge pull request #27 from atlp-rwanda/Ft-Products-searching

Finishes [#187355072] product searching

src/components/AvailableProduct/productPage.tsx

@@ -4,50 +4,96 @@ import { RootState, AppDispatch } from '../../redux/store';
 import { fetchAvailableProducts } from '../../redux/slices/availableProductSlice';
 import Product from '../AvailableProduct/product';
 import Pagination from '../AvailableProduct/pagination';
+import { FaSlidersH } from 'react-icons/fa';
 
 const ProductsPage: React.FC = () => {
   const dispatch: AppDispatch = useDispatch();
   const { products, loading, error, totalPages, currentPage: reduxCurrentPage } = useSelector((state: RootState) => state.products);
 
-  const [currentPage, setCurrentPage] = useState(reduxCurrentPage); 
+  const [currentPage, setCurrentPage] = useState(reduxCurrentPage);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [minPrice, setMinPrice] = useState<number | undefined>(undefined);
+  const [maxPrice, setMaxPrice] = useState<number | undefined>(undefined);
+  const [showSearchBar, setShowSearchBar] = useState(false);
   const productsPerPage = 10;
 
   useEffect(() => {
-    dispatch(fetchAvailableProducts(currentPage));
-  }, [dispatch, currentPage]);
+    dispatch(fetchAvailableProducts({ page: currentPage, searchKeyword, minPrice, maxPrice }));
+  }, [dispatch, currentPage, searchKeyword, minPrice, maxPrice]);
 
   const handlePageChange = (pageNumber: number) => {
-    setCurrentPage(pageNumber); 
+    setCurrentPage(pageNumber);
   };
-
+
+  const handleSearch = () => {
+    setCurrentPage(1);
+    dispatch(fetchAvailableProducts({ page: 1, searchKeyword, minPrice, maxPrice }));
+  };
+
+  const toggleSearchBar = () => {
+    setShowSearchBar((prevState) => !prevState);
+  };
+
+  const handleMaxPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setMaxPrice(value === '' ? undefined : Number(value));
+  };
+
   return (
     <div className="products-page">
       <h1 className="title">Products</h1>
+      <div className="search-toggle">
+        <pre>Filter your Results  </pre>
+        <FaSlidersH onClick={toggleSearchBar} style={{ cursor: 'pointer' }} />
+      </div>
+      {showSearchBar && (
+        <div className="search-bar">
+          <input
+            type="text"
+            placeholder="Search keyword (eg.: Name, Category ....)"
+            value={searchKeyword}
+            onChange={(e) => setSearchKeyword(e.target.value)}
+          />
+          <input
+            type="number"
+            placeholder="Min Price"
+            value={minPrice || ''}
+            onChange={(e) => setMinPrice(Number(e.target.value))}
+          />
+          <input
+            type="number"
+            placeholder="Max Price"
+            value={maxPrice === undefined ? '' : maxPrice}
+            onChange={handleMaxPriceChange}
+          />
+        </div>
+      )}
       {loading ? (
         <div className="loading-message">Loading products...</div>
       ) : products.length === 0 ? (
         <div className="noproduct-message">
-          <div className='noproduct-card'>
+          <div className="noproduct-card">
             <h3>No available products in our stock</h3>
           </div>
         </div>
       ) : (
         <>
           <div className="product-list">
             {products.map((product) => (
-              <Product 
+              <Product
                 key={product.productId}
+                productId={product.productId}
                 name={product.name}
                 category={product.category}
                 price={product.price}
                 images={product.images}
                 discount={product.discount}
-                 productId={product.productId}              />
+              />
             ))}
           </div>
           <Pagination
             productsPerPage={productsPerPage}
-            totalProducts={totalPages * productsPerPage} 
+            totalProducts={totalPages * productsPerPage}
             onPageChange={handlePageChange}
             currentPage={currentPage}
           />

src/components/NavBar.tsx

@@ -54,6 +54,10 @@ const Navbar: React.FC<NavbarProps> = ({
     setClicked(!clicked);
   };
 
+  const handleShopClick = () => {
+    window.location.hash = 'product-page';
+  };
+
   useEffect(() => {
     dispatch(fetchProductsInCart())
 
@@ -82,7 +86,7 @@ const Navbar: React.FC<NavbarProps> = ({
             </Link>
           </li>
           <li>
-            <Link to="/shop" onClick={() => setClicked(false)}>
+            <Link to="" onClick={handleShopClick}>
               Shop
             </Link>
           </li>