From 947f877e9725c39f1f426cc7c245c0295b36f3f9 Mon Sep 17 00:00:00 2001 From: Pranay Kumar Karvi Date: Sat, 8 Feb 2025 01:21:42 +0530 Subject: [PATCH 1/3] fix: resolved UI inconsistencies on product details page --- frontend/src/pages/Products/Favorites.jsx | 54 +++++++++++++---------- 1 file changed, 31 insertions(+), 23 deletions(-) diff --git a/frontend/src/pages/Products/Favorites.jsx b/frontend/src/pages/Products/Favorites.jsx index b7efded..75f0de6 100644 --- a/frontend/src/pages/Products/Favorites.jsx +++ b/frontend/src/pages/Products/Favorites.jsx @@ -1,23 +1,23 @@ import { useSelector } from "react-redux"; import { Link } from "react-router-dom"; -import { useCart } from '../../components/CartContext'; +import { useCart } from "../../components/CartContext"; import { toast } from "react-toastify"; import HeartIcon from "./HeartIcon"; -import { useState } from "react"; +import { useState, useMemo } from "react"; + const Favorites = () => { const favorites = useSelector((state) => state.favorites?.favorites || []); const { addToCart } = useCart(); const [sortBy, setSortBy] = useState(""); -// Apply filtering based on the selected filter -const filteredFavorites = [...favorites].sort((a, b) => { - if (sortBy === "cheapest") { - return a.price - b.price; // Sort by cheapest - } else if (sortBy === "expensive") { - return b.price - a.price; // Sort by most expensive - } - return 0; // no sorting - }); + // Optimize sorting using useMemo to avoid unnecessary recalculations + const filteredFavorites = useMemo(() => { + return [...favorites].sort((a, b) => { + if (sortBy === "cheapest") return a.price - b.price; + if (sortBy === "expensive") return b.price - a.price; + return 0; // No sorting + }); + }, [favorites, sortBy]); return (
@@ -26,18 +26,16 @@ const filteredFavorites = [...favorites].sort((a, b) => {

Your Favorites

-

+

{favorites.length === 0 ? "No favorite products yet" : `${favorites.length} favorite products`}

-
-