Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improved carousal #365

Closed
wants to merge 1 commit into from
Closed

improved carousal #365

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions frontend/src/components/ui/ReviewCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,16 @@ const ReviewCarousel = () => {

const nextSlide = () => {
setCurrentIndex((prevIndex) =>
prevIndex === reviews.length - 4 ? 0 : prevIndex + 1
prevIndex === reviews.length - 6 ? 0 : prevIndex + 1
);
};
Comment on lines +74 to 76
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Consider making the slide reset condition dynamic based on cardsToShow.

The current reset condition in nextSlide uses a hardcoded value reviews.length - 6, which may not accurately reflect the number of cards to show when cardsToShow changes. This could lead to unexpected behavior, especially if the number of reviews or the cardsToShow value changes in the future.

To ensure correct functionality, adjust the reset condition to depend on cardsToShow:

setCurrentIndex((prevIndex) =>
-  prevIndex === reviews.length - 6 ? 0 : prevIndex + 1
+  prevIndex === reviews.length - cardsToShow ? 0 : prevIndex + 1
);

This change makes the carousel dynamically adapt to the number of cards displayed.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
prevIndex === reviews.length - 6 ? 0 : prevIndex + 1
);
};
prevIndex === reviews.length - cardsToShow ? 0 : prevIndex + 1
);
};


const prevSlide = () => {
setCurrentIndex((prevIndex) =>
prevIndex === 0 ? reviews.length - 4 : prevIndex - 1
prevIndex === 0 ? reviews.length - 6 : prevIndex - 1
);
};
Comment on lines +80 to 82
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Update prevSlide reset condition to use cardsToShow dynamically.

Similar to nextSlide, the prevSlide function uses a hardcoded value which may not align with the dynamic cardsToShow state. Adjusting the reset condition will ensure consistency and correct navigation:

setCurrentIndex((prevIndex) =>
-  prevIndex === 0 ? reviews.length - 6 : prevIndex - 1
+  prevIndex === 0 ? reviews.length - cardsToShow : prevIndex - 1
);

This change ensures that the previous slide logic correctly accounts for the number of cards displayed.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
prevIndex === 0 ? reviews.length - 6 : prevIndex - 1
);
};
prevIndex === 0 ? reviews.length - cardsToShow : prevIndex - 1
);
};


const [cardsToShow, setCardsToShow] = useState(1);

const updateCardsToShow = () => {
Expand All @@ -94,7 +95,10 @@ const ReviewCarousel = () => {
updateCardsToShow();
window.addEventListener('resize', updateCardsToShow);

const intervalId = setInterval(nextSlide, 3000); // Change slide every 3 seconds

return () => {
clearInterval(intervalId); // Cleanup interval on unmount
window.removeEventListener('resize', updateCardsToShow);
Comment on lines +98 to 102
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Ensure nextSlide uses the latest cardsToShow value within the interval.

Since cardsToShow can change due to window resizing, the nextSlide function inside the setInterval may capture an outdated value of cardsToShow due to closure scope. This can lead to incorrect slide transitions after a resize.

Consider the following options to ensure nextSlide always has the latest cardsToShow:

  • Option 1: Include cardsToShow in the dependency array of the useEffect:

    useEffect(() => {
  updateCardsToShow();
  window.addEventListener('resize', updateCardsToShow);

  const intervalId = setInterval(nextSlide, 3000); // Change slide every 3 seconds

  return () => {
    clearInterval(intervalId); // Cleanup interval on unmount
    window.removeEventListener('resize', updateCardsToShow);
  };
-}, []);
+}, [cardsToShow]);

  • Option 2: Use a functional update in setInterval to ensure the latest state is used.

Committable suggestion was skipped due to low confidence.

};
}, []);
Expand All @@ -107,8 +111,8 @@ const ReviewCarousel = () => {
</h1>
</div>

<div className="bg-[#004D43] h-full p-4 md:p-20 items-center justify-center flex relative ">
<div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden ">
<div className="bg-[#004D43] h-full p-4 md:p-20 items-center justify-center flex relative">
<div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden">
<div
className="flex transition-transform duration-300 ease-in-out"
style={{
Expand All @@ -123,11 +127,6 @@ const ReviewCarousel = () => {
>
<div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-200 z-10 overflow-hidden">
<div className="flex flex-col items-center justify-center mb-1">
{/* <img
src={review.img}
alt=""
className="w-20 h-20 rounded-full"
/> */}
<LazyLoadImage
alt={`${index}img`}
effect="blur"
Expand Down Expand Up @@ -170,7 +169,7 @@ const ReviewCarousel = () => {
<>
<button
onClick={prevSlide}
className="absolute hidden p-2 transform -translate-y-1/2 bg-white rounded-full md:block left-10 top-1/2"
className="absolute hidden p-2 transform -translate-y-1/2 bg-white rounded-full md:block left-10 top-1/2"
>
<MdArrowBackIos className="text-[#004D43]" size={18} />
</button>
Expand Down