Skip to content

Commit

Permalink
Made the image area on listing clickable
Browse files Browse the repository at this point in the history
  • Loading branch information
YaroslavKSE committed Jul 26, 2024
1 parent 2ca8b01 commit cf30232
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 6 deletions.
1 change: 1 addition & 0 deletions react-frontend/src/components/Listing/Listing.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
width: 100%;
height: 200px;
overflow: hidden;
cursor: pointer;
}

.listing__image {
Expand Down
21 changes: 15 additions & 6 deletions react-frontend/src/components/Listing/Listing.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit cf30232

Please sign in to comment.