Made the image area on listing clickable

react-frontend/src/components/Listing/Listing.css

@@ -19,6 +19,7 @@
   width: 100%;
   height: 200px;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .listing__image {

react-frontend/src/components/Listing/Listing.js

@@ -55,31 +55,40 @@ 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}
         </div>
         <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,