Update Favorites.jsx

This commit is contained in:
Mann Patel
2025-04-13 12:59:09 -06:00
parent 2ef05ac3af
commit 0c82952927

View File

@@ -80,9 +80,8 @@ const Favorites = () => {
id: item.ProductID, id: item.ProductID,
title: item.Name, title: item.Name,
price: parseFloat(item.Price), price: parseFloat(item.Price),
category: mapCategory(item.CategoryID), // 👈 map numeric category to a string category: mapCategory(item.CategoryID),
image: item.image_url || "/default-image.jpg", image: item.image_url || "/default-image.jpg",
condition: "Used", // or another field if you add `Condition` to your DB
seller: item.SellerName, seller: item.SellerName,
datePosted: formatDatePosted(item.Date), datePosted: formatDatePosted(item.Date),
dateAdded: item.Date || new Date().toISOString(), dateAdded: item.Date || new Date().toISOString(),
@@ -118,62 +117,12 @@ const Favorites = () => {
? sortedFavorites ? sortedFavorites
: sortedFavorites.filter((item) => item.category === filterCategory); : sortedFavorites.filter((item) => item.category === filterCategory);
// rest of the JSX remains unchanged...
return ( return (
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-800">My Favorites</h1> <h1 className="text-2xl font-bold text-gray-800">My Favorites</h1>
<button
className="flex items-center text-gray-600 hover:text-gray-800"
onClick={() => setShowFilters(!showFilters)}
>
<Filter className="h-5 w-5 mr-1" />
<span>Filter & Sort</span>
<ChevronDown
className={`h-4 w-4 ml-1 transition-transform ${showFilters ? "rotate-180" : ""}`}
/>
</button>
</div> </div>
{/* Filters and Sorting */}
{showFilters && (
<div className="bg-white border border-gray-200 p-4 mb-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Sort by
</label>
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
>
<option value="dateAdded">Recently Added</option>
<option value="priceHigh">Price (High to Low)</option>
<option value="priceLow">Price (Low to High)</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Category
</label>
<select
value={filterCategory}
onChange={(e) => setFilterCategory(e.target.value)}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
>
{categories.map((category) => (
<option key={category} value={category}>
{category}
</option>
))}
</select>
</div>
</div>
</div>
)}
{/* Favorites List */} {/* Favorites List */}
{filteredFavorites.length === 0 ? ( {filteredFavorites.length === 0 ? (
<div className="bg-white border border-gray-200 p-8 text-center"> <div className="bg-white border border-gray-200 p-8 text-center">
@@ -227,8 +176,6 @@ const Favorites = () => {
<div className="flex items-center text-sm text-gray-500 mb-3"> <div className="flex items-center text-sm text-gray-500 mb-3">
<Tag className="h-4 w-4 mr-1" /> <Tag className="h-4 w-4 mr-1" />
<span>{item.category}</span> <span>{item.category}</span>
<span className="mx-2"></span>
<span>{item.condition}</span>
</div> </div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100"> <div className="flex justify-between items-center pt-2 border-t border-gray-100">