PWA-3389-Price slider implementation (#4386)

del22123 · web-flow · commit 39a2ee7ee3ca · 2025-02-05T16:23:41.000+05:30
diff --git a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { act } from 'react-test-renderer';
-
+import { MemoryRouter } from 'react-router-dom';
 import { createTestInstance } from '@magento/peregrine';
 import { useFilterBlock } from '../useFilterBlock';
 
@@ -56,7 +56,11 @@ describe('#useFilterBlock', () => {
     });
 
     it('is closed by default', () => {
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(log).toHaveBeenCalledWith({
             handleClick: expect.any(Function),
@@ -66,7 +70,11 @@ describe('#useFilterBlock', () => {
 
     it('is open if passed initially open', () => {
         givenInitiallyOpen();
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(log).toHaveBeenCalledWith({
             handleClick: expect.any(Function),
@@ -76,7 +84,11 @@ describe('#useFilterBlock', () => {
 
     it('is open if items are selected', () => {
         givenSelectedItems();
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(log).toHaveBeenCalledWith({
             handleClick: expect.any(Function),
@@ -85,7 +97,11 @@ describe('#useFilterBlock', () => {
     });
 
     it('can toggle visibility', () => {
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(typeof handleClickProp).toBe('function');
 
diff --git a/packages/peregrine/lib/talons/FilterModal/helpers.js b/packages/peregrine/lib/talons/FilterModal/helpers.js
@@ -54,7 +54,7 @@ export const getStateFromSearch = (initialValue, filterKeys, filterItems) => {
 
                 if (existingFilter) {
                     items.add(existingFilter);
-                } else {
+                } else if (group !== 'price') {
                     console.warn(
                         `Existing filter ${value} not found in possible filters`
                     );
diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js b/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js
@@ -1,13 +1,20 @@
 import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 
 export const useFilterBlock = props => {
-    const { filterState, items, initialOpen } = props;
+    const { filterState, items, initialOpen, group } = props;
+    const location = useLocation();
 
     const hasSelected = useMemo(() => {
+        const params = new URLSearchParams(location.search);
+        //expansion of price filter dropdown
+        if (group == 'price') {
+            return params.get('price[filter]') ? true : false;
+        }
         return items.some(item => {
             return filterState && filterState.has(item);
         });
-    }, [filterState, items]);
+    }, [filterState, items, group, location.search]);
 
     const [isExpanded, setExpanded] = useState(hasSelected || initialOpen);
 
diff --git a/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js b/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js
@@ -182,9 +182,10 @@ export const useFilterSidebar = props => {
     }, [handleClose]);
 
     const handleReset = useCallback(() => {
-        filterApi.clear();
-        setIsApplying(true);
-    }, [filterApi, setIsApplying]);
+        //filterApi.clear();
+        //setIsApplying(true);
+        history.replace({ search: 'page=1' });
+    }, [history]);
 
     const handleKeyDownActions = useCallback(
         event => {
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -19,7 +20,11 @@ jest.mock('../../../Trigger', () => props => <mock-Trigger {...props} />);
 let inputProps = {};
 
 const Component = () => {
-    return <CurrentFilter {...inputProps} />;
+    return (
+        <MemoryRouter>
+            <CurrentFilter {...inputProps} />
+        </MemoryRouter>
+    );
 };
 
 const givenDefaultValues = () => {
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { shape, string, func } from 'prop-types';
 import { X as Remove } from 'react-feather';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
@@ -12,13 +13,22 @@ const CurrentFilter = props => {
     const { group, item, removeItem, onRemove } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
+    const location = useLocation();
+    const history = useHistory();
 
     const handleClick = useCallback(() => {
         removeItem({ group, item });
         if (typeof onRemove === 'function') {
             onRemove(group, item);
         }
-    }, [group, item, removeItem, onRemove]);
+
+        if (group == 'price') {
+            // preserve all existing params
+            const params = new URLSearchParams(location.search);
+            params.delete('price[filter]');
+            history.replace({ search: params.toString() });
+        }
+    }, [group, item, removeItem, onRemove, history, location.search]);
 
     const ariaLabel = formatMessage(
         {
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js b/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -67,7 +68,11 @@ describe('#FilterList', () => {
     });
 
     it('renders without show more button', () => {
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(root.findAllByType(FilterItem)).toHaveLength(2);
         expect(() => root.findByType('button')).toThrow();
@@ -76,7 +81,11 @@ describe('#FilterList', () => {
     it('renders with show more button', () => {
         givenShowMore();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowMore);
@@ -86,7 +95,11 @@ describe('#FilterList', () => {
         givenShowMore();
         givenExpanded();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowLess);
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment, useMemo, useCallback } from 'react';
 import { array, func, number, shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 import setValidator from '@magento/peregrine/lib/validators/set';
@@ -8,6 +8,8 @@ import { useStyle } from '../../../classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
+import RangeSlider from '../../RangeSlider/rangeSlider';
+import { useHistory, useLocation } from 'react-router-dom';
 
 const labels = new WeakMap();
 
@@ -22,13 +24,46 @@ const FilterList = props => {
         items,
         onApply
     } = props;
+    const { pathname, search } = useLocation();
+    const history = useHistory();
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useFilterList({ filterState, items, itemCountToShow });
     const { isListExpanded, handleListToggle } = talonProps;
     const { formatMessage } = useIntl();
 
-    // memoize item creation
-    // search value is not referenced, so this array is stable
+    if (name === 'Price') {
+        var minRange = Number(items[0].value.split('_')[0]);
+        var maxRange = Number(items[items.length - 1].value.split('_')[1]);
+        if (filterState !== undefined) {
+            const filterArray = [...filterState];
+            var currentMinVal = Number(filterArray[0].value.split('_')[0]);
+            var currentMaxVal = Number(filterArray[0].value.split('_')[1]);
+        }
+    }
+
+    const handleChange = useCallback(
+        newValue => {
+            const test = String(search).split('&');
+            const filters = test.filter(element => {
+                return !element.includes('price');
+            });
+            const newSearch = filters.join('&');
+            const nextParams = new URLSearchParams(newSearch);
+
+            const DELIMITER = ',';
+            const title = String(newValue.min) + '-' + String(newValue.max);
+            const value = String(newValue.min) + '_' + String(newValue.max);
+            nextParams.append(
+                `${group}[filter]`,
+                `${title}${DELIMITER}${value}`
+            );
+
+            history.push({ pathname, search: String(nextParams) });
+        },
+        [group, history, pathname, search]
+    );
+
+    // Memoize item creation
     const itemElements = useMemo(() => {
         if (filterFrontendInput === 'boolean') {
             const key = `item-${group}`;
@@ -51,36 +86,46 @@ const FilterList = props => {
             );
         }
 
-        return items.map((item, index) => {
-            const { title, value } = item;
-            const key = `item-${group}-${value}`;
-
-            if (!isListExpanded && index >= itemCountToShow) {
-                return null;
-            }
-
-            // create an element for each item
-            const element = (
-                <li
-                    key={key}
-                    className={classes.item}
-                    data-cy="FilterList-item"
-                >
-                    <FilterItem
-                        filterApi={filterApi}
-                        filterState={filterState}
-                        group={group}
-                        item={item}
-                        onApply={onApply}
+        if (name === 'Price') {
+            return (
+                <div className={classes.root}>
+                    <RangeSlider
+                        min={minRange}
+                        max={maxRange}
+                        initialMin={currentMinVal}
+                        initialMax={currentMaxVal}
+                        onChange={handleChange}
                     />
-                </li>
+                </div>
             );
+        } else {
+            return items.map((item, index) => {
+                const { title, value } = item;
+                const key = `item-${group}-${value}`;
+
+                if (!isListExpanded && index >= itemCountToShow) {
+                    return null;
+                }
 
-            // associate each element with its normalized title
-            // titles are not unique, so use the element as the key
-            labels.set(element, title.toUpperCase());
-            return element;
-        });
+                const element = (
+                    <li
+                        key={key}
+                        className={classes.item}
+                        data-cy="FilterList-item"
+                    >
+                        <FilterItem
+                            filterApi={filterApi}
+                            filterState={filterState}
+                            group={group}
+                            item={item}
+                            onApply={onApply}
+                        />
+                    </li>
+                );
+                labels.set(element, title.toUpperCase());
+                return element;
+            });
+        }
     }, [
         classes,
         filterApi,
@@ -91,7 +136,12 @@ const FilterList = props => {
         items,
         isListExpanded,
         itemCountToShow,
-        onApply
+        onApply,
+        minRange,
+        maxRange,
+        currentMinVal,
+        currentMaxVal,
+        handleChange
     ]);
 
     const showMoreLessItem = useMemo(() => {
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -28,7 +28,8 @@ const FilterBlock = props => {
     const talonProps = useFilterBlock({
         filterState,
         items,
-        initialOpen
+        initialOpen,
+        group
     });
     const { handleClick, isExpanded } = talonProps;
     const iconSrc = isExpanded ? ArrowUp : ArrowDown;
diff --git a/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js b/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
diff --git a/packages/venia-ui/lib/components/RangeSlider/rangeSlider.js b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.js
diff --git a/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css
