569 lines
20 KiB
JavaScript
569 lines
20 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import {
|
|
Tag,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Bookmark,
|
|
BookmarkCheck,
|
|
} from "lucide-react";
|
|
|
|
import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
|
|
|
|
const Home = () => {
|
|
const navigate = useNavigate();
|
|
const [listings, setListings] = useState([]);
|
|
const [recommended, setRecommended] = useState([]);
|
|
const [history, sethistory] = useState([]);
|
|
const [error, setError] = useState(null);
|
|
const [showAlert, setShowAlert] = useState(false);
|
|
|
|
//After user data storing the session.
|
|
const storedUser = JSON.parse(sessionStorage.getItem("user"));
|
|
|
|
const toggleFavorite = async (id) => {
|
|
const response = await fetch(
|
|
"http://localhost:3030/api/product/addFavorite",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
userID: storedUser.ID,
|
|
productID: id,
|
|
}),
|
|
},
|
|
);
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
setShowAlert(true);
|
|
}
|
|
console.log(`Add Product -> History: ${id}`);
|
|
};
|
|
|
|
const addHistory = async (id) => {
|
|
const response = await fetch(
|
|
"http://localhost:3030/api/history/addHistory",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
userID: storedUser.ID,
|
|
productID: id,
|
|
}),
|
|
},
|
|
);
|
|
};
|
|
|
|
function reloadPage() {
|
|
var doctTimestamp = new Date(performance.timing.domLoading).getTime();
|
|
var now = Date.now();
|
|
var tenSec = 10 * 1000;
|
|
if (now > doctTimestamp + tenSec) {
|
|
location.reload();
|
|
}
|
|
}
|
|
reloadPage();
|
|
|
|
useEffect(() => {
|
|
const fetchrecomProducts = async () => {
|
|
try {
|
|
const response = await fetch(
|
|
"http://localhost:3030/api/engine/recommended",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
id: storedUser.ID,
|
|
}),
|
|
},
|
|
);
|
|
if (!response.ok) throw new Error("Failed to fetch products");
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
setRecommended(
|
|
data.data.map((product) => ({
|
|
id: product.ProductID,
|
|
title: product.ProductName, // Use the alias from SQL
|
|
price: product.Price,
|
|
category: product.Category, // Ensure this gets the category name
|
|
image: product.ProductImage, // Use the alias for image URL
|
|
seller: product.SellerName, // Fetch seller name properly
|
|
datePosted: product.DateUploaded, // Use the actual date
|
|
isFavorite: false, // Default state
|
|
})),
|
|
);
|
|
reloadPage();
|
|
} else {
|
|
throw new Error(data.message || "Error fetching products");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching products:", error);
|
|
setError(error.message);
|
|
}
|
|
};
|
|
fetchrecomProducts();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const fetchProducts = async () => {
|
|
try {
|
|
const response = await fetch(
|
|
"http://localhost:3030/api/product/getProduct",
|
|
);
|
|
if (!response.ok) throw new Error("Failed to fetch products");
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
setListings(
|
|
data.data.map((product) => ({
|
|
id: product.ProductID,
|
|
title: product.ProductName, // Use the alias from SQL
|
|
price: product.Price,
|
|
category: product.Category, // Ensure this gets the category name
|
|
image: product.ProductImage, // Use the alias for image URL
|
|
seller: product.SellerName, // Fetch seller name properly
|
|
datePosted: product.DateUploaded, // Use the actual date
|
|
isFavorite: false, // Default state
|
|
})),
|
|
);
|
|
} else {
|
|
throw new Error(data.message || "Error fetching products");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching products:", error);
|
|
setError(error.message);
|
|
}
|
|
};
|
|
fetchProducts();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const fetchrecomProducts = async () => {
|
|
// Get the user's data from localStorage
|
|
try {
|
|
const response = await fetch(
|
|
"http://localhost:3030/api/history/getHistory",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
id: storedUser.ID,
|
|
}),
|
|
},
|
|
);
|
|
if (!response.ok) throw new Error("Failed to fetch products");
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
sethistory(
|
|
data.data.map((product) => ({
|
|
id: product.ProductID,
|
|
title: product.ProductName, // Use the alias from SQL
|
|
price: product.Price,
|
|
category: product.Category, // Ensure this gets the category name
|
|
image: product.ProductImage, // Use the alias for image URL
|
|
seller: product.SellerName, // Fetch seller name properly
|
|
datePosted: product.DateUploaded, // Use the actual date
|
|
})),
|
|
);
|
|
} else {
|
|
throw new Error(data.message || "Error fetching products");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching products:", error);
|
|
setError(error.message);
|
|
}
|
|
};
|
|
fetchrecomProducts();
|
|
}, []);
|
|
|
|
const handleSelling = () => {
|
|
navigate("/selling");
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<div className="flex-grow">
|
|
{/* Hero Section with School Background */}
|
|
<div className="relative py-12 px-4 mb-8 shadow-sm">
|
|
{/* Background Image - Positioned at bottom */}
|
|
<div className="absolute inset-0 z-0 overflow-hidden bg-black bg-opacity-100">
|
|
<img
|
|
src="../public/Ucalgary.png"
|
|
alt="University of Calgary"
|
|
className="w-full h-full object-cover object-bottom opacity-50"
|
|
/>
|
|
{/* Dark overlay for better text readability */}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="max-w-2xl mx-auto text-center relative z-1">
|
|
<h1 className="text-3xl font-bold text-white mb-4">
|
|
Buy and Sell on Campus
|
|
</h1>
|
|
<p className="text-white mb-6">
|
|
The marketplace exclusively for university students. Find
|
|
everything you need or sell what you don't.
|
|
</p>
|
|
<button
|
|
onClick={handleSelling}
|
|
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
|
|
>
|
|
Post an Item
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Listings */}
|
|
{showAlert && (
|
|
<FloatingAlert
|
|
message="Product added to favorites!"
|
|
onClose={() => setShowAlert(false)}
|
|
/>
|
|
)}
|
|
<div className="relative py-4">
|
|
<h2 className="text-xl font-semibold text-gray-800 mb-4">
|
|
Recommendation
|
|
</h2>
|
|
|
|
<div className="relative">
|
|
{/* Left Button - Overlaid on products */}
|
|
<button
|
|
onClick={() =>
|
|
document
|
|
.getElementById("RecomContainer")
|
|
.scrollBy({ left: -400, behavior: "smooth" })
|
|
}
|
|
className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
|
|
>
|
|
<ChevronLeft size={24} />{" "}
|
|
</button>
|
|
|
|
{/* Scrollable Listings Container */}
|
|
<div
|
|
id="RecomContainer"
|
|
className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0 rounded"
|
|
>
|
|
{recommended.map((recommended) => (
|
|
<Link
|
|
key={recommended.id}
|
|
to={`/product/${recommended.id}`}
|
|
onClick={() => addHistory(recommended.id)}
|
|
className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
|
|
>
|
|
<div className="relative">
|
|
<img
|
|
src={recommended.image}
|
|
alt={recommended.title}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
toggleFavorite(recommended.id);
|
|
}}
|
|
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
|
|
>
|
|
<Bookmark className="text-white w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-medium text-gray-800 leading-tight">
|
|
{recommended.title}
|
|
</h3>
|
|
<span className="font-semibold text-emerald-600 block mt-1">
|
|
${recommended.price}
|
|
</span>
|
|
|
|
<div className="flex items-center text-sm text-gray-500 mt-2">
|
|
<Tag className="h-4 w-4 mr-1" />
|
|
<span>{recommended.category}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
|
|
<span className="text-xs text-gray-500">
|
|
{recommended.datePosted}
|
|
</span>
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{recommended.seller}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Button - Overlaid on products */}
|
|
<button
|
|
onClick={() =>
|
|
document
|
|
.getElementById("RecomContainer")
|
|
.scrollBy({ left: 400, behavior: "smooth" })
|
|
}
|
|
className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
|
|
>
|
|
<ChevronRight size={24} />{" "}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Listings */}
|
|
{showAlert && (
|
|
<FloatingAlert
|
|
message="Product added to favorites!"
|
|
onClose={() => setShowAlert(false)}
|
|
/>
|
|
)}
|
|
<div className="relative py-4">
|
|
<h2 className="text-xl font-semibold text-gray-800 mb-4">
|
|
Recent Listings
|
|
</h2>
|
|
|
|
<div className="relative">
|
|
{/* Left Button - Overlaid on products */}
|
|
<button
|
|
onClick={() =>
|
|
document
|
|
.getElementById("listingsContainer")
|
|
.scrollBy({ left: -400, behavior: "smooth" })
|
|
}
|
|
className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
|
|
>
|
|
<ChevronLeft size={24} />{" "}
|
|
</button>
|
|
|
|
{/* Scrollable Listings Container */}
|
|
<div
|
|
id="listingsContainer"
|
|
className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
|
|
>
|
|
{listings.map((listing) => (
|
|
<Link
|
|
key={listing.id}
|
|
to={`/product/${listing.id}`}
|
|
className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
|
|
>
|
|
<div className="relative">
|
|
<img
|
|
src={listing.image}
|
|
alt={listing.title}
|
|
onClick={() => addHistory(listing.id)}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
toggleFavorite(listing.id);
|
|
}}
|
|
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
|
|
>
|
|
<Bookmark className="text-white w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-medium text-gray-800 leading-tight">
|
|
{listing.title}
|
|
</h3>
|
|
<span className="font-semibold text-emerald-600 block mt-1">
|
|
${listing.price}
|
|
</span>
|
|
|
|
<div className="flex items-center text-sm text-gray-500 mt-2">
|
|
<Tag className="h-4 w-4 mr-1" />
|
|
<span>{listing.category}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
|
|
<span className="text-xs text-gray-500">
|
|
{listing.datePosted}
|
|
</span>
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{listing.seller}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Button - Overlaid on products */}
|
|
<button
|
|
onClick={() =>
|
|
document
|
|
.getElementById("listingsContainer")
|
|
.scrollBy({ left: 400, behavior: "smooth" })
|
|
}
|
|
className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
|
|
>
|
|
<ChevronRight size={24} />{" "}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* History Section */}
|
|
{showAlert && (
|
|
<FloatingAlert
|
|
message="Product added to favorites!"
|
|
onClose={() => setShowAlert(false)}
|
|
/>
|
|
)}
|
|
<div className="relative py-4">
|
|
<h2 className="text-xl font-semibold text-gray-800 mb-4">History</h2>
|
|
|
|
<div className="relative">
|
|
{/* Left Button - Overlaid on products */}
|
|
<button
|
|
onClick={() =>
|
|
document
|
|
.getElementById("HistoryContainer")
|
|
.scrollBy({ left: -400, behavior: "smooth" })
|
|
}
|
|
className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
|
|
>
|
|
<ChevronLeft size={24} />{" "}
|
|
</button>
|
|
|
|
{/* Scrollable Listings Container */}
|
|
<div
|
|
id="HistoryContainer"
|
|
className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
|
|
>
|
|
{history.map((history) => (
|
|
<Link
|
|
key={history.id}
|
|
to={`/product/${history.id}`}
|
|
className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
|
|
>
|
|
<div className="relative">
|
|
<img
|
|
src={history.image}
|
|
alt={history.title}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
toggleFavorite(history.id);
|
|
}}
|
|
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
|
|
>
|
|
<Bookmark className="text-white w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-medium text-gray-800 leading-tight">
|
|
{history.title}
|
|
</h3>
|
|
<span className="font-semibold text-emerald-600 block mt-1">
|
|
${history.price}
|
|
</span>
|
|
|
|
<div className="flex items-center text-sm text-gray-500 mt-2">
|
|
<Tag className="h-4 w-4 mr-1" />
|
|
<span>{history.category}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
|
|
<span className="text-xs text-gray-500">
|
|
{history.datePosted}
|
|
</span>
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{history.seller}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Button - Overlaid on products */}
|
|
<button
|
|
onClick={() =>
|
|
document
|
|
.getElementById("HistoryContainer")
|
|
.scrollBy({ left: 400, behavior: "smooth" })
|
|
}
|
|
className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
|
|
>
|
|
<ChevronRight size={24} />{" "}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer - Added here */}
|
|
<footer className="bg-gray-800 text-white py-6 mt-12">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
|
<div className="mb-4 md:mb-0">
|
|
<h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
|
|
<p className="text-gray-400 text-sm">
|
|
Your trusted university trading platform
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex space-x-6">
|
|
<div>
|
|
<h4 className="font-medium mb-2">Quick Links</h4>
|
|
<ul className="text-sm text-gray-400">
|
|
<li className="mb-1">
|
|
<Link to="/" className="hover:text-white transition">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li className="mb-1">
|
|
<Link to="/selling" className="hover:text-white transition">
|
|
Sell an Item
|
|
</Link>
|
|
</li>
|
|
<li className="mb-1">
|
|
<Link
|
|
to="/favorites"
|
|
className="hover:text-white transition"
|
|
>
|
|
My Favorites
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-medium mb-2">Contact</h4>
|
|
<ul className="text-sm text-gray-400">
|
|
<li className="mb-1">support@campusmarket.com</li>
|
|
<li className="mb-1">University of Calgary</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
|
|
<p>
|
|
© {new Date().getFullYear()} Campus Marketplace. All rights
|
|
reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|