PWA-3162-V3::Price filter change in sidebar (#4164)

glo80771 · devpatil7 · glo82145 · web-flow · commit f58bed1af91f · 2024-03-20T20:03:24.000+05:30
* PWA-3162-V3::Price filter change in sidebar

* PWA-3162-V3::testing the library issue

* PWA-3162-V3::Testing with the library

* PWA-3162-V3::Resolved filter dropdown

* test

* test

* test

---------

Co-authored-by: Devagouda Patil &lt;depatil@adobe.com&gt;
Co-authored-by: Aanchal Pawar &lt;97873570+glo82145@users.noreply.github.com&gt;
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "watch:venia": "yarn venia run watch"
   },
   "dependencies": {
+    "@material-ui/core": "~4.12.4",
     "caniuse-lite": "~1.0.30001335"
   },
   "devDependencies": {
@@ -115,4 +116,4 @@
       "maxSize": "100 kB"
     }
   ]
-}
+}
diff --git a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js
@@ -6,6 +6,10 @@ import { useFilterBlock } from '../useFilterBlock';
 
 const log = jest.fn();
 
+jest.mock('react-router-dom', () => ({
+    useLocation: jest.fn(() => ({ search: '?a=b&c=d' }))
+}));
+
 let handleClickProp = null;
 let inputValues = {};
 
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/__tests__/useFilterSidebar.spec.js b/packages/peregrine/lib/talons/FilterSidebar/__tests__/useFilterSidebar.spec.js
@@ -68,6 +68,7 @@ jest.mock('react-router-dom', () => ({
     useHistory: jest.fn(() => ({ push: jest.fn() })),
     useLocation: jest.fn(() => ({ pathname: '', search: '' }))
 }));
+
 const mockPush = jest.fn();
 useHistory.mockImplementation(() => ({ push: mockPush }));
 
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
@@ -16,6 +16,11 @@ const mockOnRemove = jest.fn();
 
 jest.mock('../../../Trigger', () => props => <mock-Trigger {...props} />);
 
+jest.mock('react-router-dom', () => ({
+    useLocation: jest.fn(() => ({ search: '?a=b&c=d' })),
+    useHistory: jest.fn()
+}));
+
 let inputProps = {};
 
 const Component = () => {
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
@@ -7,18 +7,28 @@ import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
 import Trigger from '../../Trigger';
 import defaultClasses from './currentFilter.module.css';
+import { useHistory, useLocation } from 'react-router-dom';
 
 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
@@ -33,6 +33,11 @@ jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
     })
 }));
 
+jest.mock('react-router-dom', () => ({
+    useHistory: jest.fn(() => ({ push: jest.fn() })),
+    useLocation: jest.fn(() => ({ pathname: '', search: '' }))
+}));
+
 let inputProps = {};
 
 const Component = () => {
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
@@ -8,6 +8,8 @@ import { useStyle } from '../../../classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
+import Slider from '@material-ui/core/Slider';
+import { useHistory, useLocation } from 'react-router-dom';
 
 const labels = new WeakMap();
 
@@ -22,11 +24,22 @@ 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();
 
+    if (name == 'Price') {
+        var minRange = Number(items[0].value.split('_')[0]);
+        var maxRange = Number(items[items.length - 1].value.split('_')[1]);
+    }
+    const [value, setValue] = React.useState([
+        minRange ? minRange : null,
+        maxRange ? maxRange : null
+    ]);
+
     // memoize item creation
     // search value is not referenced, so this array is stable
     const itemElements = useMemo(() => {
@@ -51,36 +64,75 @@ const FilterList = props => {
             );
         }
 
-        return items.map((item, index) => {
-            const { title, value } = item;
-            const key = `item-${group}-${value}`;
+        const handleChange = (event, newValue) => {
+            //removing the previous price filter from the url
+            const test = String(search).split('&');
+            const filters = test.filter(element => {
+                return !element.includes('price');
+            });
+            const newSearch = filters.join('&');
+            const nextParams = new URLSearchParams(newSearch);
 
-            if (!isListExpanded && index >= itemCountToShow) {
-                return null;
-            }
+            //appending the new price filter range in the url
+            const DELIMITER = ',';
+            const title = String(newValue[0]) + '-' + String(newValue[1]);
+            const value = String(newValue[0]) + '_' + String(newValue[1]);
+            nextParams.append(
+                `${group}[filter]`,
+                `${title}${DELIMITER}${value}`
+            );
 
-            // 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}
+            // write price filter state to history
+            history.push({ pathname, search: String(nextParams) });
+
+            //setting new value to the slider on change
+            setValue(newValue);
+        };
+
+        if (name == 'Price') {
+            return (
+                <div className={classes.root}>
+                    <Slider
+                        value={value}
+                        onChange={handleChange}
+                        valueLabelDisplay="auto"
+                        aria-labelledby="range-slider"
+                        min={minRange}
+                        max={maxRange}
                     />
-                </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;
-        });
+                // 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}
+                        />
+                    </li>
+                );
+                // 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;
+            });
+        }
     }, [
         classes,
         filterApi,
@@ -91,7 +143,13 @@ const FilterList = props => {
         items,
         isListExpanded,
         itemCountToShow,
-        onApply
+        onApply,
+        history,
+        minRange,
+        maxRange,
+        pathname,
+        search,
+        value
     ]);
 
     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
@@ -59,6 +59,10 @@ let mockFilterState;
 
 jest.mock('../../LinkButton', () => props => <mock-LinkButton {...props} />);
 
+jest.mock('react-router-dom', () => ({
+    useLocation: jest.fn(() => ({ search: '?a=b&c=d' }))
+}));
+
 jest.mock('@magento/peregrine/lib/talons/FilterSidebar', () => ({
     useFilterSidebar: jest.fn(({ filters }) => {
         const names = new Map();
diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
@@ -8,6 +8,7 @@ import LinkButton from '../LinkButton';
 import CurrentFilters from '../FilterModal/CurrentFilters';
 import FilterBlock from '../FilterModal/filterBlock';
 import defaultClasses from './filterSidebar.module.css';
+import { useLocation } from 'react-router-dom';
 
 const SCROLL_OFFSET = 150;
 
@@ -31,6 +32,32 @@ const FilterSidebar = props => {
 
     const filterRef = useRef();
     const classes = useStyle(defaultClasses, props.classes);
+    const location = useLocation();
+
+    //adding the price filter values to the filterstate
+    const priceFilters = Array.from(filterItems, ([group]) => {
+        if (group == 'price') {
+            // preserve all existing params
+            const params = new URLSearchParams(location.search);
+            const uniqueKeys = new Set(params.keys());
+            // iterate over existing param keys
+            for (const key of uniqueKeys) {
+                // if a key matches a known filter, add its items to the next state
+                if (key == 'price[filter]') {
+                    const value = params.get('price[filter]');
+                    const item = {
+                        title: value.split(',')[0],
+                        value: value.split(',')[1]
+                    };
+                    const filterVar = new Set();
+                    filterVar.add(item);
+
+                    //to display the price filter value after selecting the filter
+                    filterState.set('price', new Set(filterVar));
+                }
+            }
+        }
+    });
 
     const handleApplyFilter = useCallback(
         (...args) => {
@@ -121,6 +148,7 @@ const FilterSidebar = props => {
                         />
                     </h2>
                 </div>
+                {priceFilters}
                 <CurrentFilters
                     filterApi={filterApi}
                     filterNames={filterNames}
diff --git a/packages/venia-ui/package.json b/packages/venia-ui/package.json
@@ -62,6 +62,7 @@
     "@babel/plugin-transform-react-jsx": "~7.14.9",
     "@babel/plugin-transform-runtime": "~7.4.4",
     "@babel/preset-env": "~7.16.0",
+    "@material-ui/core": "~4.12.4",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
     "@storybook/react": "~6.3.7",
     "@testing-library/react-hooks": "~5.0.3",
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@`
`46`	`46`	`"watch:venia": "yarn venia run watch"`
`47`	`47`	`},`
`48`	`48`	`"dependencies": {`
	`49`	`+ "@material-ui/core": "~4.12.4",`
`49`	`50`	`"caniuse-lite": "~1.0.30001335"`
`50`	`51`	`},`
`51`	`52`	`"devDependencies": {`
`@@ -115,4 +116,4 @@`
`115`	`116`	`"maxSize": "100 kB"`
`116`	`117`	`}`
`117`	`118`	`]`
`118`		`-}`
	`119`	`+}`