mannpatel/Campus-Plug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

selling Pg UI and Fav is done

Browse Source
This commit is contained in:
Mann Patel
2025-04-12 18:33:13 -06:00
parent 0f8bb622a4
commit 814c24c83f
5 changed files with 425 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
frontend/src/pages/Favorites.jsx
View File

@@ -1,63 +1,113 @@
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Heart, Tag, Trash2, Filter, ChevronDown } from 'lucide-react';
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Heart, Tag, Trash2, Filter, ChevronDown } from "lucide-react";
const Favorites = () => {
const [favorites, setFavorites] = useState([
{
id: 0,
title: 'Dell XPS 16 Laptop',
price: 850,
category: 'Electronics',
image: '/image1.avif',
condition: 'Like New',
seller: 'Michael T.',
datePosted: '5d ago',
dateAdded: '2023-03-08',
},
]);
const [favorites, setFavorites] = useState([]);
const [showFilters, setShowFilters] = useState(false);
const [sortBy, setSortBy] = useState('dateAdded');
const [filterCategory, setFilterCategory] = useState('All');
const [sortBy, setSortBy] = useState("dateAdded");
const [filterCategory, setFilterCategory] = useState("All");
// Function to remove item from favorites
const removeFromFavorites = (id) => {
setFavorites(favorites.filter(item => item.id !== id));
const mapCategory = (id) => {
const categories = {
1: "Electronics",
2: "Textbooks",
3: "Furniture",
4: "Clothing",
5: "Kitchen",
6: "Other",
};
return categories[id] || "Other";
};
// Available categories for filtering
const categories = ['All', 'Electronics', 'Textbooks', 'Furniture', 'Kitchen', 'Other'];
useEffect(() => {
const fetchFavorites = async () => {
try {
const user = JSON.parse(sessionStorage.getItem("user"));
const response = await fetch(
"http://localhost:3030/api/product/getFavorites",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ userID: user.ID }),
},
);
const data = await response.json();
console.log(user.ID);
console.log(data);
const favoritesData = data.favorites;
if (!Array.isArray(favoritesData)) {
console.error("Expected an array but got:", favoritesData);
return;
}
const transformed = favoritesData.map((item) => ({
id: item.ProductID,
title: item.Name,
price: parseFloat(item.Price),
category: mapCategory(item.CategoryID), // 👈 map numeric category to a string
image: item.image_url || "/default-image.jpg",
condition: "Used", // or another field if you add `Condition` to your DB
seller: item.SellerName,
datePosted: formatDatePosted(item.Date),
dateAdded: item.Date || new Date().toISOString(),
}));
setFavorites(transformed);
} catch (error) {
console.error("Failed to fetch favorites:", error);
}
};
fetchFavorites();
}, []);
const formatDatePosted = (dateString) => {
const postedDate = new Date(dateString);
const today = new Date();
const diffInMs = today - postedDate;
const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
return `${diffInDays}d ago`;
};
const removeFromFavorites = (id) => {
setFavorites(favorites.filter((item) => item.id !== id));
// Optional: Send DELETE request to backend here
};
// Sort favorites based on selected sort option
const sortedFavorites = [...favorites].sort((a, b) => {
if (sortBy === 'dateAdded') {
if (sortBy === "dateAdded")
return new Date(b.dateAdded) - new Date(a.dateAdded);
} else if (sortBy === 'priceHigh') {
return b.price - a.price;
} else if (sortBy === 'priceLow') {
return a.price - b.price;
}
if (sortBy === "priceHigh") return b.price - a.price;
if (sortBy === "priceLow") return a.price - b.price;
return 0;
});
// Filter favorites based on selected category
const filteredFavorites = filterCategory === 'All'
? sortedFavorites
: sortedFavorites.filter(item => item.category === filterCategory);
const filteredFavorites =
filterCategory === "All"
? sortedFavorites
: sortedFavorites.filter((item) => item.category === filterCategory);
// rest of the JSX remains unchanged...
return (
<div className="max-w-6xl mx-auto">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-800">My Favorites</h1>
<button
<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' : ''}`} />
<ChevronDown
className={`h-4 w-4 ml-1 transition-transform ${showFilters ? "rotate-180" : ""}`}
/>
</button>
</div>
@@ -89,7 +139,9 @@ const Favorites = () => {
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>
<option key={category} value={category}>
{category}
</option>
))}
</select>
</div>
@@ -101,12 +153,15 @@ const Favorites = () => {
{filteredFavorites.length === 0 ? (
<div className="bg-white border border-gray-200 p-8 text-center">
<Heart className="h-12 w-12 text-gray-300 mx-auto mb-4" />
<h3 className="text-xl font-medium text-gray-700 mb-2">No favorites yet</h3>
<h3 className="text-xl font-medium text-gray-700 mb-2">
No favorites yet
</h3>
<p className="text-gray-500 mb-4">
Items you save will appear here. Start browsing to add items to your favorites.
Items you save will appear here. Start browsing to add items to your
favorites.
</p>
<Link
to="/"
<Link
to="/"
className="inline-block bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
>
Browse Listings
@@ -115,7 +170,10 @@ const Favorites = () => {
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredFavorites.map((item) => (
<div key={item.id} className="bg-white border border-gray-200 hover:shadow-md transition-shadow relative">
<div
key={item.id}
className="bg-white border border-gray-200 hover:shadow-md transition-shadow relative"
>
<button
onClick={() => removeFromFavorites(item.id)}
className="absolute top-2 right-2 p-1 bg-white rounded-full shadow-sm text-red-500 hover:bg-red-50"
@@ -123,28 +181,38 @@ const Favorites = () => {
>
<Trash2 className="h-5 w-5" />
</button>
<Link to={`/product/${item.id}`}>
<img src={item.image} alt={item.title} className="w-full h-48 object-cover" />
<img
src={item.image}
alt={item.title}
className="w-full h-48 object-cover"
/>
<div className="p-4">
<div className="flex justify-between items-start mb-2">
<h3 className="text-lg font-medium text-gray-800 leading-tight">
{item.title}
</h3>
<span className="font-semibold text-green-600">${item.price}</span>
<span className="font-semibold text-green-600">
${item.price}
</span>
</div>
<div className="flex items-center text-sm text-gray-500 mb-3">
<Tag className="h-4 w-4 mr-1" />
<span>{item.category}</span>
<span className="mx-2">•</span>
<span>{item.condition}</span>
</div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100">
<span className="text-xs text-gray-500">Listed {item.datePosted}</span>
<span className="text-sm font-medium text-gray-700">{item.seller}</span>
<span className="text-xs text-gray-500">
Listed {item.datePosted}
</span>
<span className="text-sm font-medium text-gray-700">
{item.seller}
</span>
</div>
</div>
</Link>
@@ -156,12 +224,13 @@ const Favorites = () => {
{/* Show count if there are favorites */}
{filteredFavorites.length > 0 && (
<div className="mt-6 text-sm text-gray-500">
Showing {filteredFavorites.length} {filteredFavorites.length === 1 ? 'item' : 'items'}
{filterCategory !== 'All' && ` in ${filterCategory}`}
Showing {filteredFavorites.length}{" "}
{filteredFavorites.length === 1 ? "item" : "items"}
{filterCategory !== "All" && ` in ${filterCategory}`}
</div>
)}
</div>
);
};
export default Favorites;
export default Favorites;