Transaction frontend update
Included a default message when no items are in the table
This commit is contained in:
aruhani
@@ -1,8 +1,266 @@
|
||||
import { useState } from "react";
|
||||
// import { useState } from "react";
|
||||
// import { Link } from "react-router-dom";
|
||||
|
||||
// const Transactions = () => {
|
||||
// return <div></div>;
|
||||
// };
|
||||
|
||||
// export default Transactions;
|
||||
|
||||
|
||||
// import { useState, useEffect } from "react";
|
||||
|
||||
// const Transactions = () => {
|
||||
// const [transactions, setTransactions] = useState([]);
|
||||
// const [isLoading, setIsLoading] = useState(true);
|
||||
// const [error, setError] = useState(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// const fetchTransactions = async () => {
|
||||
// try {
|
||||
// setIsLoading(true);
|
||||
// setError(null);
|
||||
|
||||
// const response = await fetch(
|
||||
// "http://localhost:3030/api/transaction/getAllTransactions"
|
||||
// );
|
||||
// const result = await response.json();
|
||||
|
||||
// if (!response.ok) {
|
||||
// throw new Error(result.error || "Failed to fetch transactions");
|
||||
// }
|
||||
|
||||
// setTransactions(result.transactions);
|
||||
// } catch (err) {
|
||||
// setError(err.message);
|
||||
// } finally {
|
||||
// setIsLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// fetchTransactions();
|
||||
// }, []);
|
||||
|
||||
// if (isLoading) {
|
||||
// return <div>Loading transactions...</div>;
|
||||
// }
|
||||
|
||||
// if (error) {
|
||||
// return <div className="text-red-600">Error: {error}</div>;
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div className="p-4">
|
||||
// <h1 className="text-2xl font-semibold mb-4">All Transactions</h1>
|
||||
// {transactions.length === 0 ? (
|
||||
// <p>No transactions found.</p>
|
||||
// ) : (
|
||||
// <table className="min-w-full border-collapse">
|
||||
// <thead>
|
||||
// <tr>
|
||||
// <th className="border px-2 py-1">Transaction ID</th>
|
||||
// <th className="border px-2 py-1">User ID</th>
|
||||
// <th className="border px-2 py-1">Product ID</th>
|
||||
// <th className="border px-2 py-1">Date</th>
|
||||
// <th className="border px-2 py-1">Payment Status</th>
|
||||
// </tr>
|
||||
// </thead>
|
||||
// <tbody>
|
||||
// {transactions.map((tx) => (
|
||||
// <tr key={tx.TransactionID}>
|
||||
// <td className="border px-2 py-1">{tx.TransactionID}</td>
|
||||
// <td className="border px-2 py-1">{tx.UserID}</td>
|
||||
// <td className="border px-2 py-1">{tx.ProductID}</td>
|
||||
// <td className="border px-2 py-1">
|
||||
// {new Date(tx.Date).toLocaleString()}
|
||||
// </td>
|
||||
// <td className="border px-2 py-1">{tx.PaymentStatus}</td>
|
||||
// </tr>
|
||||
// ))}
|
||||
// </tbody>
|
||||
// </table>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Transactions;
|
||||
// src/pages/Transactions.jsx
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Calendar, CreditCard } from "lucide-react";
|
||||
|
||||
const Transactions = () => {
|
||||
return <div></div>;
|
||||
const [transactions, setTransactions] = useState([]);
|
||||
const storedUser = JSON.parse(sessionStorage.getItem("user"));
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTransactions = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
"http://localhost:3030/api/product/getTransactions",
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userID: storedUser.ID }),
|
||||
}
|
||||
);
|
||||
const data = await response.json();
|
||||
const txData = data.transactions;
|
||||
|
||||
if (!Array.isArray(txData)) {
|
||||
console.error("Expected an array but got:", txData);
|
||||
return;
|
||||
}
|
||||
|
||||
const transformed = txData.map((tx) => ({
|
||||
id: tx.TransactionID,
|
||||
productId: tx.ProductID,
|
||||
name: tx.ProductName,
|
||||
price: tx.Price ? parseFloat(tx.Price) : null,
|
||||
image: tx.image_url || "/default-image.jpg",
|
||||
date: tx.Date,
|
||||
status: tx.PaymentStatus,
|
||||
}));
|
||||
|
||||
setTransactions(transformed);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch transactions:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTransactions();
|
||||
}, []);
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const d = new Date(dateString);
|
||||
return d.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
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 Transactions</h1>
|
||||
</div>
|
||||
|
||||
{transactions.length === 0 ? (
|
||||
<div className="bg-white border border-gray-200 p-8 text-center">
|
||||
<CreditCard className="h-12 w-12 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-medium text-gray-700 mb-2">
|
||||
No transactions yet
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-4">
|
||||
Once you make a purchase, your transactions will appear here.
|
||||
</p>
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
|
||||
>
|
||||
Browse Listings
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{transactions.map((tx) => (
|
||||
<div
|
||||
key={tx.id}
|
||||
className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
|
||||
>
|
||||
<Link to={`/product/${tx.productId}`}>
|
||||
<div className="h-48 bg-gray-200 flex items-center justify-center">
|
||||
{tx.image ? (
|
||||
<img
|
||||
src={tx.image}
|
||||
alt={tx.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-400">No image</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800">
|
||||
{tx.name}
|
||||
</h3>
|
||||
{tx.price !== null && (
|
||||
<p className="text-emerald-600 font-bold mt-1">
|
||||
${tx.price.toFixed(2)}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center text-gray-500 text-sm mt-2">
|
||||
<Calendar className="mr-1" size={16} />{" "}
|
||||
{formatDate(tx.date)}
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mt-1">
|
||||
Status: <span className="font-medium">{tx.status}</span>
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{transactions.length > 0 && (
|
||||
<div className="mt-6 text-sm text-gray-500">
|
||||
Showing {transactions.length}{" "}
|
||||
{transactions.length === 1 ? "transaction" : "transactions"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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 Transactions;
|
||||
|
||||
Reference in New Issue
Block a user