added Review Feature

frontend/src/pages/Home.jsx

@@ -6,6 +6,7 @@ const Home = () => {
   const navigate = useNavigate();
   const [listings, setListings] = useState([]);
   const [recommended, setRecommended] = useState([]);
+  const [history, sethistory] = useState([]);
   const [error, setError] = useState(null);
 
   useEffect(() => {
@@ -38,7 +39,6 @@ const Home = () => {
               price: product.Price,
               category: product.Category, // Ensure this gets the category name
               image: product.ProductImage, // Use the alias for image URL
-              condition: "New", // Modify based on actual data
               seller: product.SellerName, // Fetch seller name properly
               datePosted: product.DateUploaded, // Use the actual date
               isFavorite: false, // Default state
@@ -73,7 +73,6 @@ const Home = () => {
               price: product.Price,
               category: product.Category, // Ensure this gets the category name
               image: product.ProductImage, // Use the alias for image URL
-              condition: "New", // Modify based on actual data
               seller: product.SellerName, // Fetch seller name properly
               datePosted: product.DateUploaded, // Use the actual date
               isFavorite: false, // Default state
@@ -90,6 +89,49 @@ const Home = () => {
     fetchProducts();
   }, []);
 
+  useEffect(() => {
+    const fetchrecomProducts = async () => {
+      // Get the user's data from localStorage
+      const storedUser = JSON.parse(sessionStorage.getItem("user"));
+      console.log(storedUser);
+      try {
+        const response = await fetch("http://localhost:3030/api/get/history", {
+          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();
+        console.log(data);
+        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
+              isFavorite: false, // Default state
+            })),
+          );
+        } else {
+          throw new Error(data.message || "Error fetching products");
+        }
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setError(error.message);
+      }
+    };
+    fetchrecomProducts();
+  }, []);
+
   // Toggle favorite status
   const toggleFavorite = (id, e) => {
     e.preventDefault(); // Prevent navigation when clicking the heart icon
@@ -138,26 +180,6 @@ const Home = () => {
         </div>
       </div>
 
-      {/* Categories */}
-      {/* <div className="mb-8">
-        <h2 className="text-xl font-semibold text-gray-800 mb-4">Categories</h2>
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-          {categories.map((category) => (
-            <button
-              key={category.id}
-              className="flex flex-col items-center justify-center p-4 bg-white border border-gray-200 hover:border-green-500 hover:shadow-sm"
-            >
-              <div className="flex items-center justify-center w-12 h-12 bg-green-50 text-green-600 rounded-full mb-2">
-                {category.icon}
-              </div>
-              <span className="text-sm font-medium text-gray-700">
-                {category.name}
-              </span>
-            </button>
-          ))}
-        </div>
-      </div> */}
-
       {/* Recent Listings */}
       <div className="relative py-4">
         <h2 className="text-xl font-semibold text-gray-800 mb-4">
@@ -219,8 +241,6 @@ const Home = () => {
                   <div className="flex items-center text-sm text-gray-500 mt-2">
                     <Tag className="h-4 w-4 mr-1" />
                     <span>{recommended.category}</span>
-                    <span className="mx-2">•</span>
-                    <span>{recommended.condition}</span>
                   </div>
 
                   <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
@@ -311,8 +331,6 @@ const Home = () => {
                   <div className="flex items-center text-sm text-gray-500 mt-2">
                     <Tag className="h-4 w-4 mr-1" />
                     <span>{listing.category}</span>
-                    <span className="mx-2">•</span>
-                    <span>{listing.condition}</span>
                   </div>
 
                   <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
@@ -341,6 +359,94 @@ const Home = () => {
           </button>
         </div>
       </div>
+
+      {/* Recent Listings */}
+      <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"
+          >
+            ◀
+          </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) => toggleFavorite(history.id, e)}
+                    className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm"
+                  >
+                    <Heart
+                      className={`h-6 w-6 ${
+                        history.isFavorite
+                          ? "text-red-500 fill-red-500"
+                          : "text-gray-400"
+                      }`}
+                    />
+                  </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-green-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"
+          >
+            ▶
+          </button>
+        </div>
+      </div>
     </div>
   );
 };