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.

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

Pwa3162 v4 #4179

Closed
wants to merge 10 commits into from
42,432 changes: 42,432 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
"jest-junit": "~13.0.0",
"jest-transform-graphql": "~2.1.0",
"lodash.debounce": "~4.0.8",
"postcss": "~8.4.30",
"prettier": "~1.16.4",
"rimraf": "~2.6.3",
"tailwindcss": "~2.2.7"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};

Expand Down
11 changes: 9 additions & 2 deletions packages/peregrine/lib/talons/FilterModal/useFilterBlock.js
Original file line number Diff line number Diff line change
@@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }));

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
110 changes: 84 additions & 26 deletions packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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(() => {
Expand All @@ -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,
Expand All @@ -91,7 +143,13 @@ const FilterList = props => {
items,
isListExpanded,
itemCountToShow,
onApply
onApply,
history,
minRange,
maxRange,
pathname,
search,
value
]);

const showMoreLessItem = useMemo(() => {
Expand Down
3 changes: 2 additions & 1 deletion packages/venia-ui/lib/components/FilterModal/filterBlock.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ const FilterBlock = props => {
const talonProps = useFilterBlock({
filterState,
items,
initialOpen
initialOpen,
group
});
const { handleClick, isExpanded } = talonProps;
const iconSrc = isExpanded ? ArrowUp : ArrowDown;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,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();
Expand Down
28 changes: 28 additions & 0 deletions packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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) => {
Expand Down Expand Up @@ -115,6 +142,7 @@ const FilterSidebar = props => {
/>
</h2>
</div>
{priceFilters}
<CurrentFilters
filterApi={filterApi}
filterNames={filterNames}
Expand Down
3 changes: 3 additions & 0 deletions packages/venia-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
},
"homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-ui#readme",
"dependencies": {
"@material-ui/core": "~4.12.4",
"informed": "~3.29.0",
"jarallax": "~1.11.1",
"load-google-maps-api": "~2.0.1",
Expand All @@ -50,6 +51,7 @@
"redux-thunk": "~2.3.0",
"uuid": "~8.3.2"
},

"devDependencies": {
"@apollo/client": "~3.5.0",
"@babel/cli": "~7.2.3",
Expand All @@ -62,6 +64,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",
Expand Down
Loading