From cf30232509c6c74457e7c68c12b1559661b3ec84 Mon Sep 17 00:00:00 2001
From: YaroslavKSE <ikhomych@kse.org.ua>
Date: Fri, 26 Jul 2024 14:42:12 +0300
Subject: [PATCH] Made the image area on listing clickable

---
 .../src/components/Listing/Listing.css        |  1 +
 .../src/components/Listing/Listing.js         | 21 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/react-frontend/src/components/Listing/Listing.css b/react-frontend/src/components/Listing/Listing.css
index 2d21513..c4ddd79 100644
--- a/react-frontend/src/components/Listing/Listing.css
+++ b/react-frontend/src/components/Listing/Listing.css
@@ -19,6 +19,7 @@
   width: 100%;
   height: 200px;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .listing__image {
diff --git a/react-frontend/src/components/Listing/Listing.js b/react-frontend/src/components/Listing/Listing.js
index 1a45f2e..7f87b37 100644
--- a/react-frontend/src/components/Listing/Listing.js
+++ b/react-frontend/src/components/Listing/Listing.js
@@ -55,16 +55,25 @@ const Listing = ({
       setTimeout(() => setAlertMessage(null), 2000)
     }
   }
+  const handleNextImageClick = (e) => {
+    e.stopPropagation(); // Prevent event from bubbling up
+    handleNextImage();
+  };
+
+  const handleWatchlistToggleClick = (e) => {
+    e.stopPropagation(); // Prevent event from bubbling up
+    handleWatchlistToggle();
+  };
 
   return (
-    <div className="listing">
+    <div className="listing" onClick={onClick}>
       <div className="listing__image-container">
         <img src={images[currentImageIndex]} alt={title} className="listing__image" />
-        <button className="next-image-button" onClick={handleNextImage}>
+        <button className="next-image-button" onClick={handleNextImageClick}>
           <img src={nextIcon} alt="Next" className="next-icon" />
         </button>
       </div>
-      <div className="listing__details" onClick={onClick}>
+      <div className="listing__details">
         <div className="listing__title">{title}</div>
         <div className="listing__price">
           {price} {currency}
@@ -72,14 +81,14 @@ const Listing = ({
         <div className="listing__created-at">{createdAt}</div>
       </div>
       {showWatchlistIcon && (
-        <div className="listing__watchlist" onClick={handleWatchlistToggle}>
+        <div className="listing__watchlist" onClick={handleWatchlistToggleClick}>
           <img src={isInWatchlist ? heartFull : heartTransparent} alt="Watchlist" />
         </div>
       )}
       {alertMessage && <Alert message={alertMessage} />}
     </div>
-  )
-}
+  );
+};
 
 Listing.propTypes = {
   images: PropTypes.arrayOf(PropTypes.string).isRequired,