-
- 
(e.currentTarget.src = '/product.png')}
- alt="default image"
- className="w-full h-[150px] text-[12px] object-cover"
- />
-
-
-
- {productName.length < 30 - ? productName - : productName.substring(0, 30) + '...'} -
-
- {productDescription.length < 50
- ? productDescription
- : productDescription.substring(0, 50) + '...'}
+
+
+ = ({ activeNav }) => {
+const ProductList: React.FC = ({ activeNav,searchResults }) => {
const [activeButton, setActiveButton] = useState(1);
const fetchUrl = (nav: string) => {
@@ -88,7 +90,7 @@ const ProductList: React.FC = ({ activeNav }) => {
setActiveButton((prev) => (prev === 1 ? prev : prev - 1));
};
if (isLoading) {
- return = ({ activeNav }) => {
;
}
- if (!data) {
+ if (!data && !searchResults.length) {
return
+ 
-
-
+
+
);
}
export default Card;
+
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
index c4a1511..301ee4d 100644
--- a/src/components/ProductList.tsx
+++ b/src/components/ProductList.tsx
@@ -9,11 +9,13 @@ import { unstable_noStore as noStore } from 'next/cache';
import { SkeletonProduct } from '@/components/Skeleton';
import { storeAllProduct } from '@/redux/slices/userCartSlice';
import { useAppDispatch, useAppSelector } from '../redux/store';
+import defaultProductImage from '../../public/product-default.png';
interface ProdductProps {
activeNav?: String;
+ searchResults: ProductObj[];
}
-const ProductList: React.FC
+
- + {productName.length < 30 ? productName : `${productName.substring(0, 30)}...`} +
++ {productDescription.length < 50 ? productDescription : `${productDescription.substring(0, 50)}...`} +
+
+
{productPrice} RWF
-
-
+
+
+
-
-
- {
- handleNewItem();
- }}
- />
{/*
;
+ return No products found.
;
}
+ const productsToDisplay = searchResults.length ? searchResults : data;
+ console.log(searchResults)
return (
-
+
{data && (
<>
-
- {data.map(
+ {productsToDisplay.map(
(
product: {
id: string;
@@ -122,7 +126,7 @@ const ProductList: React.FC
-
-
Filter Product
-
-
- Categories
-Foods
-Property
-Shoes
-Price
-
-
-
- RWF
- 2350
-
-
-
-
Size
-
- ([]);
+ const [products, setProducts] = useState([]);
+ const [minPrice, setMinPrice] = useState('');
+ const [maxPrice, setMaxPrice] = useState('');
+ const [selectedCategory, setSelectedCategory] = useState('');
+ const [selectedProduct, setSelectedProduct] = useState('');
+
+ const router = useRouter();
+
+ useEffect(() => {
+ async function fetchCategories() {
+ try {
+ const allCategories: any = await request.get('/categories');
+ setCategories(allCategories.categories || []);
+ } catch (error) {
+ console.error('Error fetching categories:', error);
+ }
+ }
+
+ async function fetchProducts() {
+ try {
+ const allProducts: any = await request.get(`/products`);
+ setProducts(allProducts.products || []);
+ } catch (error) {
+ console.error('Error fetching products:', error);
+ }
+ }
+
+ fetchCategories();
+ fetchProducts();
+ }, []);
+
+ useEffect(() => {
+ handleSearchParams();
+ }, [minPrice, maxPrice, selectedCategory, selectedProduct]);
+
+ const handleSearchParams = () => {
+ if (minPrice || maxPrice || selectedCategory || selectedProduct) {
+ const queryParams: { [key: string]: string } = {};
+ if (minPrice) queryParams.minPrice = minPrice;
+ if (maxPrice) queryParams.maxPrice = maxPrice;
+ if (selectedCategory) queryParams.category = selectedCategory;
+ if (selectedProduct) queryParams.name = selectedProduct;
+
+ const queryString = new URLSearchParams(queryParams).toString();
+ console.log('Query Params:', queryString); // Debugging log
+ router.push(`/products?${queryString}`);
+ }
+ };
+
+ const handleCategoryClick = (category: string) => {
+ setSelectedCategory(category);
+ setSelectedProduct('');
+ };
+
+ const handleProductClick = (product: string) => {
+ setSelectedProduct(product);
+ setSelectedCategory('');
+ };
+
+ const handleMinPriceChange = (e: React.ChangeEvent) => {
+ setMinPrice(e.target.value);
+ };
+
+ const handleMaxPriceChange = (e: React.ChangeEvent) => {
+ setMaxPrice(e.target.value);
+ };
+
+ return (
+ ) => {
setValue(event.target.value);
setActiveButton(event.target.value);
};
+
const handleButtonClick = (buttonName: string) => {
setActiveButton(buttonName);
};
+
const buttonClass = (buttonName: string) =>
`px-4 py-2 ${
activeButton === buttonName ? 'bg-black text-white' : ''
} focus:outline-none `;
+
+ const handleSearch = async (e: { preventDefault: () => void }) => {
+ e.preventDefault();
+ console.log("Search query:", Value);
+
+ try {
+ let queryParams: any = {};
+ const trimmedValue = Value.trim();
+ const numericValue = parseFloat(trimmedValue);
+
+ if (!isNaN(numericValue)) {
+ queryParams.minPrice = numericValue;
+ } else if (!isNaN(numericValue)) {
+ queryParams.maxPrice = numericValue;
+ } else if (!isNaN(numericValue)) {
+ queryParams.minPrice = numericValue;
+ queryParams.maxPrice = numericValue;
+ } else if (trimmedValue.length > 0) {
+ queryParams.name = Value;
+ } else if (trimmedValue.length > 0) {
+ queryParams.category = Value;
+ }
+
+ const queryString = new URLSearchParams(queryParams).toString();
+ console.log(queryString);
+
+ const url = `/search?${new URLSearchParams(queryParams).toString()}`;
+ const response: any = await request.get(url);
+
+ setSearchResults(response);
+ setSearched(true); // Set searched to true when a search is performed
+ } catch (error) {
+ console.error('Error fetching search results:', error);
+ }
+ };
+
return (
small
-large
+ const [categories, setCategories] = useState
+
-
-)
+ );
}
-export default Side
\ No newline at end of file
+export default Side;
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index d1752ba..9533a40 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -66,29 +66,14 @@ export const SideSkeleton = () => {
return (
<>
+
Filter Product
+
+
- Categories
+ {categories.length > 0 ? ( +
+ {categories.map((category: any) => (
+
+ ) : (
+ handleCategoryClick(category.id)} + > + {category.categoryName} +
+ ))} +No categories available
+ )} +Price
-
- x-large
-xx-large
+
+
+
+
+
- 
+
+
-
diff --git a/src/components/allProducts.tsx b/src/components/allProducts.tsx
index 8acc560..f46edfc 100644
--- a/src/components/allProducts.tsx
+++ b/src/components/allProducts.tsx
@@ -1,15 +1,23 @@
'use client';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
import ProductList from './ProductList';
+import { AiOutlineSearch } from 'react-icons/ai';
+import { useRouter } from 'next/navigation';
+import request from '@/utils/axios';
+
export const ProductWithFilter = () => {
const [Value, setValue] = useState('');
const [locarstorage, SetLocal] = useState(null);
const [activeButton, setActiveButton] = useState('All');
+ const [searchResults, setSearchResults] = useState([]);
+ const [searched, setSearched] = useState(false); // New state for tracking if a search has been performed
+ const router = useRouter();
const Options = [
{ laber: 'All', value: 1 },
{ laber: 'Rating', value: 2 },
{ laber: 'wishes', value: 3 },
];
+
useEffect(() => {
if (typeof window !== 'undefined') {
const storedToken: string | any = localStorage.getItem('profile');
@@ -17,17 +25,56 @@ export const ProductWithFilter = () => {
SetLocal(ifuser?.User?.Role.name as any);
}
}, []);
+
const handleSelect = (event: React.ChangeEvent
-
-
+
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
+
@@ -90,20 +137,28 @@ export const ProductWithFilter = () => {
)}
{/* Search */}
-
diff --git a/src/types/Product.ts b/src/types/Product.ts
index ff75c36..c254515 100644
--- a/src/types/Product.ts
+++ b/src/types/Product.ts
@@ -7,14 +7,14 @@ export interface Seller {
phone?: string;
}
export interface ReviewType {
- buyerId:string;
+ buyerId: string;
rating: number;
feedback: string;
- userProfile:{
- firstName:string;
- lastName:string;
- profileImage:string;
- }
+ userProfile: {
+ firstName: string;
+ lastName: string;
+ profileImage: string;
+ };
}
export interface imageType {
imgId: string;
@@ -34,35 +34,46 @@ export interface ProductType {
productDescription: string;
productDiscount?: number;
productName: string;
- productPictures: imageType[]
+ productPictures: imageType[];
productPrice: number;
productThumbnail: string;
reviews: ReviewType[];
related: any;
seller?: Seller;
- sellerId?: string;
+ sellerId?: string;
stockLevel?: number;
updatedAt?: number;
- }
-
- export interface ProductObj {
- currentPage: number;
- products: ProductType[];
- totalItems: number;
- toatalPages: number;
- }
+}
+
+export interface ProductObj {
+ currentPage: number;
+ products: ProductType[];
+ totalItems: number;
+ toatalPages: number;
+}
+
+export interface Cards {
+ key: string;
+ id: string;
+ productPrice: number;
+ productThumbnail: string;
+ productDescription: string;
+ reviews: ReviewType[];
+ productName: string;
+}
+export interface TableType {
+ product: string;
+ index: number;
+ id: string;
+}
+export interface CategoryType {
+ id: string;
+ categoryName: string;
+ createdAt: string;
+ updatedAt: string;
+}
- export interface Cards {
- key: string;
- id: string;
- productPrice: number;
- productThumbnail: string;
- productDescription: string;
- reviews:ReviewType[];
- productName:string;
- }
- export interface TableType {
- product: string;
- index: number;
- id:string;
- }
+export interface CategoryResponse {
+ message: string;
+ categories: CategoryType[];
+}
-
-
{/* Product Section */}
-
- 
+
+
+
-
+ {searched && searchResults.length === 0 ? (
+
No product found
+ ) : ( +