@evenicanpm/storefront-core 1.6.0 → 1.8.0

package/src/pages-v2/product-list/product-list-context.tsx

@@ -15,7 +15,7 @@ import {
 } from "@msdyn365-commerce/retail-proxy";
 import { usePathname, useSearchParams } from "next/navigation";
 import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
-import React, { createContext, useCallback, useMemo } from "react";
+import React, { createContext, useCallback, useMemo, useRef } from "react";
 import {
 	buildInitialState,
 	calculatePage,
@@ -52,6 +52,7 @@ export const ProductListContext = createContext<
 const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
+	const isUserInitiated = useRef(false);
 	const [topParameter, setTopParameter] = useQueryState(
 		PageKey.TOP,
 		parseAsInteger
@@ -96,16 +97,57 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			.withOptions({ clearOnDefault: true }),
 	);
 
-	const initialState = buildInitialState(
-		pathname.split("/"),
-		topParameter,
-		pageParameter,
-		sortParameter,
-		refinerParameter,
-		searchParameter,
+	const initialState = React.useMemo(
+		() =>
+			buildInitialState(
+				pathname.split("/"),
+				topParameter,
+				pageParameter,
+				sortParameter,
+				refinerParameter,
+				searchParameter,
+			),
+		[
+			pathname,
+			topParameter,
+			pageParameter,
+			sortParameter,
+			refinerParameter,
+			searchParameter,
+		],
 	);
 	const [inputParams, setInputParams] =
 		React.useState<SearchByCriteriaInput>(initialState);
+	React.useEffect(() => {
+		if (isUserInitiated.current) {
+			return;
+		}
+
+		setInputParams((prev) => {
+			const prevRefiners = prev.searchState.refinement
+				.map((r) => convertRefinerToParameter(r))
+				.join("||");
+			if (prevRefiners === refinerParameter) {
+				return prev;
+			}
+			const newState = buildInitialState(
+				pathname.split("/"),
+				topParameter,
+				pageParameter,
+				sortParameter,
+				refinerParameter,
+				searchParameter,
+			);
+			return newState;
+		});
+	}, [
+		refinerParameter,
+		searchParameter,
+		sortParameter,
+		topParameter,
+		pageParameter,
+		pathname,
+	]);
 
 	const { data, isLoading } = getProductList.useData(inputParams);
 	const { data: productPrices } = getProductPrices.useSuspenseData({
@@ -113,45 +155,57 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 	});
 	const handleRefinerChange = useCallback(
 		(refiner: ProductRefinerValue) => {
-			const newInputParams = { ...inputParams };
-			const refiners = newInputParams.searchState.refinement;
+			isUserInitiated.current = true;
+			const refiners = inputParams.searchState.refinement;
 			const priceIndex = ProductRefinerSource.Price;
-			const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
+
+			let newRefiners: ProductRefinerValue[];
 
 			if (refiner.RefinerSourceValue === priceIndex) {
-				const priceRefiner = refiners[idx];
+				const priceRefinerIndex = refiners.findIndex(
+					(r) => r.RefinerSourceValue === priceIndex,
+				);
 
-				if (idx > -1) {
+				if (priceRefinerIndex > -1) {
+					const existingPriceRefiner = refiners[priceRefinerIndex];
 					if (
-						priceRefiner.LeftValueBoundString ===
+						existingPriceRefiner.LeftValueBoundString ===
 							refiner.LeftValueBoundString &&
-						priceRefiner.RightValueBoundString === refiner.RightValueBoundString
+						existingPriceRefiner.RightValueBoundString ===
+							refiner.RightValueBoundString
 					) {
-						refiners.splice(idx, 1);
+						newRefiners = refiners.filter((_, i) => i !== priceRefinerIndex);
 					} else {
-						priceRefiner.LeftValueBoundString = refiner.LeftValueBoundString;
-						priceRefiner.RightValueBoundString = refiner.RightValueBoundString;
+						newRefiners = refiners.map((r, i) =>
+							i === priceRefinerIndex ? refiner : r,
+						);
 					}
 				} else {
-					refiners.push(refiner);
+					newRefiners = [...refiners, refiner];
 				}
-			}
-
-			if (refiner.RefinerSourceValue !== priceIndex) {
+			} else {
+				const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
 				if (idx > -1) {
-					refiners.splice(idx, 1);
+					newRefiners = refiners.filter((_, i) => i !== idx);
 				} else {
-					refiners.push(refiner);
+					newRefiners = [...refiners, refiner];
 				}
 			}
 
-			setInputParams(newInputParams);
+			setInputParams({
+				...inputParams,
+				searchState: {
+					...inputParams.searchState,
+					refinement: newRefiners,
+				},
+			});
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handlePageChange = useCallback(
 		(page: number) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			const calculationSkip = calculateSkip(page, topParameter);
 			let paging = updatedInputParams.searchState.queryResultSettings.Paging;
@@ -159,18 +213,19 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			paging.Skip = calculationSkip;
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, topParameter, setInputParams],
+		[inputParams, topParameter],
 	);
 
 	const handlePerPageChange = useCallback(
 		(newValue: number) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			let paging = updatedInputParams.searchState.queryResultSettings.Paging;
 			paging = paging || {};
 			paging.Top = newValue;
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handleViewChange = useCallback(
@@ -182,6 +237,7 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 
 	const handleSortChange = useCallback(
 		(sort: SortOption) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			const sortOption = getSortOptions().find((s) => s.code === sort.code);
 			if (!sortOption) {
@@ -194,23 +250,25 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			];
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handleSearchChange = useCallback(
 		(searchTerm: string) => {
+			isUserInitiated.current = true;
 			const updatedInputParams = { ...inputParams };
 			updatedInputParams.searchState.searchTerm = searchTerm;
 			setInputParams(updatedInputParams);
 		},
-		[inputParams, setInputParams],
+		[inputParams],
 	);
 
 	const handleRefinersClear = useCallback(() => {
+		isUserInitiated.current = true;
 		const updatedInputParams = { ...inputParams };
 		updatedInputParams.searchState.refinement = [];
 		setInputParams(updatedInputParams);
-	}, [inputParams, setInputParams]);
+	}, [inputParams]);
 
 	const paramHandlers = useMemo(
 		() => ({
@@ -234,6 +292,10 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 	);
 
 	React.useEffect(() => {
+		if (!isUserInitiated.current) {
+			return;
+		}
+
 		const sortObj =
 			inputParams.searchState.queryResultSettings.Sorting?.Columns?.[0];
 		let sortCode = "";
@@ -246,21 +308,38 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 				)?.code || "";
 		}
 
-		setTopParameter(
-			inputParams.searchState.queryResultSettings.Paging?.Top || 20,
-		);
-		setPageParameter(
-			calculatePage(inputParams.searchState.queryResultSettings),
-		);
-		setRefinerParameter(
-			inputParams.searchState.refinement
-				.map((r) => convertRefinerToParameter(r))
-				.join("||"),
-		);
-		setSortParameter(sortCode);
-		setSearchParameter(inputParams.searchState.searchTerm || "");
+		const newTop =
+			inputParams.searchState.queryResultSettings.Paging?.Top || 20;
+		const newPage = calculatePage(inputParams.searchState.queryResultSettings);
+		const newRefiners = inputParams.searchState.refinement
+			.map((r) => convertRefinerToParameter(r))
+			.join("||");
+		const newSearch = inputParams.searchState.searchTerm || "";
+
+		if (topParameter !== newTop) {
+			setTopParameter(newTop);
+		}
+		if (pageParameter !== newPage) {
+			setPageParameter(newPage);
+		}
+		if (refinerParameter !== newRefiners) {
+			setRefinerParameter(newRefiners);
+		}
+		if (sortParameter !== sortCode) {
+			setSortParameter(sortCode);
+		}
+		if (searchParameter !== newSearch) {
+			setSearchParameter(newSearch);
+		}
+
+		isUserInitiated.current = false;
 	}, [
 		inputParams,
+		topParameter,
+		pageParameter,
+		refinerParameter,
+		sortParameter,
+		searchParameter,
 		setPageParameter,
 		setRefinerParameter,
 		setSearchParameter,

package/src/pages-v2/product-list/range-filter.tsx

@@ -6,7 +6,7 @@ import {
 } from "@msdyn365-commerce/retail-proxy";
 import { Box, Slider, TextField, Typography } from "@mui/material";
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { RenderedFacetProps } from "./facet-group";
 
 type Props = RenderedFacetProps & {
@@ -17,6 +17,7 @@ export default function RangeFilter({
 	handleRefinerSelect,
 	selectedValues,
 }: Props) {
+	const isUserInteraction = useRef(false);
 	const getMinValForSlider = () => {
 		const item = facet.Values?.[0];
 		if (item) {
@@ -36,58 +37,68 @@ export default function RangeFilter({
 	const [maxVal, setMaxVal] = useState<number>(getMaxValForSlider());
 	const [textMin, setTextMin] = useState<number>(getMinValForSlider());
 	const [textMax, setTextMax] = useState<number>(getMaxValForSlider());
-	const [selected, setSelected] = useState<boolean>(false);
 
+	// Sync slider position when selectedValues changes from URL
 	useEffect(() => {
 		if (selectedValues) {
-			setMinVal(Number(selectedValues.LeftValueBoundString));
-			setMaxVal(Number(selectedValues.RightValueBoundString));
-			setTextMin(Number(selectedValues.LeftValueBoundString));
-			setTextMax(Number(selectedValues.RightValueBoundString));
+			const newMin = Number(selectedValues.LeftValueBoundString);
+			const newMax = Number(selectedValues.RightValueBoundString);
+			// Only sync from URL if not from user interaction
+			if (
+				!isUserInteraction.current &&
+				(minVal !== newMin || maxVal !== newMax)
+			) {
+				setMinVal(newMin);
+				setMaxVal(newMax);
+				setTextMin(newMin);
+				setTextMax(newMax);
+			}
 		}
-	}, [selectedValues]);
+	}, [selectedValues, minVal, maxVal]);
+
+	const pushPriceFilter = useCallback(() => {
+		const refiner: ProductRefinerValue = {
+			RefinerRecordId: 0,
+			RefinerSourceValue: ProductRefinerSource.Price,
+			LeftValueBoundString: minVal.toString(),
+			RightValueBoundString: maxVal.toString(),
+			DataTypeValue: 1,
+		};
+		handleRefinerSelect(refiner);
+		// Reset flag after pushing
+		isUserInteraction.current = false;
+	}, [minVal, maxVal, handleRefinerSelect]);
 
 	useEffect(() => {
-		// debouncing
+		if (!isUserInteraction.current) {
+			return;
+		}
 		const request = setTimeout(pushPriceFilter, 600);
 		return () => clearTimeout(request);
-	});
+	}, [pushPriceFilter]);
 
 	const handleSliderChange = (_: Event, newValue: number | number[]) => {
+		isUserInteraction.current = true;
 		if (Array.isArray(newValue)) {
 			setMinVal(Number(newValue[0]));
 			setTextMin(Number(newValue[0]));
 			setMaxVal(Number(newValue[1]));
 			setTextMax(Number(newValue[1]));
-			setSelected(true);
 		}
 	};
 
 	const handleTextMin = (evt: React.ChangeEvent<HTMLInputElement>) => {
+		isUserInteraction.current = true;
 		const val = Number(evt.target.value);
 		setTextMin(val);
 		setMinVal(val);
-		setSelected(true);
 	};
 
 	const handleTextMax = (evt: React.ChangeEvent<HTMLInputElement>) => {
+		isUserInteraction.current = true;
 		const val = Number(evt.target.value);
 		setTextMax(val);
 		setMaxVal(val);
-		setSelected(true);
-	};
-
-	const pushPriceFilter = () => {
-		if (selected) {
-			const refiner: ProductRefinerValue = {
-				RefinerRecordId: 0,
-				RefinerSourceValue: ProductRefinerSource.Price,
-				LeftValueBoundString: minVal.toString(),
-				RightValueBoundString: maxVal.toString(),
-				DataTypeValue: 1,
-			};
-			handleRefinerSelect(refiner);
-		}
 	};
 
 	return (

package/src/pages-v2/product-list/selected-facets.tsx

@@ -62,14 +62,21 @@ export default function SelectedFacets() {
 
 	return (
 		<Stack direction={"row"} spacing={2}>
-			{selectedRefiners.map((refiner) => (
-				<Chip
-					key={`${refiner.RefinerRecordId}-${refiner.LeftValueBoundString}`}
-					title={refiner.LeftValueBoundString}
-					label={`${getRefinerLabel(refiner)}: ${getRefinerValue(refiner)}`}
-					onDelete={() => handleRefinerChange(refiner)}
-				/>
-			))}
+			{selectedRefiners.map((refiner, _) => {
+				// For price refiners (RefinerRecordId is always 0), use index + source value for unique key
+				const key =
+					refiner.RefinerSourceValue === ProductRefinerSource.Price
+						? `price-${refiner.LeftValueBoundString}-${refiner.RightValueBoundString}`
+						: `${refiner.RefinerRecordId}-${refiner.LeftValueBoundString}`;
+				return (
+					<Chip
+						key={key}
+						title={refiner.LeftValueBoundString}
+						label={`${getRefinerLabel(refiner)}: ${getRefinerValue(refiner)}`}
+						onDelete={() => handleRefinerChange(refiner)}
+					/>
+				);
+			})}
 			{selectedRefiners.length > 0 ? (
 				<Button variant={"text"} sx={{ ml: 2 }} onClick={handleRefinersClear}>
 					<Paragraph>{t("clearAll")}</Paragraph>