From 9d16fb3f0bafc6a7133bbc81c5a155de5e86caf0 Mon Sep 17 00:00:00 2001 From: AlexeyKaryka Date: Thu, 20 Dec 2018 22:07:53 +0300 Subject: [PATCH 01/91] Create components for filter button in category page header, filter modal, colors expandable option (#704) --- .../FilterModal/ColorOption/colorOption.css | 16 ++ .../FilterModal/ColorOption/colorOption.js | 79 +++++++++ .../FilterModal/ColorOption/constants.js | 2 + .../Category/FilterModal/ColorOption/index.js | 1 + .../FilterModal/FilterOption/filterOption.css | 32 ++++ .../FilterModal/FilterOption/filterOption.js | 97 +++++++++++ .../FilterModal/FilterOption/index.js | 1 + .../Category/FilterModal/constants.js | 35 ++++ .../Category/FilterModal/filterModal.css | 87 ++++++++++ .../Category/FilterModal/filterModal.js | 161 ++++++++++++++++++ .../FilterModal/filterModalContainer.js | 19 +++ .../Category/FilterModal/index.js | 1 + .../src/RootComponents/Category/category.css | 19 ++- .../Category/categoryContent.js | 46 ++++- .../src/actions/catalog/actions.js | 3 +- .../src/actions/catalog/asyncActions.js | 6 +- .../Filter/filter.css | 2 + .../src/components/Filter/filter.js | 47 +++++ .../{PurchaseHistoryPage => }/Filter/index.js | 0 .../PurchaseHistoryPage/Filter/filter.js | 35 ---- .../__tests__/purchaseHistory.spec.js | 2 +- .../PurchaseHistory/purchaseHistory.js | 5 +- packages/venia-concept/src/index.css | 4 + .../venia-concept/src/reducers/catalog.js | 22 ++- 24 files changed, 677 insertions(+), 45 deletions(-) create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.css create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/index.js rename packages/venia-concept/src/components/{PurchaseHistoryPage => }/Filter/filter.css (89%) create mode 100644 packages/venia-concept/src/components/Filter/filter.js rename packages/venia-concept/src/components/{PurchaseHistoryPage => }/Filter/index.js (100%) delete mode 100644 packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css new file mode 100644 index 0000000000..466990e9c1 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css @@ -0,0 +1,16 @@ +.colorOptionContainer { + display: flex; + flex-wrap: wrap; + margin-left: -0.75rem; + margin-bottom: 1.5rem; +} + +.colorOptionItem { + display: inline-block; + width: 2.125rem; + height: 2.125rem; + border: 1px solid #c9c9c9; + border-radius: 2px; + margin: 0.5rem 0.75rem; + outline: none; +} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js new file mode 100644 index 0000000000..5d58919dc7 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js @@ -0,0 +1,79 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Icon from 'src/components/Icon'; +import classify from 'src/classify'; +import defaultClasses from './colorOption.css'; + +class ColorOption extends Component { + static propTypes = { + classes: PropTypes.shape({}), + updateChosenItems: PropTypes.func + }; + + static getDerivedStateFromProps(nextProps, prevState) { + const updatedChosenColors = nextProps.chosenOptions; + return prevState.chosenColors !== updatedChosenColors + ? { chosenColors: updatedChosenColors } + : null; + } + + state = { + chosenColors: [] + }; + + addColor = color => { + const { updateChosenItems } = this.props; + updateChosenItems(this.state.chosenColors.concat([color])); + }; + + removeColor = color => { + const { updateChosenItems } = this.props; + const { chosenColors } = this.state; + const filteredColors = chosenColors.filter( + currentColor => currentColor !== color + ); + updateChosenItems(filteredColors); + }; + + toggleColor = color => { + this.isColorChosen(color) + ? this.removeColor(color) + : this.addColor(color); + }; + + isColorChosen = color => this.state.chosenColors.indexOf(color) > -1; + + //TODO: set up some library to calculate contrast ratio between parent color + // and probably colors from defined array of colors for check icon, + // so that to choose color for check icon with best contrast ratio + chooseCheckIconColor = parentColor => + parentColor !== 'white' ? 'white' : 'black'; + + render() { + const { classes, items } = this.props; + + return ( +
+ {items.map((color, index) => ( + + ))} +
+ ); + } +} + +export default classify(defaultClasses)(ColorOption); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js new file mode 100644 index 0000000000..12e33bcbfc --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js @@ -0,0 +1,2 @@ +//TODO research colors on backed +export const colorItems = ['white', 'black', 'orange', 'red', 'brown', 'green']; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js new file mode 100644 index 0000000000..e8c3d0be09 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js @@ -0,0 +1 @@ +export { default } from './colorOption'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.css new file mode 100644 index 0000000000..68640fccab --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.css @@ -0,0 +1,32 @@ +.root { +} + +.optionHeader { + display: flex; + justify-content: space-between; + align-items: center; + height: 2.875rem; +} + +.optionToggleButton { + outline: none; +} + +.counter { + display: flex; + justify-content: space-evenly; + align-items: center; + border: 1px solid black; + border-radius: 15px; + height: 1.5rem; + min-width: 3.375rem; + background-color: white; + margin-right: 1rem; + font-size: 0.75rem; + line-height: 1rem; +} + +.counterAndCloseButtonContainer { + display: flex; + justify-content: space-between; +} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js new file mode 100644 index 0000000000..326c12fb74 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js @@ -0,0 +1,97 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classify from 'src/classify'; +import Icon from 'src/components/Icon'; +import defaultClasses from './filterOption.css'; + +const circleIconAttrs = { + width: 12, + fill: 'black', + color: 'white' +}; + +class FilterOption extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string + }), + item: PropTypes.shape({ + id: PropTypes.number, + name: PropTypes.string, + items: PropTypes.array, + RenderOption: PropTypes.func + }), + chosenFilterOptions: PropTypes.array, + updateChosenFilterOptions: PropTypes.func, + isExpanded: PropTypes.bool + }; + + get getCounter() { + const { classes, chosenFilterOptions } = this.props; + const chosenOptionsCount = chosenFilterOptions.length; + + return chosenOptionsCount ? ( + + ) : null; + } + + resetChosenItems = () => { + this.updateChosenItems([]); + }; + + optionToggle = () => { + const { + toggleOption, + item: { name } + } = this.props; + toggleOption(name); + }; + + updateChosenItems = actualItems => { + const { updateChosenFilterOptions } = this.props; + updateChosenFilterOptions(actualItems); + }; + + render() { + const { + classes, + item: { name, items, RenderOption }, + chosenFilterOptions, + isExpanded + } = this.props; + const chosenOptions = chosenFilterOptions; + + return ( +
+
+
{name}
+
+ {this.getCounter} + +
+
+ {isExpanded ? ( + + ) : null} +
+ ); + } +} + +export default classify(defaultClasses)(FilterOption); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js new file mode 100644 index 0000000000..1689212f4e --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js @@ -0,0 +1 @@ +export { default } from './filterOption'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js new file mode 100644 index 0000000000..6d5c2d0ff6 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js @@ -0,0 +1,35 @@ +import React from 'react'; +import ColorOption from './ColorOption'; +import { colorItems } from './ColorOption/constants'; + +export const filterIconName = 'search'; +export const filterInnerText = 'Search for a specific filter...'; + +export const filterOptions = [ + { + id: 1, + name: 'Size', + RenderOption: () =>
+ }, + { + id: 2, + name: 'Price', + RenderOption: () =>
+ }, + { + id: 3, + name: 'Brand', + RenderOption: () =>
+ }, + { + id: 4, + name: 'Color', + items: colorItems, + RenderOption: ColorOption + }, + { + id: 5, + name: 'Style', + RenderOption: () =>
+ } +]; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css new file mode 100644 index 0000000000..ab0e307111 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css @@ -0,0 +1,87 @@ +.root { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 2; + overflow: auto; + padding: 2.375rem 1.75rem 0 1.75rem; + background-color: white; +} + +.header { + display: flex; + justify-content: space-between; + margin-bottom: 1.875rem; +} + +.headerTitle { + display: flex; + align-items: center; + font-size: 14px; + font-weight: 600; + line-height: 14px; +} + +/* TODO: find out how to place buttons on desktop layout */ +.footer { + position: fixed; + display: flex; + justify-content: space-around; + left: 0; + bottom: 0; + width: 100%; + padding: 1.5rem 0; + box-shadow: 0 1px 2px 0 rgba(69, 66, 75, 0.23); +} + +.footerButton { + height: 2.125rem; + width: 9rem; + border: 1px solid black; + border-radius: 100px; + color: black; + outline: none; +} + +.footerButtonDisabled { + composes: footerButton; + height: 3rem; + border: 1px solid #d1d1d1; + color: #d1d1d1; +} + +.resetButton { + composes: footerButton; +} + +.resetButtonDisabled { + composes: footerButtonDisabled; + background-color: white; +} + +.applyButton { + composes: footerButton; + color: white; + background-color: black; +} + +.applyButtonDisabled { + composes: footerButtonDisabled; + color: white; + background-color: #d1d1d1; +} + +.filterOptionItem:first-child { + border-top: 1px solid #d1d1d1; + border-bottom: 1px solid #d1d1d1; +} + +.filterOptionItem { + border-bottom: 1px solid #d1d1d1; +} + +.searchFilterContainer { + margin-bottom: 1.125rem; +} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js new file mode 100644 index 0000000000..91616cf89d --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -0,0 +1,161 @@ +import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { List } from '@magento/peregrine'; +import get from 'lodash/get'; +import classify from 'src/classify'; +import Filter from 'src/components/Filter'; +import Icon from 'src/components/Icon'; +import FilterOption from './FilterOption'; +import defaultClasses from './filterModal.css'; +import { filterIconName, filterInnerText, filterOptions } from './constants'; + +const iconAttrs = { + width: 16 +}; + +class FilterModal extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string, + searchFilterContainer: PropTypes.string + }), + closeModalHandler: PropTypes.func, + chosenFilterOptions: PropTypes.object, + updateChosenFilterOptions: PropTypes.func + }; + + static getDerivedStateFromProps(nextProps) { + const { chosenFilterOptions } = nextProps; + let filterOptionsArePristine = true; + + for (const optionName in chosenFilterOptions) { + if (chosenFilterOptions[optionName].chosenItems.length > 0) { + filterOptionsArePristine = false; + break; + } + } + + return { areOptionsPristine: filterOptionsArePristine }; + } + + state = { + areOptionsPristine: true, + expandedOptions: {} + }; + + resetFilterOptions = () => { + const { updateChosenFilterOptions } = this.props; + this.setState({ expandedOptions: {} }, () => { + updateChosenFilterOptions({}); + }); + }; + + getFooterButtons = areOptionsPristine => { + const { classes } = this.props; + return ( + + + + + ); + }; + + getChosenFilterOptionsForItem = itemName => { + const { chosenFilterOptions } = this.props; + return get(chosenFilterOptions, `${itemName}.chosenItems`, []); + }; + + getIsExpanded = optionName => { + return !!this.state.expandedOptions[optionName]; + }; + + toggleOption = optionName => { + const { expandedOptions } = this.state; + !!expandedOptions[optionName] + ? this.setState({ + expandedOptions: Object.assign({}, expandedOptions, { + [optionName]: false + }) + }) + : this.setState({ + expandedOptions: Object.assign({}, expandedOptions, { + [optionName]: true + }) + }); + }; + + render() { + const { + classes, + closeModalHandler, + updateChosenFilterOptions + } = this.props; + const { areOptionsPristine } = this.state; + + return ( +
+
+ FILTER BY + +
+
+ +
+ id} + render={props => ( +
    + {props.children} +
+ )} + renderItem={props => ( +
  • + + updateChosenFilterOptions({ + optionName: props.item.name, + optionItems: actualItems + }) + } + /> +
    • + )} + /> +
    + {this.getFooterButtons(areOptionsPristine)} +
    +
    + ); + } +} + +export default classify(defaultClasses)(FilterModal); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js new file mode 100644 index 0000000000..23f7aff774 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import FilterModal from './filterModal'; +import catalogActions from 'src/actions/catalog'; + +const mapStateToProps = ({ catalog }) => { + const { chosenFilterOptions } = catalog; + return { + chosenFilterOptions + }; +}; + +const mapDispatchToProps = { + updateChosenFilterOptions: catalogActions.updateChosenFilterOptions +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(FilterModal); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/index.js new file mode 100644 index 0000000000..398412b5b3 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/index.js @@ -0,0 +1 @@ +export { default } from './filterModalContainer'; diff --git a/packages/venia-concept/src/RootComponents/Category/category.css b/packages/venia-concept/src/RootComponents/Category/category.css index b315f23f3e..f3db7e12db 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.css +++ b/packages/venia-concept/src/RootComponents/Category/category.css @@ -10,7 +10,6 @@ } .pagination { - position: -webkit-sticky; position: sticky; bottom: 0; } @@ -18,3 +17,21 @@ .placeholder { height: 100vh; } + +.headerButtons { + display: flex; + justify-content: center; +} + +.filterButton { + width: 9rem; + height: 3rem; + border: 1px solid rgb(var(--venia-teal)); + border-radius: 100px; + background-color: white; + font-size: 14px; + font-weight: 600; + line-height: 14px; + color: rgb(var(--venia-teal)); + outline: none; +} diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 6833cfc128..607b48dd30 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -1,10 +1,45 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import classify from 'src/classify'; import Gallery from 'src/components/Gallery'; import Pagination from 'src/components/Pagination'; +import globalClasses from 'src/index.css'; +import FilterModal from './FilterModal'; import defaultClasses from './category.css'; class CategoryContent extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string, + title: PropTypes.string, + headerButtons: PropTypes.string, + filterContainer: PropTypes.string, + gallery: PropTypes.string, + pagination: PropTypes.string, + filterContainer: PropTypes.string + }) + }; + + state = { + filterModalOpen: false + }; + + get filterModal() { + return this.state.filterModalOpen ? ( + + ) : null; + } + + filterModalSwitcher = () => { + const { modalIsOpen } = globalClasses; + const bodyClasses = document.querySelector('body').classList; + + bodyClasses.contains(modalIsOpen) + ? bodyClasses.remove(modalIsOpen) + : bodyClasses.add(modalIsOpen); + this.setState({ filterModalOpen: !this.state.filterModalOpen }); + }; + render() { const { classes, pageControl, data, pageSize } = this.props; const items = data ? data.category.products.items : null; @@ -14,11 +49,19 @@ class CategoryContent extends Component {

    {/* TODO: Switch to RichContent component from Peregrine when merged */} - +
    + +

    @@ -26,6 +69,7 @@ class CategoryContent extends Component {
    + {this.filterModal}
    ); } diff --git a/packages/venia-concept/src/actions/catalog/actions.js b/packages/venia-concept/src/actions/catalog/actions.js index 347653ef14..40e8d5e144 100644 --- a/packages/venia-concept/src/actions/catalog/actions.js +++ b/packages/venia-concept/src/actions/catalog/actions.js @@ -14,7 +14,8 @@ const actionMap = { SET_PREV_PAGE_TOTAL: { REQUEST: null, RECEIVE: null - } + }, + UPDATE_CHOSEN_FILTER_OPTIONS: null }; export default createActions(actionMap, { prefix }); diff --git a/packages/venia-concept/src/actions/catalog/asyncActions.js b/packages/venia-concept/src/actions/catalog/asyncActions.js index 16c973de7b..c50080518a 100644 --- a/packages/venia-concept/src/actions/catalog/asyncActions.js +++ b/packages/venia-concept/src/actions/catalog/asyncActions.js @@ -1,4 +1,5 @@ import actions from './actions'; +import mockData from './mockData'; export const getAllCategories = () => async function thunk(dispatch) { @@ -7,9 +8,10 @@ export const getAllCategories = () => try { // TODO: implement rest or graphql call for categories // `/rest/V1/categories` requires auth for some reason - const { default: payload } = await import('./mockData'); + // TODO: we need to configure Jest to support dynamic imports + // const { default: payload } = await import('./mockData'); - dispatch(actions.getAllCategories.receive(payload)); + dispatch(actions.getAllCategories.receive(mockData)); } catch (error) { dispatch(actions.getAllCategories.receive(error)); } diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.css b/packages/venia-concept/src/components/Filter/filter.css similarity index 89% rename from packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.css rename to packages/venia-concept/src/components/Filter/filter.css index ceb0174291..f5ff5d353b 100644 --- a/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.css +++ b/packages/venia-concept/src/components/Filter/filter.css @@ -2,11 +2,13 @@ display: flex; align-items: center; height: 2.5rem; + width: 100%; border: 1px solid rgb(var(--venia-border)); border-radius: 100px; padding: 0 0.875rem; font-size: 0.75rem; line-height: 0.75rem; + outline: none; } .filterIconContainer { diff --git a/packages/venia-concept/src/components/Filter/filter.js b/packages/venia-concept/src/components/Filter/filter.js new file mode 100644 index 0000000000..7cd8217acd --- /dev/null +++ b/packages/venia-concept/src/components/Filter/filter.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import Icon from 'src/components/Icon'; +import classify from 'src/classify'; +import defaultClasses from './filter.css'; + +const FILTER_ICON_ATTRS = { + width: 16, + color: 'rgb(0, 134, 138)' +}; + +class Filter extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string, + filterIconContainer: PropTypes.string + }), + iconName: PropTypes.string, + innerText: PropTypes.string, + onClickHandler: PropTypes.func + }; + + static defaultProps = { + iconName: 'filter', + innerText: 'Filter by...' + }; + + render() { + const { classes, onClickHandler, iconName, innerText } = this.props; + + return ( + + ); + } +} + +export default classify(defaultClasses)(Filter); diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/index.js b/packages/venia-concept/src/components/Filter/index.js similarity index 100% rename from packages/venia-concept/src/components/PurchaseHistoryPage/Filter/index.js rename to packages/venia-concept/src/components/Filter/index.js diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.js b/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.js deleted file mode 100644 index ad344b1418..0000000000 --- a/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react'; -import { shape, string } from 'prop-types'; - -import Icon from 'src/components/Icon'; -import classify from 'src/classify'; -import defaultClasses from './filter.css'; - -const FILTER_ICON_ATTRS = { - width: 16, - color: 'rgb(0, 134, 138)' -}; - -class Filter extends Component { - static propTypes = { - classes: shape({ - root: string, - filterIconContainer: string - }) - }; - - render() { - const { classes } = this.props; - - return ( -
    -
    - -
    - Filter by... -
    - ); - } -} - -export default classify(defaultClasses)(Filter); diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js index dc5aaacf50..db696ab807 100644 --- a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js +++ b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import { List } from '@magento/peregrine'; import PurchaseHistory from '../purchaseHistory'; -import Filter from '../../Filter'; +import Filter from 'src/components/Filter'; test('renders correctly', () => { const wrapper = shallow( diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js index 3316acdacd..7134ba04c7 100644 --- a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js +++ b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js @@ -1,11 +1,10 @@ import React, { Component } from 'react'; import { arrayOf, number, shape, string } from 'prop-types'; import { List } from '@magento/peregrine'; - -import PurchaseHistoryItem from '../PurchaseHistoryItem'; +import Filter from 'src/components/Filter'; import classify from 'src/classify'; +import PurchaseHistoryItem from '../PurchaseHistoryItem'; import defaultClasses from './purchaseHistory.css'; -import Filter from '../Filter'; class PurchaseHistory extends Component { static propTypes = { diff --git a/packages/venia-concept/src/index.css b/packages/venia-concept/src/index.css index 629c0e43f8..6263f8f1b0 100644 --- a/packages/venia-concept/src/index.css +++ b/packages/venia-concept/src/index.css @@ -37,6 +37,10 @@ body { padding: 0; } +.modalIsOpen { + overflow: hidden; +} + body, input, select, diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index e7b6006397..b86fb9d575 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -9,7 +9,8 @@ const initialState = { rootCategoryId: null, currentPage: 1, pageSize: 6, - prevPageTotal: null + prevPageTotal: null, + chosenFilterOptions: {} }; const reducerMap = { @@ -43,6 +44,25 @@ const reducerMap = { ...state, prevPageTotal: payload }; + }, + [actions.updateChosenFilterOptions]: ( + state, + { payload: { optionName, optionItems } } + ) => { + return optionName + ? { + ...state, + chosenFilterOptions: { + ...state.chosenFilterOptions, + [optionName]: { + chosenItems: optionItems + } + } + } + : { + ...state, + chosenFilterOptions: {} + }; } }; From 3bd15488a9f963114eda2bd087b77e9459e07590 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 21 Jan 2019 13:54:11 +0100 Subject: [PATCH 02/91] Adjusted Category components for filters and replaced placeholder filters with real data --- .../FilterModal/ColorOption/colorOption.js | 24 ++--- .../FilterModal/FilterOption/filterOption.js | 14 +-- .../Category/FilterModal/filterModal.js | 13 ++- .../src/RootComponents/Category/category.js | 16 ++-- .../Category/categoryContent.js | 91 +++++++++++++++---- .../src/components/Filter/filter.js | 4 +- 6 files changed, 106 insertions(+), 56 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js index 5d58919dc7..f96efc73ad 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js @@ -50,26 +50,18 @@ class ColorOption extends Component { parentColor !== 'white' ? 'white' : 'black'; render() { - const { classes, items } = this.props; + const { classes, items, id } = this.props; return (
    - {items.map((color, index) => ( + {items.map(item => ( + key={`${id}-${item.value_string}`} + onClick={() => this.toggleColor(item.value_string)} + dangerouslySetInnerHTML={{ + __html: item.label + }} + /> ))}
    ); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js index 326c12fb74..48b18e644b 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classify from 'src/classify'; +import ColorOption from '../ColorOption'; import Icon from 'src/components/Icon'; import defaultClasses from './filterOption.css'; @@ -32,7 +33,7 @@ class FilterOption extends Component { return chosenOptionsCount ? (
    {isExpanded ? ( diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 91616cf89d..6c2767d684 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -105,7 +105,8 @@ class FilterModal extends Component { const { classes, closeModalHandler, - updateChosenFilterOptions + updateChosenFilterOptions, + filters } = this.props; const { areOptionsPristine } = this.state; @@ -113,9 +114,7 @@ class FilterModal extends Component {
    FILTER BY - +
    id} render={props => (
      @@ -138,11 +137,11 @@ class FilterModal extends Component { toggleOption={this.toggleOption} isExpanded={this.getIsExpanded(props.item.name)} chosenFilterOptions={this.getChosenFilterOptionsForItem( - props.item.name + props.item.request_var )} updateChosenFilterOptions={actualItems => updateChosenFilterOptions({ - optionName: props.item.name, + optionName: props.item.request_var, optionItems: actualItems }) } diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index 397758f0da..6d7786ee44 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -76,15 +76,14 @@ class Category extends Component { totalPages: prevPageTotal }; + const queryVariables = { + id: Number(id), + pageSize: Number(pageSize), + currentPage: Number(currentPage) + }; + return ( - + {({ loading, error, data }) => { if (error) return
      Data Fetch Error
      ; if (loading) @@ -108,6 +107,7 @@ class Category extends Component { return ( - ) : null; - } - filterModalSwitcher = () => { const { modalIsOpen } = globalClasses; const bodyClasses = document.querySelector('body').classList; @@ -41,8 +72,13 @@ class CategoryContent extends Component { }; render() { - const { classes, pageControl, data, pageSize } = this.props; - const items = data ? data.category.products.items : null; + const { + classes, + pageControl, + data, + pageSize, + queryVariables + } = this.props; const title = data ? data.category.description : null; return ( @@ -63,13 +99,36 @@ class CategoryContent extends Component {
    -
    - -
    -
    - -
    - {this.filterModal} + + {({ loading, error, data }) => { + if (loading || error) return null; + const { products } = data; + const { items, filters } = products; + console.log('PROD DATA', products); + return ( + +
    + +
    +
    + +
    + {this.state.filterModalOpen && ( + + )} +     + ); + }} +     ); } diff --git a/packages/venia-concept/src/components/Filter/filter.js b/packages/venia-concept/src/components/Filter/filter.js index 7cd8217acd..1d3dd670a1 100644 --- a/packages/venia-concept/src/components/Filter/filter.js +++ b/packages/venia-concept/src/components/Filter/filter.js @@ -35,9 +35,7 @@ class Filter extends Component { aria-label="filter" onClick={onClickHandler} > -
    - -
    +
    Filter icon
    {innerText} ); From c6fc7af38ae6f412539cd243de666ca41894d408 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 21 Jan 2019 14:35:26 +0100 Subject: [PATCH 03/91] Adjusting Icon components to optimized syntax --- .../FilterModal/FilterOption/filterOption.js | 13 +++--- .../Category/FilterModal/filterModal.js | 42 +++++++++++-------- 2 files changed, 29 insertions(+), 26 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js index 48b18e644b..5460ba126b 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js @@ -2,15 +2,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classify from 'src/classify'; import ColorOption from '../ColorOption'; +import CloseIcon from 'react-feather/dist/icons/x-circle'; import Icon from 'src/components/Icon'; +import ArrowDown from 'react-feather/dist/icons/chevron-down'; +import ArrowUp from 'react-feather/dist/icons/chevron-up'; import defaultClasses from './filterOption.css'; -const circleIconAttrs = { - width: 12, - fill: 'black', - color: 'white' -}; - class FilterOption extends Component { static propTypes = { classes: PropTypes.shape({ @@ -33,7 +30,7 @@ class FilterOption extends Component { return chosenOptionsCount ? (
    diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 6c2767d684..014089171a 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -3,15 +3,10 @@ import PropTypes from 'prop-types'; import { List } from '@magento/peregrine'; import get from 'lodash/get'; import classify from 'src/classify'; -import Filter from 'src/components/Filter'; +import CloseIcon from 'react-feather/dist/icons/x'; import Icon from 'src/components/Icon'; import FilterOption from './FilterOption'; import defaultClasses from './filterModal.css'; -import { filterIconName, filterInnerText, filterOptions } from './constants'; - -const iconAttrs = { - width: 16 -}; class FilterModal extends Component { static propTypes = { @@ -39,15 +34,14 @@ class FilterModal extends Component { } state = { + filterSearchTerm: '', areOptionsPristine: true, expandedOptions: {} }; resetFilterOptions = () => { const { updateChosenFilterOptions } = this.props; - this.setState({ expandedOptions: {} }, () => { - updateChosenFilterOptions({}); - }); + updateChosenFilterOptions({}); }; getFooterButtons = areOptionsPristine => { @@ -101,30 +95,42 @@ class FilterModal extends Component { }); }; + handleFilterSearch = event => { + const { value } = event.currentTarget || event.srcElement; + this.setState({ filterSearchTerm: value }); + }; + render() { const { classes, closeModalHandler, - updateChosenFilterOptions, - filters + updateChosenFilterOptions } = this.props; - const { areOptionsPristine } = this.state; + let { filters } = this.props; + const { areOptionsPristine, filterSearchTerm } = this.state; + + filters = filters.filter( + filter => + `${filter.name}` + .toUpperCase() + .indexOf(filterSearchTerm.toUpperCase()) >= 0 + ); return (
    FILTER BY - +
    - +
    + id} + getItemKey={({ request_var }) => request_var} render={props => (
      {props.children} From 8185ced60ed134df4affb3d9f57443ea82eedc26 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Tue, 22 Jan 2019 13:03:12 +0100 Subject: [PATCH 04/91] Filter component improvements, Added swatch and default renderer, improved functionality --- .../FilterModal/ColorOption/colorOption.css | 16 ---- .../FilterModal/ColorOption/colorOption.js | 71 -------------- .../FilterModal/ColorOption/constants.js | 2 - .../Category/FilterModal/ColorOption/index.js | 1 - .../FilterModal/FilterList/constants.js | 18 ++++ .../FilterModal/FilterList/filterDefault.css | 0 .../FilterModal/FilterList/filterDefault.js | 17 ++++ .../FilterModal/FilterList/filterList.css | 0 .../FilterModal/FilterList/filterList.js | 95 +++++++++++++++++++ .../FilterModal/FilterList/filterSwatch.css | 0 .../FilterModal/FilterList/filterSwatch.js | 41 ++++++++ .../Category/FilterModal/FilterList/index.js | 1 + .../FilterModal/FilterOption/index.js | 1 - .../Category/FilterModal/constants.js | 33 +------ .../filterOption.css => filterBlock.css} | 0 .../filterOption.js => filterBlock.js} | 12 +-- .../Category/FilterModal/filterModal.js | 4 +- .../src/components/Filter/filter.js | 10 +- 18 files changed, 181 insertions(+), 141 deletions(-) delete mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css delete mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js delete mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js delete mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.css create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/index.js delete mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js rename packages/venia-concept/src/RootComponents/Category/FilterModal/{FilterOption/filterOption.css => filterBlock.css} (100%) rename packages/venia-concept/src/RootComponents/Category/FilterModal/{FilterOption/filterOption.js => filterBlock.js} (91%) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css deleted file mode 100644 index 466990e9c1..0000000000 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.css +++ /dev/null @@ -1,16 +0,0 @@ -.colorOptionContainer { - display: flex; - flex-wrap: wrap; - margin-left: -0.75rem; - margin-bottom: 1.5rem; -} - -.colorOptionItem { - display: inline-block; - width: 2.125rem; - height: 2.125rem; - border: 1px solid #c9c9c9; - border-radius: 2px; - margin: 0.5rem 0.75rem; - outline: none; -} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js deleted file mode 100644 index f96efc73ad..0000000000 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/colorOption.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import Icon from 'src/components/Icon'; -import classify from 'src/classify'; -import defaultClasses from './colorOption.css'; - -class ColorOption extends Component { - static propTypes = { - classes: PropTypes.shape({}), - updateChosenItems: PropTypes.func - }; - - static getDerivedStateFromProps(nextProps, prevState) { - const updatedChosenColors = nextProps.chosenOptions; - return prevState.chosenColors !== updatedChosenColors - ? { chosenColors: updatedChosenColors } - : null; - } - - state = { - chosenColors: [] - }; - - addColor = color => { - const { updateChosenItems } = this.props; - updateChosenItems(this.state.chosenColors.concat([color])); - }; - - removeColor = color => { - const { updateChosenItems } = this.props; - const { chosenColors } = this.state; - const filteredColors = chosenColors.filter( - currentColor => currentColor !== color - ); - updateChosenItems(filteredColors); - }; - - toggleColor = color => { - this.isColorChosen(color) - ? this.removeColor(color) - : this.addColor(color); - }; - - isColorChosen = color => this.state.chosenColors.indexOf(color) > -1; - - //TODO: set up some library to calculate contrast ratio between parent color - // and probably colors from defined array of colors for check icon, - // so that to choose color for check icon with best contrast ratio - chooseCheckIconColor = parentColor => - parentColor !== 'white' ? 'white' : 'black'; - - render() { - const { classes, items, id } = this.props; - - return ( -
      - {items.map(item => ( -
      - ); - } -} - -export default classify(defaultClasses)(ColorOption); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js deleted file mode 100644 index 12e33bcbfc..0000000000 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/constants.js +++ /dev/null @@ -1,2 +0,0 @@ -//TODO research colors on backed -export const colorItems = ['white', 'black', 'orange', 'red', 'brown', 'green']; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js deleted file mode 100644 index e8c3d0be09..0000000000 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/ColorOption/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './colorOption'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js new file mode 100644 index 0000000000..46d9a1c5c7 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js @@ -0,0 +1,18 @@ +export const filterModes = { + default: 'default', + swatch: 'swatch' +}; + +export const filterRenderOptions = { + fashion_color: { + mode: filterModes.swatch, + options: { showLabel: false, generateColor: true } + }, + fashion_size: { + mode: filterModes.swatch, + options: { showLabel: true } + }, + default: { + mode: filterModes.default + } +}; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js new file mode 100644 index 0000000000..c8d09f0f72 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classify from 'src/classify'; +import defaultClasses from './filterDefault.css'; + +const FilterDefault = ({ value_string, toggleOption, label, icon }) => ( + +); + +export default classify(defaultClasses)(FilterDefault); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js new file mode 100644 index 0000000000..c5d63923ee --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js @@ -0,0 +1,95 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Icon from 'src/components/Icon'; +import Checkmark from 'react-feather/dist/icons/check'; +import classify from 'src/classify'; +import defaultClasses from './filterList.css'; +import { List } from '@magento/peregrine'; +import { filterModes, filterRenderOptions } from './constants'; +import FilterDefault from './filterDefault'; +import FilterSwatch from './FilterSwatch'; + +class FilterList extends Component { + static propTypes = { + classes: PropTypes.shape({}), + updateChosenItems: PropTypes.func + }; + + static getDerivedStateFromProps(nextProps, prevState) { + const updatedChosenOptions = nextProps.chosenOptions; + return prevState.chosenOptions !== updatedChosenOptions + ? { chosenOptions: updatedChosenOptions } + : null; + } + + state = { + chosenOptions: [] + }; + + addOption = item => { + const { updateChosenItems } = this.props; + updateChosenItems(this.state.chosenOptions.concat([item])); + }; + + removeOption = option => { + const { updateChosenItems } = this.props; + const { chosenOptions } = this.state; + const filteredOptions = chosenOptions.filter( + currentOption => currentOption !== option + ); + updateChosenItems(filteredOptions); + }; + + toggleOption = event => { + const { value } = event.currentTarget || event.srcElement; + this.isOptionActive(value) + ? this.removeOption(value) + : this.addOption(value); + }; + + isOptionActive = option => this.state.chosenOptions.indexOf(option) > -1; + + getFilterIcon = value => + this.isOptionActive(value) && ; + + getRenderOptions = value => + filterRenderOptions[`${value}`] || + filterRenderOptions[filterModes.default]; + + render() { + const { toggleOption, getFilterIcon } = this; + const { classes, items, id } = this.props; + + const { mode, options } = this.getRenderOptions(id); + + const isSwatch = filterModes[mode] === filterModes.swatch; + + return ( + `${id}-${value_string}`} + render={props =>
        {props.children}
      } + renderItem={({ item }) => ( +
    • + {isSwatch ? ( + + ) : ( + + )} +
      • + )} + /> + ); + } +} + +export default classify(defaultClasses)(FilterList); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js new file mode 100644 index 0000000000..89fd152f77 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classify from 'src/classify'; +import defaultClasses from './filterSwatch.css'; + +const cache = new Map(); + +const memoize = fn => key => + cache.has(key) ? cache.get(key) : cache.set(key, fn(key)).get(key); + +const getRandomColor = () => + Array.from({ length: 3 }, () => Math.floor(Math.random() * 255)).join(','); + +const memoizedGetRandomColor = memoize(getRandomColor); + +const FilterSwatch = ({ value_string, toggleOption, label, icon, options }) => ( + +); + +export default classify(defaultClasses)(FilterSwatch); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/index.js new file mode 100644 index 0000000000..1136331c17 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/index.js @@ -0,0 +1 @@ +export { default } from './filterList'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js deleted file mode 100644 index 1689212f4e..0000000000 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './filterOption'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js index 6d5c2d0ff6..0955ff9338 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js @@ -1,35 +1,4 @@ -import React from 'react'; -import ColorOption from './ColorOption'; -import { colorItems } from './ColorOption/constants'; - export const filterIconName = 'search'; export const filterInnerText = 'Search for a specific filter...'; -export const filterOptions = [ - { - id: 1, - name: 'Size', - RenderOption: () =>
      - }, - { - id: 2, - name: 'Price', - RenderOption: () =>
      - }, - { - id: 3, - name: 'Brand', - RenderOption: () =>
      - }, - { - id: 4, - name: 'Color', - items: colorItems, - RenderOption: ColorOption - }, - { - id: 5, - name: 'Style', - RenderOption: () =>
      - } -]; +export const filterOptions = []; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.css rename to packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js similarity index 91% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js rename to packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index 5460ba126b..68baab992b 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterOption/filterOption.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -1,14 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classify from 'src/classify'; -import ColorOption from '../ColorOption'; +import FilterList from './FilterList'; import CloseIcon from 'react-feather/dist/icons/x-circle'; import Icon from 'src/components/Icon'; import ArrowDown from 'react-feather/dist/icons/chevron-down'; import ArrowUp from 'react-feather/dist/icons/chevron-up'; -import defaultClasses from './filterOption.css'; +import defaultClasses from './filterBlock.css'; -class FilterOption extends Component { +class FilterBlock extends Component { static propTypes = { classes: PropTypes.shape({ root: PropTypes.string @@ -64,8 +64,6 @@ class FilterOption extends Component { } = this.props; const chosenOptions = chosenFilterOptions; - const RenderOption = ColorOption; - return (
      @@ -81,7 +79,7 @@ class FilterOption extends Component {
      {isExpanded ? ( - (
    • - Date: Tue, 22 Jan 2019 15:02:44 +0100 Subject: [PATCH 05/91] Filter render components and styles --- .../FilterModal/FilterList/constants.js | 4 --- .../FilterModal/FilterList/filterDefault.css | 14 +++++++++++ .../FilterModal/FilterList/filterDefault.js | 15 ++++++++--- .../FilterModal/FilterList/filterList.css | 7 ++++++ .../FilterModal/FilterList/filterList.js | 25 ++++++++++++++++--- .../FilterModal/FilterList/filterSwatch.css | 21 ++++++++++++++++ .../FilterModal/FilterList/filterSwatch.js | 23 +++++++++++------ .../Category/FilterModal/filterBlock.css | 3 ++- .../Category/FilterModal/filterBlock.js | 7 +++++- .../Category/FilterModal/filterModal.css | 11 ++++++++ .../Category/FilterModal/filterModal.js | 5 +++- .../Category/categoryContent.js | 15 +++++------ 12 files changed, 121 insertions(+), 29 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js index 46d9a1c5c7..20dda6a603 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js @@ -8,10 +8,6 @@ export const filterRenderOptions = { mode: filterModes.swatch, options: { showLabel: false, generateColor: true } }, - fashion_size: { - mode: filterModes.swatch, - options: { showLabel: true } - }, default: { mode: filterModes.default } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css index e69de29bb2..731c1f4d6a 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css @@ -0,0 +1,14 @@ +.root { + display: inline-flex; + align-items: center; + border: 1px solid rgb(var(--venia-text)); + padding: 0.25rem 0.5rem; + margin-right: 1rem; + margin-bottom: 1rem; +} + +.rootActive { + composes: root; + background-color: rgb(var(--venia-text)); + color: white; +} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js index c8d09f0f72..4497b55f19 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js @@ -3,9 +3,18 @@ import PropTypes from 'prop-types'; import classify from 'src/classify'; import defaultClasses from './filterDefault.css'; -const FilterDefault = ({ value_string, toggleOption, label, icon }) => ( - - ) : null; - } - resetChosenItems = () => { this.updateChosenItems([]); }; @@ -74,7 +55,6 @@ class FilterBlock extends Component {
      {name}
      - {this.getCounter}
      + + request_var} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js new file mode 100644 index 0000000000..39a3c51c00 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classify from 'src/classify'; +import defaultClasses from './filtersCurrent.css'; + +class FiltersCurrent extends Component { + render() { + const { chosenFilterOptions } = this.props; + + console.log('CHOSEN FILTERS', chosenFilterOptions); + return
      ; + } +} + +export default classify(defaultClasses)(FiltersCurrent); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js new file mode 100644 index 0000000000..b2faaba4b2 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import FiltersCurrent from './filtersCurrent'; +import catalogActions from 'src/actions/catalog'; + +const mapStateToProps = ({ catalog }) => { + const { chosenFilterOptions } = catalog; + return { + chosenFilterOptions + }; +}; + +const mapDispatchToProps = { + updateChosenFilterOptions: catalogActions.updateChosenFilterOptions +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(FiltersCurrent); diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index b86fb9d575..1bd49df072 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -47,7 +47,7 @@ const reducerMap = { }, [actions.updateChosenFilterOptions]: ( state, - { payload: { optionName, optionItems } } + { payload: { optionName, optionItems, optionLabel } } ) => { return optionName ? { @@ -55,7 +55,8 @@ const reducerMap = { chosenFilterOptions: { ...state.chosenFilterOptions, [optionName]: { - chosenItems: optionItems + chosenItems: optionItems, + optionLabel: optionLabel } } } From 0443d60f945b27473c12fc9e94394333f35f7c4c Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Wed, 23 Jan 2019 13:29:29 +0100 Subject: [PATCH 08/91] Current filters --- .../FilterModal/FilterList/filterList.js | 6 ++- .../Category/FilterModal/filterBlock.js | 1 + .../Category/FilterModal/filterModal.js | 2 +- .../Category/FilterModal/filtersCurrent.css | 14 ++++++ .../Category/FilterModal/filtersCurrent.js | 47 +++++++++++++++++-- 5 files changed, 64 insertions(+), 6 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js index 68a6221cd1..af08029750 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js @@ -35,14 +35,16 @@ class FilterList extends Component { const { updateChosenItems } = this.props; const { chosenOptions } = this.state; const filteredOptions = chosenOptions.filter( - currentOption => currentOption !== option + currentOption => + currentOption.title !== option.title && + currentOption.value !== option.value ); updateChosenItems(filteredOptions); }; toggleOption = event => { const { value, title } = event.currentTarget || event.srcElement; - this.isOptionActive(value) + this.isOptionActive({ title, value }) ? this.removeOption({ title, value }) : this.addOption({ title, value }); }; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index 71d3f13bf2..95d0d5c162 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -38,6 +38,7 @@ class FilterBlock extends Component { updateChosenItems = actualItems => { const { updateChosenFilterOptions } = this.props; + console.log('ACTIAL ITMS', actualItems); updateChosenFilterOptions(actualItems); }; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index bed0629d0c..32509d28fc 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -145,7 +145,7 @@ class FilterModal extends Component { renderItem={props => (
    • { + const { title, value } = event.currentTarget || event.srcElement; + const { group } = + event.currentTarget.dataset || event.srcElement.dataset; + const { updateChosenFilterOptions, chosenFilterOptions } = this.props; + const filterGroup = chosenFilterOptions[group].chosenItems; + + const filteredOptions = filterGroup.filter( + currentOption => + currentOption.title !== title && currentOption.value !== value + ); + + updateChosenFilterOptions({ + optionName: group, + optionItems: filteredOptions + }); + }; + render() { - const { chosenFilterOptions } = this.props; + const { chosenFilterOptions, classes } = this.props; + const { removeOption } = this; - console.log('CHOSEN FILTERS', chosenFilterOptions); - return
      ; + return ( +
        + {Object.keys(chosenFilterOptions).map(key => + chosenFilterOptions[key].chosenItems.map( + ({ title, value }) => ( +
      • + +
        • + ) + ) + )} +
      + ); } } From ea32f32dad99e7a6eb4b33a4253586f217dfc690 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Wed, 23 Jan 2019 15:11:02 +0100 Subject: [PATCH 09/91] Filter lists & block adjustment - improving state management --- .../FilterModal/FilterList/filterList.js | 2 + .../Category/FilterModal/filterBlock.js | 50 +++++++++------ .../Category/FilterModal/filterModal.js | 62 +++---------------- .../Category/FilterModal/filtersCurrent.js | 7 ++- 4 files changed, 45 insertions(+), 76 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js index af08029750..aad0acad8b 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js @@ -106,6 +106,7 @@ class FilterList extends Component { {isSwatch ? ( { this.updateChosenItems([]); }; optionToggle = () => { - const { - toggleOption, - item: { name } - } = this.props; - toggleOption(name); + const { isExpanded } = this.state; + this.setState({ isExpanded: !isExpanded }); }; updateChosenItems = actualItems => { const { updateChosenFilterOptions } = this.props; - console.log('ACTIAL ITMS', actualItems); - updateChosenFilterOptions(actualItems); + updateChosenFilterOptions({ + optionName: this.props.item.request_var, + optionItems: actualItems + }); + }; + + getChosenFilterOptionsForItem = () => { + const { chosenFilterOptions } = this.props; + return get(chosenFilterOptions, `chosenItems`, []); }; render() { const { classes, item: { name, filter_items, request_var }, - chosenFilterOptions, - isExpanded + chosenFilterOptions } = this.props; - const chosenOptions = chosenFilterOptions; + + const { isExpanded } = this.state; + + const chosenOptions = this.getChosenFilterOptionsForItem( + chosenFilterOptions + ); return (
      @@ -64,14 +76,12 @@ class FilterBlock extends Component {
      - {isExpanded ? ( - - ) : null} +
      • ); } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 32509d28fc..050de90951 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -1,7 +1,6 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { List } from '@magento/peregrine'; -import get from 'lodash/get'; import FiltersCurrent from './filtersCurrentContainer'; import classify from 'src/classify'; import CloseIcon from 'react-feather/dist/icons/x'; @@ -20,24 +19,8 @@ class FilterModal extends Component { updateChosenFilterOptions: PropTypes.func }; - static getDerivedStateFromProps(nextProps) { - const { chosenFilterOptions } = nextProps; - let filterOptionsArePristine = true; - - for (const optionName in chosenFilterOptions) { - if (chosenFilterOptions[optionName].chosenItems.length > 0) { - filterOptionsArePristine = false; - break; - } - } - - return { areOptionsPristine: filterOptionsArePristine }; - } - state = { - filterSearchTerm: '', - areOptionsPristine: true, - expandedOptions: {} + filterSearchTerm: '' }; resetFilterOptions = () => { @@ -72,30 +55,6 @@ class FilterModal extends Component { ); }; - getChosenFilterOptionsForItem = itemName => { - const { chosenFilterOptions } = this.props; - return get(chosenFilterOptions, `${itemName}.chosenItems`, []); - }; - - getIsExpanded = optionName => { - return !!this.state.expandedOptions[optionName]; - }; - - toggleOption = optionName => { - const { expandedOptions } = this.state; - !!expandedOptions[optionName] - ? this.setState({ - expandedOptions: Object.assign({}, expandedOptions, { - [optionName]: false - }) - }) - : this.setState({ - expandedOptions: Object.assign({}, expandedOptions, { - [optionName]: true - }) - }); - }; - handleFilterSearch = event => { const { value } = event.currentTarget || event.srcElement; this.setState({ filterSearchTerm: value }); @@ -106,10 +65,12 @@ class FilterModal extends Component { classes, isModalOpen, closeModalHandler, + chosenFilterOptions, updateChosenFilterOptions } = this.props; let { filters } = this.props; - const { areOptionsPristine, filterSearchTerm } = this.state; + const { filterSearchTerm } = this.state; + const areOptionsPristine = false; filters = filters.filter( filter => @@ -146,16 +107,11 @@ class FilterModal extends Component {
    • - updateChosenFilterOptions({ - optionName: props.item.request_var, - optionItems: actualItems - }) + chosenFilterOptions={ + chosenFilterOptions[props.item.request_var] + } + updateChosenFilterOptions={ + updateChosenFilterOptions } />
      • diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js index 5faa07f49c..611a863568 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js @@ -41,9 +41,10 @@ class FiltersCurrent extends Component { data-group={key} title={title} value={value} - > - {title} - + dangerouslySetInnerHTML={{ + __html: title + }} + /> ) ) From cf6f4dafb74c31f319518638b80c181c787d1de6 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Wed, 23 Jan 2019 15:14:14 +0100 Subject: [PATCH 10/91] Style adjustments --- .../Category/FilterModal/filterBlock.css | 9 +++++++++ .../Category/FilterModal/filterBlock.js | 20 +++++++++++++------ 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css index 1d99825a41..0986cdf076 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css @@ -13,6 +13,15 @@ outline: none; } +.filterList { + display: none; +} + +.filterListExpanded { + composes: filterList; + display: block; +} + .counter { display: flex; justify-content: space-evenly; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index e67efa9ff1..8782ce02fc 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -76,12 +76,20 @@ class FilterBlock extends Component {
      - +
      + +
      ); } From b71520898b79e9275f12c1768fb4cdfdea601b8e Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 24 Jan 2019 10:13:44 +0100 Subject: [PATCH 11/91] Attempting to fix re-render issue --- .../FilterModal/FilterList/filterDefault.js | 67 ++++++++----- .../FilterModal/FilterList/filterList.js | 97 +++++++------------ .../FilterModal/FilterList/filterSwatch.js | 97 ++++++++++++------- .../Category/FilterModal/filterBlock.js | 21 ++-- .../Category/FilterModal/filterModal.js | 22 ++--- .../FilterModal/filterModalContainer.js | 14 ++- .../FilterModal/filtersCurrentContainer.js | 4 +- .../src/actions/catalog/actions.js | 6 +- .../venia-concept/src/reducers/catalog.js | 52 ++++++---- 9 files changed, 204 insertions(+), 176 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js index 48b497d3d5..a9f85445bd 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js @@ -1,32 +1,51 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Icon from 'src/components/Icon'; import Checkmark from 'react-feather/dist/icons/check'; import classify from 'src/classify'; import defaultClasses from './filterDefault.css'; -const FilterDefault = ({ - value_string, - toggleOption, - label, - classes, - isActive -}) => ( - -); +class FilterDefault extends Component { + state = { + isActive: false + }; + + updateFilterState = state => this.setState({ isActive: state }); + + componentWillUnmount = () => console.log('UIN'); + + handleFilterToggle = event => { + const { isActive } = this.state; + this.props.toggleOption(event); + this.updateFilterState(!isActive); + }; + + render() { + const { value_string, label, classes, group } = this.props; + + const { isActive } = this.state; + + const { handleFilterToggle } = this; + + return ( + + ); + } +} export default classify(defaultClasses)(FilterDefault); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js index aad0acad8b..aca73d643b 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import Icon from 'src/components/Icon'; -import Checkmark from 'react-feather/dist/icons/check'; import classify from 'src/classify'; import defaultClasses from './filterList.css'; import { List } from '@magento/peregrine'; @@ -15,59 +15,31 @@ class FilterList extends Component { updateChosenItems: PropTypes.func }; - static getDerivedStateFromProps(nextProps, prevState) { - const updatedChosenOptions = nextProps.chosenOptions; - return prevState.chosenOptions !== updatedChosenOptions - ? { chosenOptions: updatedChosenOptions } - : null; - } - - state = { - chosenOptions: [] - }; - addOption = item => { - const { updateChosenItems } = this.props; - updateChosenItems(this.state.chosenOptions.concat([item])); + const { filterAdd } = this.props; + filterAdd(item); + console.log('FILTER ADD', item); }; - removeOption = option => { - const { updateChosenItems } = this.props; - const { chosenOptions } = this.state; - const filteredOptions = chosenOptions.filter( - currentOption => - currentOption.title !== option.title && - currentOption.value !== option.value - ); - updateChosenItems(filteredOptions); + removeOption = item => { + const { filterRemove } = this.props; + filterRemove(item); }; toggleOption = event => { - const { value, title } = event.currentTarget || event.srcElement; - this.isOptionActive({ title, value }) - ? this.removeOption({ title, value }) - : this.addOption({ title, value }); + const { value, title, dataset } = + event.currentTarget || event.srcElement; + const { group } = dataset; + this.isOptionActive({ title, value, group }) + ? this.removeOption({ title, value, group }) + : this.addOption({ title, value, group }); }; isOptionActive = option => - this.state.chosenOptions.findIndex( + this.props.chosenOptions.findIndex( item => item.value === option.value && item.name === option.name ) > -1; - getFilterIcon = value => { - const { classes } = this.props; - return ( - this.isOptionActive(value) && ( - - ) - ); - }; - getLayout = options => { const { layout } = options || ''; const { classes } = this.props; @@ -84,8 +56,12 @@ class FilterList extends Component { filterRenderOptions[`${value}`] || filterRenderOptions[filterModes.default]; + shouldComponentUpdate = ({ chosenOptions }) => { + return false; + }; + render() { - const { toggleOption, getFilterIcon } = this; + const { toggleOption } = this; const { classes, items, id } = this.props; const { mode, options } = this.getRenderOptions(id); @@ -94,10 +70,12 @@ class FilterList extends Component { const isSwatch = filterModes[mode] === filterModes.swatch; + console.log('ID', id); + return ( `${id}-${value_string}`} + getItemKey={({ value_string }) => `item-${id}-${value_string}`} render={props => (
        {props.children}
      )} @@ -108,29 +86,13 @@ class FilterList extends Component { {...item} group={id} options={options} - isActive={this.isOptionActive({ - title: item.label, - value: item.value_string - })} toggleOption={toggleOption} - icon={getFilterIcon({ - title: item.label, - value: item.value_string - })} /> ) : ( )} @@ -140,4 +102,15 @@ class FilterList extends Component { } } -export default classify(defaultClasses)(FilterList); +const mapStateToProps = ({ catalog }, { id }) => { + const { chosenFilterOptions } = catalog; + + return { + chosenOptions: chosenFilterOptions[id] || [] + }; +}; + +export default compose( + classify(defaultClasses), + connect(mapStateToProps) +)(FilterList); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js index 1b94a3eca4..7fae9d1ee4 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js @@ -1,5 +1,7 @@ -import React from 'react'; +import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; +import Icon from 'src/components/Icon'; +import Checkmark from 'react-feather/dist/icons/check'; import classify from 'src/classify'; import defaultClasses from './filterSwatch.css'; @@ -13,41 +15,62 @@ const getRandomColor = () => const memoizedGetRandomColor = memoize(getRandomColor); -const FilterSwatch = ({ - value_string, - toggleOption, - label, - icon, - options, - isActive, - classes -}) => ( - -); +class FilterSwatch extends Component { + state = { + isActive: false + }; + + updateFilterState = state => this.setState({ isActive: state }); + + componentWillUnmount = () => console.log('UIN'); + + handleFilterToggle = event => { + const { isActive } = this.state; + this.props.toggleOption(event); + this.updateFilterState(!isActive); + }; + + render() { + const { options, value_string, label, classes, group } = this.props; + + const { isActive } = this.state; + + const { handleFilterToggle } = this; + + return ( + + ); + } +} export default classify(defaultClasses)(FilterSwatch); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index 8782ce02fc..f8940c20da 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; import PropTypes from 'prop-types'; import classify from 'src/classify'; import get from 'lodash/get'; @@ -45,23 +47,18 @@ class FilterBlock extends Component { }); }; - getChosenFilterOptionsForItem = () => { - const { chosenFilterOptions } = this.props; - return get(chosenFilterOptions, `chosenItems`, []); - }; - render() { const { classes, item: { name, filter_items, request_var }, - chosenFilterOptions + chosenFilterOptions, + filterRemove, + filterAdd } = this.props; const { isExpanded } = this.state; - const chosenOptions = this.getChosenFilterOptionsForItem( - chosenFilterOptions - ); + console.log('HAT I CHOOSE', this.props.chosenFilterOptions); return (
      @@ -84,9 +81,11 @@ class FilterBlock extends Component { } >
      @@ -95,4 +94,4 @@ class FilterBlock extends Component { } } -export default classify(defaultClasses)(FilterBlock); +export default compose(classify(defaultClasses))(FilterBlock); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 050de90951..33e4ac2e81 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -14,9 +14,7 @@ class FilterModal extends Component { root: PropTypes.string, searchFilterContainer: PropTypes.string }), - closeModalHandler: PropTypes.func, - chosenFilterOptions: PropTypes.object, - updateChosenFilterOptions: PropTypes.func + closeModalHandler: PropTypes.func }; state = { @@ -24,8 +22,8 @@ class FilterModal extends Component { }; resetFilterOptions = () => { - const { updateChosenFilterOptions } = this.props; - updateChosenFilterOptions({}); + const { filterClear } = this.props; + filterClear(); }; getFooterButtons = areOptionsPristine => { @@ -65,8 +63,8 @@ class FilterModal extends Component { classes, isModalOpen, closeModalHandler, - chosenFilterOptions, - updateChosenFilterOptions + filterAdd, + filterRemove } = this.props; let { filters } = this.props; const { filterSearchTerm } = this.state; @@ -93,8 +91,6 @@ class FilterModal extends Component {
    - - request_var} @@ -107,12 +103,8 @@ class FilterModal extends Component {
    • )} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js index 23f7aff774..a6feec1ea3 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js @@ -1,19 +1,17 @@ import { connect } from 'react-redux'; import FilterModal from './filterModal'; import catalogActions from 'src/actions/catalog'; +import catalog from '../../../reducers/catalog'; -const mapStateToProps = ({ catalog }) => { - const { chosenFilterOptions } = catalog; - return { - chosenFilterOptions - }; -}; +console.log('CATALOG ACTIONS', catalogActions); const mapDispatchToProps = { - updateChosenFilterOptions: catalogActions.updateChosenFilterOptions + filterAdd: catalogActions.filterOption.add, + filterRemove: catalogActions.filterOption.remove, + filterClear: catalogActions.filterOption.clear }; export default connect( - mapStateToProps, + null, mapDispatchToProps )(FilterModal); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js index b2faaba4b2..a69624e1cb 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js @@ -10,7 +10,9 @@ const mapStateToProps = ({ catalog }) => { }; const mapDispatchToProps = { - updateChosenFilterOptions: catalogActions.updateChosenFilterOptions + filterAdd: catalogActions.filterOptionAdd, + filterRemove: catalogActions.filterOptionRemove, + filterClear: catalogActions.filterOptionClear }; export default connect( diff --git a/packages/venia-concept/src/actions/catalog/actions.js b/packages/venia-concept/src/actions/catalog/actions.js index 40e8d5e144..9ce0463d27 100644 --- a/packages/venia-concept/src/actions/catalog/actions.js +++ b/packages/venia-concept/src/actions/catalog/actions.js @@ -15,7 +15,11 @@ const actionMap = { REQUEST: null, RECEIVE: null }, - UPDATE_CHOSEN_FILTER_OPTIONS: null + FILTER_OPTION: { + ADD: null, + REMOVE: null, + CLEAR: null + } }; export default createActions(actionMap, { prefix }); diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index 1bd49df072..221af77483 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -45,25 +45,43 @@ const reducerMap = { prevPageTotal: payload }; }, - [actions.updateChosenFilterOptions]: ( + [actions.filterOption.add]: ( state, - { payload: { optionName, optionItems, optionLabel } } + { payload: { group, title, value } } ) => { - return optionName - ? { - ...state, - chosenFilterOptions: { - ...state.chosenFilterOptions, - [optionName]: { - chosenItems: optionItems, - optionLabel: optionLabel - } - } - } - : { - ...state, - chosenFilterOptions: {} - }; + const oldState = state.chosenFilterOptions[group] || []; + const newState = oldState.concat({ title, value }); + + return { + ...state, + chosenFilterOptions: { + ...state.chosenFilterOptions, + [group]: newState + } + }; + }, + [actions.filterOption.remove]: ( + state, + { payload: { group, title, value } } + ) => { + const oldState = state.chosenFilterOptions[group] || []; + const newState = oldState.filter(item => { + return item.title !== title || item.value !== value; + }); + + return { + ...state, + chosenFilterOptions: { + ...state.chosenFilterOptions, + [group]: newState + } + }; + }, + [actions.filterOption.clear]: state => { + return { + ...state, + chosenFilterOptions: {} + }; } }; From 56fb22c870cb5b9e77aa3de5ef3e644e0b003e23 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 24 Jan 2019 10:37:45 +0100 Subject: [PATCH 12/91] Removing state and using props again, partial fix --- .../FilterModal/FilterList/filterDefault.js | 29 ++++------- .../FilterModal/FilterList/filterList.js | 51 +++++++++++-------- .../FilterModal/FilterList/filterSwatch.js | 28 ++++------ 3 files changed, 48 insertions(+), 60 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js index a9f85445bd..2b85bdcb52 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js @@ -6,26 +6,15 @@ import classify from 'src/classify'; import defaultClasses from './filterDefault.css'; class FilterDefault extends Component { - state = { - isActive: false - }; - - updateFilterState = state => this.setState({ isActive: state }); - - componentWillUnmount = () => console.log('UIN'); - - handleFilterToggle = event => { - const { isActive } = this.state; - this.props.toggleOption(event); - this.updateFilterState(!isActive); - }; - render() { - const { value_string, label, classes, group } = this.props; - - const { isActive } = this.state; - - const { handleFilterToggle } = this; + const { + value_string, + toggleOption, + label, + classes, + group, + isActive + } = this.props; return ( - ); - } -} +const FilterDefault = ({ + value_string, + toggleOption, + label, + classes, + group, + isActive +}) => ( + +); export default classify(defaultClasses)(FilterDefault); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js index f101276812..6d58334a7e 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js @@ -15,24 +15,13 @@ class FilterList extends Component { updateChosenItems: PropTypes.func }; - addOption = item => { - const { filterAdd } = this.props; - filterAdd(item); - console.log('FILTER ADD', item); - }; - - removeOption = item => { - const { filterRemove } = this.props; - filterRemove(item); - }; - toggleOption = event => { + const { filterRemove, filterAdd } = this.props; const { value, title, dataset } = event.currentTarget || event.srcElement; const { group } = dataset; - this.isOptionActive({ title, value, group }) - ? this.removeOption({ title, value, group }) - : this.addOption({ title, value, group }); + const item = { title, value, group }; + this.isOptionActive(item) ? filterRemove(item) : filterAdd(item); }; isOptionActive = option => diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js index 5a5f8882fb..83dd156092 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js @@ -15,54 +15,46 @@ const getRandomColor = () => const memoizedGetRandomColor = memoize(getRandomColor); -class FilterSwatch extends Component { - componentWillUnmount = () => console.log('UIN'); - - render() { - const { - options, - isActive, - toggleOption, - value_string, - label, - classes, - group - } = this.props; - - return ( - - ); - } -} +const FilterSwatch = ({ + options, + isActive, + toggleOption, + value_string, + label, + classes, + group +}) => ( + +); export default classify(defaultClasses)(FilterSwatch); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index f8940c20da..93ec979c62 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -58,8 +58,6 @@ class FilterBlock extends Component { const { isExpanded } = this.state; - console.log('HAT I CHOOSE', this.props.chosenFilterOptions); - return (
    diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 33e4ac2e81..d5011a1ffe 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -53,29 +53,17 @@ class FilterModal extends Component { ); }; - handleFilterSearch = event => { - const { value } = event.currentTarget || event.srcElement; - this.setState({ filterSearchTerm: value }); - }; - render() { const { classes, isModalOpen, closeModalHandler, filterAdd, - filterRemove + filterRemove, + filters } = this.props; - let { filters } = this.props; - const { filterSearchTerm } = this.state; - const areOptionsPristine = false; - filters = filters.filter( - filter => - `${filter.name}` - .toUpperCase() - .indexOf(filterSearchTerm.toUpperCase()) >= 0 - ); + const areOptionsPristine = false; const modalClass = isModalOpen ? classes.rootOpen : classes.root; @@ -87,9 +75,8 @@ class FilterModal extends Component {
    -
    - -
    + + { - const { title, value } = event.currentTarget || event.srcElement; - const { group } = - event.currentTarget.dataset || event.srcElement.dataset; - const { updateChosenFilterOptions, chosenFilterOptions } = this.props; - const filterGroup = chosenFilterOptions[group].chosenItems; - - const filteredOptions = filterGroup.filter( - currentOption => - currentOption.title !== title && currentOption.value !== value - ); - - updateChosenFilterOptions({ - optionName: group, - optionItems: filteredOptions - }); + const { title, value, dataset } = + event.currentTarget || event.srcElement; + const { group } = dataset; + const { filterRemove } = this.props; + filterRemove({ title, value, group }); }; render() { - const { chosenFilterOptions, classes } = this.props; + const { chosenFilterOptions, classes, id } = this.props; const { removeOption } = this; return (
      {Object.keys(chosenFilterOptions).map(key => - chosenFilterOptions[key].chosenItems.map( - ({ title, value }) => ( -
    • -
      • - ) - ) + chosenFilterOptions[key].map(({ title, value }) => ( +
    • +
      • + )) )}
    ); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js index a69624e1cb..bc39ff017f 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js @@ -10,9 +10,7 @@ const mapStateToProps = ({ catalog }) => { }; const mapDispatchToProps = { - filterAdd: catalogActions.filterOptionAdd, - filterRemove: catalogActions.filterOptionRemove, - filterClear: catalogActions.filterOptionClear + filterRemove: catalogActions.filterOption.remove }; export default connect( From 0c1f981360b151c677c3098c285cbab04d17be20 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 24 Jan 2019 13:15:45 +0100 Subject: [PATCH 14/91] Code cleanup and swatch styles adjustments --- .../FilterModal/FilterList/filterSwatch.css | 8 +++----- .../FilterModal/FilterList/filterSwatch.js | 2 +- .../Category/FilterModal/filterBlock.css | 16 +--------------- .../Category/FilterModal/filterBlock.js | 2 +- .../Category/FilterModal/filtersCurrent.js | 2 +- packages/venia-concept/src/reducers/catalog.js | 3 ++- 6 files changed, 9 insertions(+), 24 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css index 7e05c0456b..fe3ca7e7ac 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css @@ -14,12 +14,10 @@ } .iconWrapper { + color: white; position: absolute; - top: 50%; - bottom: 0; - left: 0; - right: 0; - transform: translateY(-50%); + display: flex; + height: 100%; } .swatchLabel { diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js index 83dd156092..f124cb116a 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js @@ -40,7 +40,7 @@ const FilterSwatch = ({ }} /> - + )} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css index 0986cdf076..3d379ccd18 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css @@ -22,21 +22,7 @@ display: block; } -.counter { - display: flex; - justify-content: space-evenly; - align-items: center; - border: 1px solid black; - border-radius: 15px; - height: 1.5rem; - min-width: 3.375rem; - background-color: white; - margin-right: 1rem; - font-size: 0.75rem; - line-height: 1rem; -} - -.counterAndCloseButtonContainer { +.closeWrapper { display: flex; justify-content: space-between; } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index 93ec979c62..2c589eeff1 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -62,7 +62,7 @@ class FilterBlock extends Component {
    {name}
    -
    +
    -
    + +
    + > + + + )) )} From f6c9f9a194d10328d06b5ed0294f97058fefa8e3 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 24 Jan 2019 14:29:55 +0100 Subject: [PATCH 16/91] Swatch adjustment --- .../Category/FilterModal/FilterList/filterSwatch.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css index 5bcce11740..4581d077f7 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css @@ -23,6 +23,7 @@ .swatchLabel { position: absolute; + pointer-events: none; bottom: 100%; margin-left: auto; margin-right: auto; From f5a7002daacd48de4ffc49fc5522de38fe352326 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 24 Jan 2019 14:59:02 +0100 Subject: [PATCH 17/91] Code cleanup --- .../RootComponents/Category/FilterModal/filterModal.css | 6 ++++-- .../src/RootComponents/Category/FilterModal/filterModal.js | 7 +++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css index 484943e846..06ece33a08 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css @@ -38,7 +38,7 @@ position: fixed; background-color: white; display: flex; - justify-content: space-around; + justify-content: center; left: 0; right: 0; bottom: 0; @@ -47,7 +47,9 @@ } .footerButton { - height: 2.125rem; + padding: 0.5rem; + margin-left: 0.5rem; + margin-right: 0.5rem; width: 9rem; border: 1px solid black; border-radius: 100px; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index d5011a1ffe..09e189ffd7 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -26,6 +26,8 @@ class FilterModal extends Component { filterClear(); }; + handleApplyFilters = () => {}; + getFooterButtons = areOptionsPristine => { const { classes } = this.props; return ( @@ -38,16 +40,17 @@ class FilterModal extends Component { : classes.resetButton } > - Reset all filters + Reset Filters ); From ad39d5c0a12bed7e18c3411ad433a9759dbde311 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 25 Jan 2019 10:14:05 +0100 Subject: [PATCH 18/91] Code cleanup, code splitting, URL functionality --- .../FilterModal/FilterFooter/filterFooter.css | 49 +++++++++ .../FilterModal/FilterFooter/filterFooter.js | 99 +++++++++++++++++++ .../FilterModal/FilterFooter/index.js | 1 + .../FilterModal/FilterFooter/utils.js | 36 +++++++ .../{ => FiltersCurrent}/filtersCurrent.css | 0 .../FiltersCurrent/filtersCurrent.js | 58 +++++++++++ .../filtersCurrentContainer.js | 2 +- .../FilterModal/FiltersCurrent/index.js | 1 + .../Category/FilterModal/filterBlock.css | 9 ++ .../Category/FilterModal/filterBlock.js | 49 ++++----- .../Category/FilterModal/filterModal.css | 61 ------------ .../Category/FilterModal/filterModal.js | 60 ++--------- .../FilterModal/filterModalContainer.js | 3 +- .../Category/FilterModal/filtersCurrent.js | 55 ----------- 14 files changed, 290 insertions(+), 193 deletions(-) create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/index.js create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/utils.js rename packages/venia-concept/src/RootComponents/Category/FilterModal/{ => FiltersCurrent}/filtersCurrent.css (100%) create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.js rename packages/venia-concept/src/RootComponents/Category/FilterModal/{ => FiltersCurrent}/filtersCurrentContainer.js (89%) create mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/index.js delete mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css new file mode 100644 index 0000000000..0d706a1e83 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css @@ -0,0 +1,49 @@ +.footer { + position: fixed; + background-color: white; + display: flex; + justify-content: center; + left: 0; + right: 0; + bottom: 0; + padding: 1.5rem; + border-top: 2px solid rgb(var(--venia-border)); +} + +.footerButton { + padding: 0.5rem; + margin-left: 0.5rem; + margin-right: 0.5rem; + width: 9rem; + border: 1px solid black; + border-radius: 100px; + color: black; + outline: none; +} + +.footerButtonDisabled { + composes: footerButton; + border: 1px solid #d1d1d1; + color: #d1d1d1; +} + +.resetButton { + composes: footerButton; +} + +.resetButtonDisabled { + composes: footerButtonDisabled; + background-color: white; +} + +.applyButton { + composes: footerButton; + color: white; + background-color: black; +} + +.applyButtonDisabled { + composes: footerButtonDisabled; + color: white; + background-color: #d1d1d1; +} diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js new file mode 100644 index 0000000000..87ac0be717 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js @@ -0,0 +1,99 @@ +import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; +import catalogActions from 'src/actions/catalog'; +import { withRouter } from 'react-router-dom'; +import classify from 'src/classify'; +import { serialize } from './utils'; +import defaultClasses from './filterFooter.css'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; + +class FilterFooter extends Component { + static getDerivedStateFromProps(nextProps) { + const { chosenFilterOptions } = nextProps; + let filterOptionsArePristine = true; + + for (const optionName in chosenFilterOptions) { + if (chosenFilterOptions[optionName].length > 0) { + filterOptionsArePristine = false; + break; + } + } + + return { areOptionsPristine: filterOptionsArePristine }; + } + + state = { + areOptionsPristine: true + }; + + resetFilterOptions = () => this.props.filterClear(); + + handleApplyFilters = () => { + const { history, chosenFilterOptions } = this.props; + history.push('?' + serialize(chosenFilterOptions)); + }; + + getFooterButtons = areOptionsPristine => { + const { classes } = this.props; + return ( + + + + + ); + }; + + render() { + const { areOptionsPristine } = this.state; + const { classes } = this.props; + + return ( +
    + {areOptionsPristine} + {this.getFooterButtons(areOptionsPristine)} +
    + ); + } +} + +const mapStateToProps = ({ catalog }) => { + const { chosenFilterOptions } = catalog; + + return { + chosenFilterOptions: chosenFilterOptions + }; +}; + +const mapDispatchToProps = { + filterClear: catalogActions.filterOption.clear +}; + +export default compose( + withRouter, + classify(defaultClasses), + connect( + mapStateToProps, + mapDispatchToProps + ) +)(FilterFooter); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/index.js new file mode 100644 index 0000000000..49c63577ad --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/index.js @@ -0,0 +1 @@ +export { default } from './filterFooter'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/utils.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/utils.js new file mode 100644 index 0000000000..a4071fd556 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/utils.js @@ -0,0 +1,36 @@ +export const serialize = (params, keys = [], isArray = false) => { + const p = Object.keys(params) + .map(key => { + let val = params[key]; + + if ( + '[object Object]' === Object.prototype.toString.call(val) || + Array.isArray(val) + ) { + if (Array.isArray(params)) { + keys.push(''); + } else { + keys.push(key); + } + return serialize(val, keys, Array.isArray(val)); + } else { + let tKey = key; + + if (keys.length > 0) { + const tKeys = isArray ? keys : [...keys, key]; + tKey = tKeys.reduce((str, k) => { + return '' === str ? k : `${str}[${k}]`; + }, ''); + } + if (isArray) { + return `${tKey}[]=${val}`; + } else { + return `${tKey}=${val}`; + } + } + }) + .join('&'); + + keys.pop(); + return p; +}; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.css rename to packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.js new file mode 100644 index 0000000000..78d554505f --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.js @@ -0,0 +1,58 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Icon from 'src/components/Icon'; +import Remove from 'react-feather/dist/icons/x'; +import classify from 'src/classify'; +import defaultClasses from './filtersCurrent.css'; + +class FiltersCurrent extends Component { + removeOption = event => { + const { title, value, dataset } = + event.currentTarget || event.srcElement; + const { group } = dataset; + const { filterRemove } = this.props; + filterRemove({ title, value, group }); + }; + + getCurrentFilter = (item, key) => { + const { removeOption } = this; + const { classes, keyPrefix } = this.props; + const { title, value } = item; + + return ( +
  • + +
    • + ); + }; + + render() { + const { chosenFilterOptions, classes } = this.props; + const { getCurrentFilter } = this; + + return ( +
      + {Object.keys(chosenFilterOptions).map(key => + chosenFilterOptions[key].map(item => + getCurrentFilter(item, key) + ) + )} +
    + ); + } +} + +export default classify(defaultClasses)(FiltersCurrent); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrentContainer.js similarity index 89% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js rename to packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrentContainer.js index bc39ff017f..02cec70dfd 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrentContainer.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrentContainer.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import FiltersCurrent from './filtersCurrent'; +import FiltersCurrent from './FiltersCurrent'; import catalogActions from 'src/actions/catalog'; const mapStateToProps = ({ catalog }) => { diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/index.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/index.js new file mode 100644 index 0000000000..2ec78daf07 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/index.js @@ -0,0 +1 @@ +export { default as FiltersCurrent } from './filtersCurrentContainer'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css index 8f5ee10905..49108ffec7 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css @@ -1,3 +1,12 @@ +.root:first-child { + border-top: 2px solid rgb(var(--venia-border)); + border-bottom: 2px solid rgb(var(--venia-border)); +} + +.root { + border-bottom: 2px solid rgb(var(--venia-border)); +} + .clearIcon { display: flex; } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index 267b6660cc..61f478a1d3 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -44,10 +44,32 @@ class FilterBlock extends Component { }); }; + getControlBlock = isExpanded => { + const { classes, item } = this.props; + const iconSrc = isExpanded ? ArrowUp : ArrowDown; + const nameClass = isExpanded + ? classes.optionNameExpanded + : classes.optionName; + + return ( +
    + +
    + ); + }; + render() { const { classes, - item: { name, filter_items, request_var }, + item: { filter_items, request_var }, chosenFilterOptions, filterRemove, filterAdd @@ -56,26 +78,9 @@ class FilterBlock extends Component { const { isExpanded } = this.state; return ( -
    -
    - -
    +
  • + {this.getControlBlock(isExpanded)} +
    -
    • + ); } } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css index 06ece33a08..e4c29e9a11 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css @@ -33,67 +33,6 @@ padding: 0.5rem 1.5rem 7.5rem; } -/* TODO: find out how to place buttons on desktop layout */ -.footer { - position: fixed; - background-color: white; - display: flex; - justify-content: center; - left: 0; - right: 0; - bottom: 0; - padding: 1.5rem; - border-top: 2px solid rgb(var(--venia-border)); -} - -.footerButton { - padding: 0.5rem; - margin-left: 0.5rem; - margin-right: 0.5rem; - width: 9rem; - border: 1px solid black; - border-radius: 100px; - color: black; - outline: none; -} - -.footerButtonDisabled { - composes: footerButton; - height: 3rem; - border: 1px solid #d1d1d1; - color: #d1d1d1; -} - -.resetButton { - composes: footerButton; -} - -.resetButtonDisabled { - composes: footerButtonDisabled; - background-color: white; -} - -.applyButton { - composes: footerButton; - color: white; - background-color: black; -} - -.applyButtonDisabled { - composes: footerButtonDisabled; - color: white; - background-color: #d1d1d1; -} - -.filterOptionItem:first-child { - border-top: 2px solid rgb(var(--venia-border)); - border-bottom: 2px solid rgb(var(--venia-border)); -} - -.filterOptionItem { - border-bottom: 2px solid rgb(var(--venia-border)); -} - .searchFilterContainer { margin-bottom: 1.125rem; } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 09e189ffd7..e753a8658b 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -1,7 +1,8 @@ import React, { Component, Fragment } from 'react'; +import FilterFooter from './FilterFooter'; import PropTypes from 'prop-types'; import { List } from '@magento/peregrine'; -import FiltersCurrent from './filtersCurrentContainer'; +import { FiltersCurrent } from './FiltersCurrent'; import classify from 'src/classify'; import CloseIcon from 'react-feather/dist/icons/x'; import Icon from 'src/components/Icon'; @@ -17,45 +18,6 @@ class FilterModal extends Component { closeModalHandler: PropTypes.func }; - state = { - filterSearchTerm: '' - }; - - resetFilterOptions = () => { - const { filterClear } = this.props; - filterClear(); - }; - - handleApplyFilters = () => {}; - - getFooterButtons = areOptionsPristine => { - const { classes } = this.props; - return ( - - - - - ); - }; - render() { const { classes, @@ -66,8 +28,6 @@ class FilterModal extends Component { filters } = this.props; - const areOptionsPristine = false; - const modalClass = isModalOpen ? classes.rootOpen : classes.root; return ( @@ -90,18 +50,14 @@ class FilterModal extends Component { )} renderItem={props => ( -
  • - -
    • + )} /> -
    - {this.getFooterButtons(areOptionsPristine)} -
    +
    ); } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js index 76f1278547..432bc22c31 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js @@ -4,8 +4,7 @@ import catalogActions from 'src/actions/catalog'; const mapDispatchToProps = { filterAdd: catalogActions.filterOption.add, - filterRemove: catalogActions.filterOption.remove, - filterClear: catalogActions.filterOption.clear + filterRemove: catalogActions.filterOption.remove }; export default connect( diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js deleted file mode 100644 index b2dc513c0f..0000000000 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filtersCurrent.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import Icon from 'src/components/Icon'; -import Remove from 'react-feather/dist/icons/x'; -import classify from 'src/classify'; -import defaultClasses from './filtersCurrent.css'; - -class FiltersCurrent extends Component { - removeOption = event => { - const { title, value, dataset } = - event.currentTarget || event.srcElement; - const { group } = dataset; - const { filterRemove } = this.props; - filterRemove({ title, value, group }); - }; - - render() { - const { chosenFilterOptions, classes, keyPrefix } = this.props; - const { removeOption } = this; - - return ( -
      - {Object.keys(chosenFilterOptions).map(key => - chosenFilterOptions[key].map(({ title, value }) => ( -
    • - -
      • - )) - )} -
    - ); - } -} - -export default classify(defaultClasses)(FiltersCurrent); From 1819a9163c1887255b9cafc8f6c8a194395eb927 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 25 Jan 2019 10:20:09 +0100 Subject: [PATCH 19/91] URL clear feature --- .../Category/FilterModal/FilterFooter/filterFooter.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js index 87ac0be717..fa9e3dbb40 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js @@ -27,7 +27,11 @@ class FilterFooter extends Component { areOptionsPristine: true }; - resetFilterOptions = () => this.props.filterClear(); + resetFilterOptions = () => { + const { history, filterClear } = this.props; + history.push('?' + ''); + filterClear(); + }; handleApplyFilters = () => { const { history, chosenFilterOptions } = this.props; From 663274c287b423f66da1df5057121ffa3512f3e5 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 25 Jan 2019 15:35:47 +0100 Subject: [PATCH 20/91] Get Filter params from URL --- .../FilterModal/FilterList/filterList.js | 3 +- .../Category/FilterModal/filterBlock.js | 41 +++++++++++++++++-- .../Category/FilterModal/filterModal.js | 2 + .../FilterModal/filterModalContainer.js | 1 + 4 files changed, 42 insertions(+), 5 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js index 6d58334a7e..59955e1676 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js @@ -15,6 +15,8 @@ class FilterList extends Component { updateChosenItems: PropTypes.func }; + componentWillUnmount = () => console.log('LiST UNMOUNT'); + toggleOption = event => { const { filterRemove, filterAdd } = this.props; const { value, title, dataset } = @@ -35,7 +37,6 @@ class FilterList extends Component { switch (layout) { case filterLayouts.grid: return classes.rootGrid; - break; default: return classes.root; } diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index 61f478a1d3..80f8fb157d 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classify from 'src/classify'; +import { compose } from 'redux'; +import { withRouter } from 'react-router-dom'; import FilterList from './FilterList'; import Icon from 'src/components/Icon'; import ArrowDown from 'react-feather/dist/icons/chevron-down'; @@ -24,7 +26,8 @@ class FilterBlock extends Component { }; state = { - isExpanded: false + isExpanded: false, + chosenItemsFromUrl: {} }; resetChosenItems = () => { @@ -44,6 +47,35 @@ class FilterBlock extends Component { }); }; + getFilterParams = location => { + const { + item: { request_var } + } = this.props; + const params = new URLSearchParams(location.search); + let titles, + values = []; + + let urlFilterParams = {}; + + for (var key of params.keys()) { + titles = params.getAll(key); + values = params.getAll(key); + + urlFilterParams = titles.map((title, index) => ({ + group: request_var, + title: title, + value: values[index] + })); + } + + return urlFilterParams; + }; + + componentDidMount = () => { + const filterParams = this.getFilterParams(this.props.history.location); + console.log('FILTER PARASM', filterParams); + }; + getControlBlock = isExpanded => { const { classes, item } = this.props; const iconSrc = isExpanded ? ArrowUp : ArrowDown; @@ -70,7 +102,6 @@ class FilterBlock extends Component { const { classes, item: { filter_items, request_var }, - chosenFilterOptions, filterRemove, filterAdd } = this.props; @@ -93,7 +124,6 @@ class FilterBlock extends Component { filterRemove={filterRemove} id={request_var} items={filter_items} - chosenOptions={chosenFilterOptions || []} updateChosenItems={this.updateChosenItems} />
    @@ -102,4 +132,7 @@ class FilterBlock extends Component { } } -export default classify(defaultClasses)(FilterBlock); +export default compose( + withRouter, + classify(defaultClasses) +)(FilterBlock); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index e753a8658b..627dcd2e80 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -23,6 +23,7 @@ class FilterModal extends Component { classes, isModalOpen, closeModalHandler, + filterSet, filterAdd, filterRemove, filters @@ -52,6 +53,7 @@ class FilterModal extends Component { renderItem={props => ( diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js index 432bc22c31..d62e7afb79 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js @@ -3,6 +3,7 @@ import FilterModal from './filterModal'; import catalogActions from 'src/actions/catalog'; const mapDispatchToProps = { + filterSet: catalogActions.filterOption.set, filterAdd: catalogActions.filterOption.add, filterRemove: catalogActions.filterOption.remove }; From 6b7d7eb4907f0116bef658e6af83bd79e241f2e3 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 28 Jan 2019 10:14:52 +0100 Subject: [PATCH 21/91] Filters URL query --- .../Category/FilterModal/filterBlock.js | 34 +------------ .../Category/FilterModal/filterModal.js | 48 ++++++++++++++++++- 2 files changed, 48 insertions(+), 34 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index 80f8fb157d..d031589762 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -47,35 +47,6 @@ class FilterBlock extends Component { }); }; - getFilterParams = location => { - const { - item: { request_var } - } = this.props; - const params = new URLSearchParams(location.search); - let titles, - values = []; - - let urlFilterParams = {}; - - for (var key of params.keys()) { - titles = params.getAll(key); - values = params.getAll(key); - - urlFilterParams = titles.map((title, index) => ({ - group: request_var, - title: title, - value: values[index] - })); - } - - return urlFilterParams; - }; - - componentDidMount = () => { - const filterParams = this.getFilterParams(this.props.history.location); - console.log('FILTER PARASM', filterParams); - }; - getControlBlock = isExpanded => { const { classes, item } = this.props; const iconSrc = isExpanded ? ArrowUp : ArrowDown; @@ -132,7 +103,4 @@ class FilterBlock extends Component { } } -export default compose( - withRouter, - classify(defaultClasses) -)(FilterBlock); +export default compose(classify(defaultClasses))(FilterBlock); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 627dcd2e80..46ee8b3138 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -1,6 +1,8 @@ import React, { Component, Fragment } from 'react'; import FilterFooter from './FilterFooter'; import PropTypes from 'prop-types'; +import { compose } from 'redux'; +import { withRouter } from 'react-router-dom'; import { List } from '@magento/peregrine'; import { FiltersCurrent } from './FiltersCurrent'; import classify from 'src/classify'; @@ -18,6 +20,47 @@ class FilterModal extends Component { closeModalHandler: PropTypes.func }; + getFilterParams = location => { + const params = new URLSearchParams(location.search); + let titles, + values = []; + + let urlFilterParams = {}; + + for (var key of params.keys()) { + const cleanKey = key.replace(/\[\]\[.*\]/gm, ''); + + if (urlFilterParams[cleanKey]) continue; + + titles = params.getAll(`${cleanKey}[][title]`); + values = params.getAll(`${cleanKey}[][value]`); + + console.log('K/T/V', { cleanKey, titles, values }); + + urlFilterParams[cleanKey] = titles.map((title, index) => ({ + title: title, + value: values[index] + })); + } + + return urlFilterParams; + }; + + componentDidMount = () => { + const filterParams = this.getFilterParams(this.props.history.location); + for (var key in filterParams) { + if (filterParams.hasOwnProperty(key)) { + filterParams[key].map(({ title, value }) => { + this.props.filterAdd({ + group: key, + title, + value + }); + }); + } + } + }; + render() { const { classes, @@ -65,4 +108,7 @@ class FilterModal extends Component { } } -export default classify(defaultClasses)(FilterModal); +export default compose( + withRouter, + classify(defaultClasses) +)(FilterModal); From 0a3c6cd5b292b3c47509f1c97faffbf17eb5c219 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 28 Jan 2019 10:18:37 +0100 Subject: [PATCH 22/91] Cleanup --- .../src/RootComponents/Category/FilterModal/filterBlock.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js index d031589762..e861f4a461 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js @@ -1,8 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classify from 'src/classify'; -import { compose } from 'redux'; -import { withRouter } from 'react-router-dom'; import FilterList from './FilterList'; import Icon from 'src/components/Icon'; import ArrowDown from 'react-feather/dist/icons/chevron-down'; @@ -103,4 +101,4 @@ class FilterBlock extends Component { } } -export default compose(classify(defaultClasses))(FilterBlock); +export default classify(defaultClasses)(FilterBlock); From 1b32eca80c701ea25657c3ee7b0a435f86a4d453 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 28 Jan 2019 10:25:31 +0100 Subject: [PATCH 23/91] Cleanup console logs --- .../Category/FilterModal/FilterList/filterList.js | 2 -- .../src/RootComponents/Category/FilterModal/filterModal.js | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js index 59955e1676..447dce70dc 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js @@ -15,8 +15,6 @@ class FilterList extends Component { updateChosenItems: PropTypes.func }; - componentWillUnmount = () => console.log('LiST UNMOUNT'); - toggleOption = event => { const { filterRemove, filterAdd } = this.props; const { value, title, dataset } = diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 46ee8b3138..00a0417511 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -35,8 +35,6 @@ class FilterModal extends Component { titles = params.getAll(`${cleanKey}[][title]`); values = params.getAll(`${cleanKey}[][value]`); - console.log('K/T/V', { cleanKey, titles, values }); - urlFilterParams[cleanKey] = titles.map((title, index) => ({ title: title, value: values[index] From 6ea227454b223cf1c2291b82cbb61ae23b7749db Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 28 Jan 2019 15:06:02 +0100 Subject: [PATCH 24/91] Drawer adjustment & styles update --- .../FilterModal/FilterFooter/filterFooter.css | 1 + .../FilterModal/FilterFooter/filterFooter.js | 3 +- .../Category/FilterModal/filterModal.css | 27 ++++++++-- .../Category/FilterModal/filterModal.js | 52 ++++++++++--------- .../src/RootComponents/Category/category.js | 22 ++++++-- .../Category/categoryContent.js | 25 +++------ .../src/components/Main/main.css | 1 - 7 files changed, 79 insertions(+), 52 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css index 0d706a1e83..97bfede436 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css @@ -8,6 +8,7 @@ bottom: 0; padding: 1.5rem; border-top: 2px solid rgb(var(--venia-border)); + max-width: 640px; } .footerButton { diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js index fa9e3dbb40..d31c3de094 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js @@ -34,8 +34,9 @@ class FilterFooter extends Component { }; handleApplyFilters = () => { - const { history, chosenFilterOptions } = this.props; + const { history, chosenFilterOptions, closeModalHandler } = this.props; history.push('?' + serialize(chosenFilterOptions)); + closeModalHandler(); }; getFooterButtons = areOptionsPristine => { diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css index e4c29e9a11..67610cbb07 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css @@ -4,15 +4,34 @@ top: 0; right: 0; bottom: 0; - z-index: 2; - overflow: auto; background-color: white; - display: none; + max-width: 640px; + transform: translate3d(-100%, 0, 0); + transition-duration: 192ms; + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-property: opacity, transform, visibility; + visibility: hidden; + opacity: 0; + overflow: hidden; + width: 100%; + z-index: 3; + display: grid; + grid-template-rows: min-content 1fr; } .rootOpen { composes: root; - display: block; + box-shadow: 1px 0 rgb(var(--venia-border)); + opacity: 1; + transform: translate3d(0, 0, 0); + transition-duration: 224ms; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + visibility: visible; +} + +.modalWrapper { + overflow: auto; + height: 100vh; } .header { diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 00a0417511..3b520ca178 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -74,33 +74,35 @@ class FilterModal extends Component { return (
    -
    - FILTER BY - -
    +
    +
    + FILTER BY + +
    - + - request_var} - render={props => ( -
      - {props.children} -
    - )} - renderItem={props => ( - - )} - /> - + request_var} + render={props => ( +
      + {props.children} +
    + )} + renderItem={props => ( + + )} + /> +
    +
    ); } diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index 6d7786ee44..ac78d9615b 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -4,6 +4,7 @@ import { Query } from 'react-apollo'; import gql from 'graphql-tag'; import { compose } from 'redux'; import { connect } from 'react-redux'; +import { closeDrawer, toggleDrawer } from 'src/actions/app'; import classify from 'src/classify'; import { setCurrentPage, setPrevPageTotal } from 'src/actions/catalog'; @@ -63,10 +64,13 @@ class Category extends Component { id, classes, currentPage, + openDrawer, + closeDrawer, pageSize, prevPageTotal, setCurrentPage, - setPrevPageTotal + setPrevPageTotal, + drawer } = this.props; const pageControl = { @@ -82,6 +86,8 @@ class Category extends Component { currentPage: Number(currentPage) }; + const isFilterModalOpen = drawer === 'filter'; + return ( {({ loading, error, data }) => { @@ -107,6 +113,9 @@ class Category extends Component { return ( { +const mapStateToProps = ({ catalog, app }) => { return { + drawer: app.drawer, currentPage: catalog.currentPage, pageSize: catalog.pageSize, prevPageTotal: catalog.prevPageTotal }; }; -const mapDispatchToProps = { setCurrentPage, setPrevPageTotal }; + +const mapDispatchToProps = dispatch => ({ + openDrawer: () => dispatch(toggleDrawer('filter')), + closeDrawer: () => dispatch(closeDrawer()), + setCurrentPage: () => dispatch(setCurrentPage), + setPrevPageTotal: () => dispatch(setPrevPageTotal) +}); export default compose( classify(defaultClasses), diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 94b8849433..4ffadee36d 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -57,29 +57,18 @@ class CategoryContent extends Component { }) }; - state = { - filterModalOpen: false - }; - - filterModalSwitcher = () => { - const { modalIsOpen } = globalClasses; - const bodyClasses = document.querySelector('body').classList; - - bodyClasses.contains(modalIsOpen) - ? bodyClasses.remove(modalIsOpen) - : bodyClasses.add(modalIsOpen); - this.setState({ filterModalOpen: !this.state.filterModalOpen }); - }; - render() { const { classes, pageControl, data, pageSize, + openDrawer, + closeDrawer, + isFilterModalOpen, queryVariables } = this.props; - const { filterModalOpen } = this.state; + const title = data ? data.category.description : null; return ( @@ -93,7 +82,7 @@ class CategoryContent extends Component { />
    ); diff --git a/packages/venia-concept/src/components/Main/main.css b/packages/venia-concept/src/components/Main/main.css index 3b91ade884..cbe3a1d272 100644 --- a/packages/venia-concept/src/components/Main/main.css +++ b/packages/venia-concept/src/components/Main/main.css @@ -2,7 +2,6 @@ background-color: white; color: rgb(var(--venia-text)); position: relative; - z-index: 1; } .root_masked { From b138454b1d1ac5145c2cc6a053635421c82c5f8d Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Wed, 30 Jan 2019 11:30:04 +0100 Subject: [PATCH 25/91] Code cleanup & fixing pagination functions --- .../src/RootComponents/Category/FilterModal/filterModal.js | 2 -- .../Category/FilterModal/filterModalContainer.js | 1 - .../venia-concept/src/RootComponents/Category/category.js | 4 ++-- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js index 3b520ca178..9a186ea00f 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js @@ -64,7 +64,6 @@ class FilterModal extends Component { classes, isModalOpen, closeModalHandler, - filterSet, filterAdd, filterRemove, filters @@ -95,7 +94,6 @@ class FilterModal extends Component { renderItem={props => ( diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js index d62e7afb79..432bc22c31 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js @@ -3,7 +3,6 @@ import FilterModal from './filterModal'; import catalogActions from 'src/actions/catalog'; const mapDispatchToProps = { - filterSet: catalogActions.filterOption.set, filterAdd: catalogActions.filterOption.add, filterRemove: catalogActions.filterOption.remove }; diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index 75690e2a05..ab36056004 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -139,8 +139,8 @@ const mapStateToProps = ({ catalog, app }) => { const mapDispatchToProps = dispatch => ({ openDrawer: () => dispatch(toggleDrawer('filter')), closeDrawer: () => dispatch(closeDrawer()), - setCurrentPage: () => dispatch(setCurrentPage), - setPrevPageTotal: () => dispatch(setPrevPageTotal) + setCurrentPage: payload => dispatch(setCurrentPage(payload)), + setPrevPageTotal: payload => dispatch(setPrevPageTotal(payload)) }); export default compose( From b352057d23863934ffa6da9a78525fe0dbea1dc1 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Wed, 30 Jan 2019 12:46:46 +0100 Subject: [PATCH 26/91] PropTypes work in progress --- .../Category/FilterModal/constants.js | 4 -- .../Category/categoryContent.js | 3 +- .../src/components/Filter/filter.css | 18 -------- .../src/components/Filter/filter.js | 37 --------------- .../src/components/Filter/index.js | 1 - .../FilterModal/FilterFooter/filterFooter.css | 0 .../FilterModal/FilterFooter/filterFooter.js | 0 .../FilterModal/FilterFooter/index.js | 0 .../FilterModal/FilterFooter/utils.js | 0 .../FilterModal/FilterList/constants.js | 0 .../FilterModal/FilterList/filterDefault.css | 0 .../FilterModal/FilterList/filterDefault.js | 0 .../FilterModal/FilterList/filterList.css | 0 .../FilterModal/FilterList/filterList.js | 0 .../FilterModal/FilterList/filterSwatch.css | 0 .../FilterModal/FilterList/filterSwatch.js | 0 .../FilterModal/FilterList/index.js | 0 .../FiltersCurrent/filtersCurrent.css | 0 .../FiltersCurrent/filtersCurrent.js | 0 .../FiltersCurrent/filtersCurrentContainer.js | 0 .../FilterModal/FiltersCurrent/index.js | 0 .../FilterModal/filterBlock.css | 0 .../FilterModal/filterBlock.js | 45 ++++++------------- .../FilterModal/filterModal.css | 0 .../FilterModal/filterModal.js | 38 ++++++++-------- .../FilterModal/filterModalContainer.js | 11 +++-- .../FilterModal/index.js | 0 27 files changed, 41 insertions(+), 116 deletions(-) delete mode 100644 packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js delete mode 100644 packages/venia-concept/src/components/Filter/filter.css delete mode 100644 packages/venia-concept/src/components/Filter/filter.js delete mode 100644 packages/venia-concept/src/components/Filter/index.js rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterFooter/filterFooter.css (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterFooter/filterFooter.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterFooter/index.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterFooter/utils.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/constants.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/filterDefault.css (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/filterDefault.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/filterList.css (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/filterList.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/filterSwatch.css (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/filterSwatch.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FilterList/index.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FiltersCurrent/filtersCurrent.css (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FiltersCurrent/filtersCurrent.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FiltersCurrent/filtersCurrentContainer.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/FiltersCurrent/index.js (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/filterBlock.css (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/filterBlock.js (67%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/filterModal.css (100%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/filterModal.js (79%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/filterModalContainer.js (60%) rename packages/venia-concept/src/{RootComponents/Category => components}/FilterModal/index.js (100%) diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js b/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js deleted file mode 100644 index 0955ff9338..0000000000 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/constants.js +++ /dev/null @@ -1,4 +0,0 @@ -export const filterIconName = 'search'; -export const filterInnerText = 'Search for a specific filter...'; - -export const filterOptions = []; diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 4ffadee36d..d8910c8ddf 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -5,8 +5,7 @@ import gql from 'graphql-tag'; import classify from 'src/classify'; import Gallery from 'src/components/Gallery'; import Pagination from 'src/components/Pagination'; -import globalClasses from 'src/index.css'; -import FilterModal from './FilterModal'; +import FilterModal from 'src/components/FilterModal'; import defaultClasses from './category.css'; const productsQuery = gql` diff --git a/packages/venia-concept/src/components/Filter/filter.css b/packages/venia-concept/src/components/Filter/filter.css deleted file mode 100644 index f5ff5d353b..0000000000 --- a/packages/venia-concept/src/components/Filter/filter.css +++ /dev/null @@ -1,18 +0,0 @@ -.root { - display: flex; - align-items: center; - height: 2.5rem; - width: 100%; - border: 1px solid rgb(var(--venia-border)); - border-radius: 100px; - padding: 0 0.875rem; - font-size: 0.75rem; - line-height: 0.75rem; - outline: none; -} - -.filterIconContainer { - display: flex; - align-items: center; - margin-right: 0.375rem; -} diff --git a/packages/venia-concept/src/components/Filter/filter.js b/packages/venia-concept/src/components/Filter/filter.js deleted file mode 100644 index 3fb4d4d4e9..0000000000 --- a/packages/venia-concept/src/components/Filter/filter.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classify from 'src/classify'; -import defaultClasses from './filter.css'; - -class Filter extends Component { - static propTypes = { - classes: PropTypes.shape({ - root: PropTypes.string, - filterIconContainer: PropTypes.string - }), - innerText: PropTypes.string, - onClickHandler: PropTypes.func - }; - - static defaultProps = { - iconName: 'filter', - innerText: 'Filter by...' - }; - - render() { - const { classes, onClickHandler, innerText } = this.props; - - return ( - - ); - } -} - -export default classify(defaultClasses)(Filter); diff --git a/packages/venia-concept/src/components/Filter/index.js b/packages/venia-concept/src/components/Filter/index.js deleted file mode 100644 index a7d86f492f..0000000000 --- a/packages/venia-concept/src/components/Filter/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './filter.js'; diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.css rename to packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/filterFooter.js rename to packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/index.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/index.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/index.js rename to packages/venia-concept/src/components/FilterModal/FilterFooter/index.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/utils.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/utils.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterFooter/utils.js rename to packages/venia-concept/src/components/FilterModal/FilterFooter/utils.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js b/packages/venia-concept/src/components/FilterModal/FilterList/constants.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/constants.js rename to packages/venia-concept/src/components/FilterModal/FilterList/constants.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.css rename to packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterDefault.js rename to packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.css b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.css rename to packages/venia-concept/src/components/FilterModal/FilterList/filterList.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterList.js rename to packages/venia-concept/src/components/FilterModal/FilterList/filterList.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.css rename to packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/filterSwatch.js rename to packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/index.js b/packages/venia-concept/src/components/FilterModal/FilterList/index.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FilterList/index.js rename to packages/venia-concept/src/components/FilterModal/FilterList/index.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.css b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.css rename to packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrent.js rename to packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrentContainer.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/filtersCurrentContainer.js rename to packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/index.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/index.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/FiltersCurrent/index.js rename to packages/venia-concept/src/components/FilterModal/FiltersCurrent/index.js diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css b/packages/venia-concept/src/components/FilterModal/filterBlock.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.css rename to packages/venia-concept/src/components/FilterModal/filterBlock.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js b/packages/venia-concept/src/components/FilterModal/filterBlock.js similarity index 67% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js rename to packages/venia-concept/src/components/FilterModal/filterBlock.js index e861f4a461..6bdcc2d8ec 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/components/FilterModal/filterBlock.js @@ -13,23 +13,16 @@ class FilterBlock extends Component { root: PropTypes.string }), item: PropTypes.shape({ - id: PropTypes.number, - name: PropTypes.string, - items: PropTypes.array, - RenderOption: PropTypes.func + name: PropTypes.array, + filter_items: PropTypes.array, + request_var: PropTypes.string }), - chosenFilterOptions: PropTypes.object, - updateChosenFilterOptions: PropTypes.func, - isExpanded: PropTypes.bool + filterAdd: PropTypes.func, + filterRemove: PropTypes.func }; state = { - isExpanded: false, - chosenItemsFromUrl: {} - }; - - resetChosenItems = () => { - this.updateChosenItems([]); + isExpanded: false }; optionToggle = () => { @@ -37,14 +30,6 @@ class FilterBlock extends Component { this.setState({ isExpanded: !isExpanded }); }; - updateChosenItems = actualItems => { - const { updateChosenFilterOptions } = this.props; - updateChosenFilterOptions({ - optionName: this.props.item.request_var, - optionItems: actualItems - }); - }; - getControlBlock = isExpanded => { const { classes, item } = this.props; const iconSrc = isExpanded ? ArrowUp : ArrowDown; @@ -77,23 +62,21 @@ class FilterBlock extends Component { const { isExpanded } = this.state; + const listClassName = isExpanded + ? classes.filterListExpanded + : classes.filterList; + + const controlBlock = this.getControlBlock(isExpanded); + return (
  • - {this.getControlBlock(isExpanded)} - -
    + {controlBlock} +
    • diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css b/packages/venia-concept/src/components/FilterModal/filterModal.css similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.css rename to packages/venia-concept/src/components/FilterModal/filterModal.css diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js similarity index 79% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js rename to packages/venia-concept/src/components/FilterModal/filterModal.js index 9a186ea00f..b0d223f873 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -1,8 +1,6 @@ -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; import FilterFooter from './FilterFooter'; import PropTypes from 'prop-types'; -import { compose } from 'redux'; -import { withRouter } from 'react-router-dom'; import { List } from '@magento/peregrine'; import { FiltersCurrent } from './FiltersCurrent'; import classify from 'src/classify'; @@ -15,8 +13,19 @@ class FilterModal extends Component { static propTypes = { classes: PropTypes.shape({ root: PropTypes.string, - searchFilterContainer: PropTypes.string + modalWrapper: PropTypes.string, + header: PropTypes.string, + headerTitle: PropTypes.string, + filterOptionsContainer: PropTypes.string }), + filters: PropTypes.arrayOf( + PropTypes.shape({ + request_var: PropTypes.string, + items: PropTypes.array + }) + ), + filterAdd: PropTypes.func, + filterRemove: PropTypes.func, closeModalHandler: PropTypes.func }; @@ -60,15 +69,7 @@ class FilterModal extends Component { }; render() { - const { - classes, - isModalOpen, - closeModalHandler, - filterAdd, - filterRemove, - filters - } = this.props; - + const { classes, isModalOpen, closeModalHandler } = this.props; const modalClass = isModalOpen ? classes.rootOpen : classes.root; return ( @@ -84,7 +85,7 @@ class FilterModal extends Component { request_var} render={props => (
      @@ -94,8 +95,8 @@ class FilterModal extends Component { renderItem={props => ( )} /> @@ -106,7 +107,4 @@ class FilterModal extends Component { } } -export default compose( - withRouter, - classify(defaultClasses) -)(FilterModal); +export default classify(defaultClasses)(FilterModal); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js similarity index 60% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js rename to packages/venia-concept/src/components/FilterModal/filterModalContainer.js index 432bc22c31..1e92e55391 100644 --- a/packages/venia-concept/src/RootComponents/Category/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js @@ -1,13 +1,18 @@ import { connect } from 'react-redux'; +import { compose } from 'redux'; import FilterModal from './filterModal'; import catalogActions from 'src/actions/catalog'; +import { withRouter } from 'react-router-dom'; const mapDispatchToProps = { filterAdd: catalogActions.filterOption.add, filterRemove: catalogActions.filterOption.remove }; -export default connect( - null, - mapDispatchToProps +export default compose( + withRouter, + connect( + null, + mapDispatchToProps + ) )(FilterModal); diff --git a/packages/venia-concept/src/RootComponents/Category/FilterModal/index.js b/packages/venia-concept/src/components/FilterModal/index.js similarity index 100% rename from packages/venia-concept/src/RootComponents/Category/FilterModal/index.js rename to packages/venia-concept/src/components/FilterModal/index.js From fef24a6dbc768a225978512258c851f8d230b5e3 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Wed, 30 Jan 2019 13:47:29 +0100 Subject: [PATCH 27/91] Adding PropTypes --- .../FilterModal/FilterFooter/filterFooter.js | 45 +++++--- .../FilterModal/FilterList/filterDefault.js | 73 +++++++----- .../FilterModal/FilterList/filterList.js | 54 +++++---- .../FilterModal/FilterList/filterSwatch.js | 108 +++++++++++------- .../FiltersCurrent/filtersCurrent.js | 15 +++ .../src/components/FilterModal/filterBlock.js | 11 +- 6 files changed, 199 insertions(+), 107 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js index d31c3de094..9be141622d 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js +++ b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js @@ -9,6 +9,20 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; class FilterFooter extends Component { + static propTypes = { + classes: PropTypes.shape({ + resetButton: PropTypes.string, + resetButtonDisabled: PropTypes.string, + applyButton: PropTypes.string, + applyButtonDisabled: PropTypes.string, + footer: PropTypes.string + }), + history: PropTypes.object, + filterClear: PropTypes.func, + chosenFilterOptions: PropTypes.object, + closeModalHandler: PropTypes.func + }; + static getDerivedStateFromProps(nextProps) { const { chosenFilterOptions } = nextProps; let filterOptionsArePristine = true; @@ -29,7 +43,7 @@ class FilterFooter extends Component { resetFilterOptions = () => { const { history, filterClear } = this.props; - history.push('?' + ''); + history.push(); filterClear(); }; @@ -41,27 +55,28 @@ class FilterFooter extends Component { getFooterButtons = areOptionsPristine => { const { classes } = this.props; + + const resetButtonClass = areOptionsPristine + ? classes.resetButtonDisabled + : classes.resetButton; + + const applyButtonClass = areOptionsPristine + ? classes.applyButtonDisabled + : classes.applyButton; + return ( @@ -72,13 +87,9 @@ class FilterFooter extends Component { render() { const { areOptionsPristine } = this.state; const { classes } = this.props; + const footerButtons = this.getFooterButtons(areOptionsPristine); - return ( -
      - {areOptionsPristine} - {this.getFooterButtons(areOptionsPristine)} -
      - ); + return
      {footerButtons}
      ; } } diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js index c2a1aef1f6..c7cc812a74 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js @@ -1,34 +1,55 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Icon from 'src/components/Icon'; import Checkmark from 'react-feather/dist/icons/check'; import classify from 'src/classify'; import defaultClasses from './filterDefault.css'; -const FilterDefault = ({ - value_string, - toggleOption, - label, - classes, - group, - isActive -}) => ( - -); +class FilterDefault extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string, + icon: PropTypes.string, + iconActive: PropTypes.string + }), + isActive: PropTypes.bool, + toggleOption: PropTypes.func, + value_string: PropTypes.string, + label: PropTypes.string, + group: PropTypes.string + }; + + render() { + const { + value_string, + toggleOption, + label, + classes, + group, + isActive + } = this.props; + + const iconClassName = isActive ? classes.iconActive : classes.icon; + + return ( + + ); + } +} export default classify(defaultClasses)(FilterDefault); diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index 447dce70dc..d8af9a316c 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -11,8 +11,20 @@ import FilterSwatch from './FilterSwatch'; class FilterList extends Component { static propTypes = { - classes: PropTypes.shape({}), - updateChosenItems: PropTypes.func + classes: PropTypes.shape({ + root: PropTypes.string, + rootGrid: PropTypes.string, + filterItem: PropTypes.string + }), + chosenOptions: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + value: PropTypes.string + }) + ), + filterAdd: PropTypes.func, + filterRemove: PropTypes.func, + items: PropTypes.array }; toggleOption = event => { @@ -30,7 +42,7 @@ class FilterList extends Component { ) > -1; getLayout = options => { - const { layout } = options || ''; + const { layout } = options ? options : {}; const { classes } = this.props; switch (layout) { case filterLayouts.grid: @@ -52,12 +64,16 @@ class FilterList extends Component { }; render() { - const { toggleOption } = this; + const { + toggleOption, + getRenderOptions, + getLayout, + isFilterSelected + } = this; const { classes, items, id } = this.props; - const { mode, options } = this.getRenderOptions(id); - - const filterLayoutClass = this.getLayout(options); + const { mode, options } = getRenderOptions(id); + const filterLayoutClass = getLayout(options); const isSwatch = filterModes[mode] === filterModes.swatch; @@ -69,25 +85,21 @@ class FilterList extends Component {
        {props.children}
      )} renderItem={({ item }) => { - const isActive = this.isFilterSelected(item); + const isActive = isFilterSelected(item); + const swatchProps = { + ...item, + isActive, + options, + toggleOption, + group: id + }; return (
    • {isSwatch ? ( - + ) : ( - + )}
      • ); diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js index f124cb116a..6ea3791f4c 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js @@ -15,46 +15,72 @@ const getRandomColor = () => const memoizedGetRandomColor = memoize(getRandomColor); -const FilterSwatch = ({ - options, - isActive, - toggleOption, - value_string, - label, - classes, - group -}) => ( - -); +class FilterSwatch extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string, + swatchLabel: PropTypes.string, + iconWrapper: PropTypes.string, + swatch: PropTypes.string + }), + options: PropTypes.shape({ + generateColor: PropTypes.bool + }), + isActive: PropTypes.bool, + toggleOption: PropTypes.func, + value_string: PropTypes.string, + label: PropTypes.string, + group: PropTypes.string + }; + + render() { + const { + options, + isActive, + toggleOption, + value_string, + label, + classes, + group + } = this.props; + + const generatedColor = + options.generateColor && memoizedGetRandomColor(value_string); + + const swatchInlineStyle = generatedColor && { + backgroundColor: `rgb(${generatedColor})` + }; + + return ( + + ); + } +} export default classify(defaultClasses)(FilterSwatch); diff --git a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js index 78d554505f..410b1e8dfa 100644 --- a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js +++ b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js @@ -6,6 +6,21 @@ import classify from 'src/classify'; import defaultClasses from './filtersCurrent.css'; class FiltersCurrent extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string, + item: PropTypes.string, + button: PropTypes.string, + icon: PropTypes.string + }), + keyPrefix: PropTypes.string, + filterRemove: PropTypes.func, + chosenFilterOptions: PropTypes.shape({ + title: PropTypes.string, + value: PropTypes.string + }) + }; + removeOption = event => { const { title, value, dataset } = event.currentTarget || event.srcElement; diff --git a/packages/venia-concept/src/components/FilterModal/filterBlock.js b/packages/venia-concept/src/components/FilterModal/filterBlock.js index 6bdcc2d8ec..92017cb805 100644 --- a/packages/venia-concept/src/components/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/components/FilterModal/filterBlock.js @@ -10,10 +10,17 @@ import defaultClasses from './filterBlock.css'; class FilterBlock extends Component { static propTypes = { classes: PropTypes.shape({ - root: PropTypes.string + root: PropTypes.string, + optionHeader: PropTypes.string, + optionToggleButton: PropTypes.string, + optionName: PropTypes.string, + optionNameExpanded: PropTypes.string, + closeWrapper: PropTypes.string, + filterList: PropTypes.string, + filterListExpanded: PropTypes.string }), item: PropTypes.shape({ - name: PropTypes.array, + name: PropTypes.string, filter_items: PropTypes.array, request_var: PropTypes.string }), From cd2adad1d7b8295d411f9b8bf4ac68c59719fe78 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 31 Jan 2019 13:25:20 +0100 Subject: [PATCH 28/91] Filter Search update --- .../FilterModal/FilterList/filterList.css | 13 --- .../FilterModal/FilterList/filterList.js | 41 +++------ .../FilterModal/FilterList/filterSwatch.css | 1 - .../FilterModal/FilterSearch/filterSearch.css | 11 +++ .../FilterModal/FilterSearch/filterSearch.js | 88 +++++++++++++++++++ .../FilterModal/FilterSearch/index.js | 1 + .../FilterModal/{FilterList => }/constants.js | 9 +- .../components/FilterModal/filterBlock.css | 14 +++ .../src/components/FilterModal/filterBlock.js | 43 +++++++-- 9 files changed, 169 insertions(+), 52 deletions(-) create mode 100644 packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.css create mode 100644 packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js create mode 100644 packages/venia-concept/src/components/FilterModal/FilterSearch/index.js rename packages/venia-concept/src/components/FilterModal/{FilterList => }/constants.js (59%) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.css b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.css index e004c70936..0f836d49de 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.css +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.css @@ -1,16 +1,3 @@ -.root { - justify-content: flex-start; - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.rootGrid { - composes: root; - display: flex; - justify-content: flex-start; - flex-wrap: wrap; -} - .filterItem { margin-bottom: 1rem; } diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index d8af9a316c..6da941eb99 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -5,9 +5,9 @@ import PropTypes from 'prop-types'; import classify from 'src/classify'; import defaultClasses from './filterList.css'; import { List } from '@magento/peregrine'; -import { filterModes, filterRenderOptions, filterLayouts } from './constants'; import FilterDefault from './filterDefault'; import FilterSwatch from './FilterSwatch'; +import { WithFilterSearch } from 'src/components/FilterModal/FilterSearch'; class FilterList extends Component { static propTypes = { @@ -41,21 +41,6 @@ class FilterList extends Component { item => item.value === option.value && item.name === option.name ) > -1; - getLayout = options => { - const { layout } = options ? options : {}; - const { classes } = this.props; - switch (layout) { - case filterLayouts.grid: - return classes.rootGrid; - default: - return classes.root; - } - }; - - getRenderOptions = value => - filterRenderOptions[`${value}`] || - filterRenderOptions[filterModes.default]; - isFilterSelected = item => { return !!this.props.chosenOptions.find( ({ title, value }) => @@ -64,25 +49,22 @@ class FilterList extends Component { }; render() { + const { toggleOption, isFilterSelected } = this; const { - toggleOption, - getRenderOptions, - getLayout, - isFilterSelected - } = this; - const { classes, items, id } = this.props; - - const { mode, options } = getRenderOptions(id); - const filterLayoutClass = getLayout(options); - - const isSwatch = filterModes[mode] === filterModes.swatch; + classes, + items, + id, + options, + layoutClass, + isSwatch + } = this.props; return ( `item-${id}-${value_string}`} render={props => ( -
        {props.children}
      +
        {props.children}
      )} renderItem={({ item }) => { const isActive = isFilterSelected(item); @@ -119,5 +101,6 @@ const mapStateToProps = ({ catalog }, { id }) => { export default compose( classify(defaultClasses), - connect(mapStateToProps) + connect(mapStateToProps), + WithFilterSearch )(FilterList); diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.css b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.css index 4581d077f7..9eb6a08435 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.css +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.css @@ -1,7 +1,6 @@ .root { position: relative; margin-right: 1rem; - margin-bottom: 1rem; display: flex; justify-content: center; outline: 0; diff --git a/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.css b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.css new file mode 100644 index 0000000000..5f1685a5b0 --- /dev/null +++ b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.css @@ -0,0 +1,11 @@ +.filterSearch { + align-items: center; + display: grid; + justify-items: stretch; + margin-bottom: 0.5rem; + width: 100%; +} + +.noFilters { + padding: 1rem 1rem 1.5rem; +} diff --git a/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js new file mode 100644 index 0000000000..b25653b3bc --- /dev/null +++ b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js @@ -0,0 +1,88 @@ +import React, { Fragment } from 'react'; +import TextInput from 'src/components/TextInput'; +import Trigger from 'src/components/Trigger'; +import { Form } from 'informed'; +import Icon from 'src/components/Icon'; +import ClearIcon from 'react-feather/dist/icons/x'; +import SearchIcon from 'react-feather/dist/icons/search'; +import classify from 'src/classify'; +import defaultClasses from './filterSearch.css'; + +const clearIcon = ; +const searchIcon = ; + +const withFilterSearch = WrappedComponent => { + class withFilterSearch extends React.Component { + state = { + filterQuery: '' + }; + + handleFilterSearch = event => { + const { value } = event.currentTarget || event.srcElement; + this.setState({ filterQuery: value }); + }; + + handleResetSearch = () => this.setState({ filterQuery: '' }); + + getFilteredItems = (items, filterQuery) => + items.filter( + item => + item.label + .toUpperCase() + .indexOf(filterQuery.toUpperCase()) >= 0 + ); + + render() { + const { + handleFilterSearch, + getFilteredItems, + handleResetSearch + } = this; + const { filterQuery } = this.state; + const { items, classes, options, name, ...rest } = this.props; + + const isSearchable = options && options.searchable; + + const filteredItems = isSearchable + ? getFilteredItems(items, filterQuery) + : items; + + const resetButton = filterQuery && ( + {clearIcon} + ); + + return ( + + {isSearchable && ( +
      + + + )} + {filteredItems.length > 0 ? ( + + ) : ( +
      + No filter matches the search +
      + )} +
      + ); + } + } + + return classify(defaultClasses)(withFilterSearch); +}; + +export default withFilterSearch; diff --git a/packages/venia-concept/src/components/FilterModal/FilterSearch/index.js b/packages/venia-concept/src/components/FilterModal/FilterSearch/index.js new file mode 100644 index 0000000000..8e372d132b --- /dev/null +++ b/packages/venia-concept/src/components/FilterModal/FilterSearch/index.js @@ -0,0 +1 @@ +export { default as WithFilterSearch } from './filterSearch'; diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/constants.js b/packages/venia-concept/src/components/FilterModal/constants.js similarity index 59% rename from packages/venia-concept/src/components/FilterModal/FilterList/constants.js rename to packages/venia-concept/src/components/FilterModal/constants.js index 8041fcba96..8870c2bf3d 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/constants.js +++ b/packages/venia-concept/src/components/FilterModal/constants.js @@ -11,9 +11,14 @@ export const filterLayouts = { export const filterRenderOptions = { fashion_color: { mode: filterModes.swatch, - options: { layout: filterLayouts.grid, generateColor: true } + options: { + layout: filterLayouts.grid, + generateColor: true, + searchable: true + } }, default: { - mode: filterModes.default + mode: filterModes.default, + options: {} } }; diff --git a/packages/venia-concept/src/components/FilterModal/filterBlock.css b/packages/venia-concept/src/components/FilterModal/filterBlock.css index 49108ffec7..ce9e55b15c 100644 --- a/packages/venia-concept/src/components/FilterModal/filterBlock.css +++ b/packages/venia-concept/src/components/FilterModal/filterBlock.css @@ -7,6 +7,19 @@ border-bottom: 2px solid rgb(var(--venia-border)); } +.layout { + justify-content: flex-start; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.layoutGrid { + composes: layout; + display: flex; + justify-content: flex-start; + flex-wrap: wrap; +} + .clearIcon { display: flex; } @@ -32,6 +45,7 @@ .filterList { display: none; + padding-right: 2.75rem; } .filterListExpanded { diff --git a/packages/venia-concept/src/components/FilterModal/filterBlock.js b/packages/venia-concept/src/components/FilterModal/filterBlock.js index 92017cb805..3ed50e3700 100644 --- a/packages/venia-concept/src/components/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/components/FilterModal/filterBlock.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import classify from 'src/classify'; import FilterList from './FilterList'; import Icon from 'src/components/Icon'; +import { filterModes, filterRenderOptions, filterLayouts } from './constants'; import ArrowDown from 'react-feather/dist/icons/chevron-down'; import ArrowUp from 'react-feather/dist/icons/chevron-up'; import defaultClasses from './filterBlock.css'; @@ -59,32 +60,60 @@ class FilterBlock extends Component { ); }; + getLayout = options => { + const { layout } = options ? options : {}; + const { classes } = this.props; + switch (layout) { + case filterLayouts.grid: + return classes.layoutGrid; + default: + return classes.layout; + } + }; + + getRenderOptions = value => + filterRenderOptions[`${value}`] || + filterRenderOptions[filterModes.default]; + render() { const { classes, - item: { filter_items, request_var }, + item: { filter_items, request_var, name }, filterRemove, filterAdd } = this.props; const { isExpanded } = this.state; + const { mode, options } = this.getRenderOptions(request_var); + const listClassName = isExpanded ? classes.filterListExpanded : classes.filterList; const controlBlock = this.getControlBlock(isExpanded); + const filterLayoutClass = this.getLayout(options); + + const isSwatch = filterModes[mode] === filterModes.swatch; + + const filterProps = { + isSwatch, + name, + filterAdd, + filterRemove, + mode, + options, + id: request_var, + items: filter_items, + layoutClass: filterLayoutClass + }; + return (
    • {controlBlock}
      - +
      • ); From ca879ac207c6cfc588f1eeb0731304f1023aa499 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 31 Jan 2019 13:31:11 +0100 Subject: [PATCH 29/91] PropTypes update --- .../src/components/FilterModal/FilterList/filterList.js | 5 +++-- .../venia-concept/src/components/FilterModal/filterBlock.js | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index 6da941eb99..762d2dd094 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -12,8 +12,6 @@ import { WithFilterSearch } from 'src/components/FilterModal/FilterSearch'; class FilterList extends Component { static propTypes = { classes: PropTypes.shape({ - root: PropTypes.string, - rootGrid: PropTypes.string, filterItem: PropTypes.string }), chosenOptions: PropTypes.arrayOf( @@ -22,6 +20,9 @@ class FilterList extends Component { value: PropTypes.string }) ), + layoutClass: PropTypes.string, + isSwatch: PropTypes.bool, + options: PropTypes.object, filterAdd: PropTypes.func, filterRemove: PropTypes.func, items: PropTypes.array diff --git a/packages/venia-concept/src/components/FilterModal/filterBlock.js b/packages/venia-concept/src/components/FilterModal/filterBlock.js index 3ed50e3700..63c4d17573 100644 --- a/packages/venia-concept/src/components/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/components/FilterModal/filterBlock.js @@ -12,6 +12,8 @@ class FilterBlock extends Component { static propTypes = { classes: PropTypes.shape({ root: PropTypes.string, + layout: PropTypes.string, + layoutGrid: PropTypes.string, optionHeader: PropTypes.string, optionToggleButton: PropTypes.string, optionName: PropTypes.string, From bcc416a685f3beff3bb91e474537676ae91c49c3 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 31 Jan 2019 13:49:21 +0100 Subject: [PATCH 30/91] Fixed uppercase component name --- .../FilterModal/FiltersCurrent/filtersCurrentContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js index 02cec70dfd..bc39ff017f 100644 --- a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js +++ b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import FiltersCurrent from './FiltersCurrent'; +import FiltersCurrent from './filtersCurrent'; import catalogActions from 'src/actions/catalog'; const mapStateToProps = ({ catalog }) => { From 744e3b534b083fca71caa91f03137502e85082e2 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 31 Jan 2019 13:52:55 +0100 Subject: [PATCH 31/91] Fixed uppercase component name --- .../venia-concept/src/components/FilterModal/filterModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index b0d223f873..c1c05de1f1 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -6,7 +6,7 @@ import { FiltersCurrent } from './FiltersCurrent'; import classify from 'src/classify'; import CloseIcon from 'react-feather/dist/icons/x'; import Icon from 'src/components/Icon'; -import FilterBlock from './FilterBlock'; +import FilterBlock from './filterBlock'; import defaultClasses from './filterModal.css'; class FilterModal extends Component { From 9da2ecda807ff38d7c0a44333301a89bafe5f67e Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 31 Jan 2019 13:57:20 +0100 Subject: [PATCH 32/91] Component uppercase name fix --- .../src/components/FilterModal/FilterList/filterList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index 762d2dd094..e5c45f5fe0 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -6,7 +6,7 @@ import classify from 'src/classify'; import defaultClasses from './filterList.css'; import { List } from '@magento/peregrine'; import FilterDefault from './filterDefault'; -import FilterSwatch from './FilterSwatch'; +import FilterSwatch from './filterSwatch'; import { WithFilterSearch } from 'src/components/FilterModal/FilterSearch'; class FilterList extends Component { From d448e46f631e49c02ef3a8939093d8220d199f00 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 31 Jan 2019 14:03:41 +0100 Subject: [PATCH 33/91] Revert filter changes --- .../PurchaseHistoryPage/Filter/filter.css | 16 ++++++++++++++++ .../PurchaseHistoryPage/Filter/index.js | 1 + 2 files changed, 17 insertions(+) create mode 100644 packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.css create mode 100644 packages/venia-concept/src/components/PurchaseHistoryPage/Filter/index.js diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.css b/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.css new file mode 100644 index 0000000000..ceb0174291 --- /dev/null +++ b/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/filter.css @@ -0,0 +1,16 @@ +.root { + display: flex; + align-items: center; + height: 2.5rem; + border: 1px solid rgb(var(--venia-border)); + border-radius: 100px; + padding: 0 0.875rem; + font-size: 0.75rem; + line-height: 0.75rem; +} + +.filterIconContainer { + display: flex; + align-items: center; + margin-right: 0.375rem; +} diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/index.js b/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/index.js new file mode 100644 index 0000000000..a7d86f492f --- /dev/null +++ b/packages/venia-concept/src/components/PurchaseHistoryPage/Filter/index.js @@ -0,0 +1 @@ +export { default } from './filter.js'; From 97996ca3b7d2135adedf2c774f3e9253a8861a96 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 31 Jan 2019 14:04:26 +0100 Subject: [PATCH 34/91] Update failing test --- .../PurchaseHistory/__tests__/purchaseHistory.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js index db696ab807..dc5aaacf50 100644 --- a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js +++ b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/__tests__/purchaseHistory.spec.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import { List } from '@magento/peregrine'; import PurchaseHistory from '../purchaseHistory'; -import Filter from 'src/components/Filter'; +import Filter from '../../Filter'; test('renders correctly', () => { const wrapper = shallow( From 0c4277400b19148992be9766bb748b1875c2a9a3 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Feb 2019 08:40:04 +0100 Subject: [PATCH 35/91] Fix test for PurchaseHistory page filter --- .../PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js index 7134ba04c7..8f34db176f 100644 --- a/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js +++ b/packages/venia-concept/src/components/PurchaseHistoryPage/PurchaseHistory/purchaseHistory.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { arrayOf, number, shape, string } from 'prop-types'; import { List } from '@magento/peregrine'; -import Filter from 'src/components/Filter'; +import Filter from 'src/components/PurchaseHistoryPage/Filter'; import classify from 'src/classify'; import PurchaseHistoryItem from '../PurchaseHistoryItem'; import defaultClasses from './purchaseHistory.css'; From fc4b72a89bc65356352cd02fe2f8f637e99fbbac Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 4 Mar 2019 13:51:37 +0100 Subject: [PATCH 36/91] Improving graphql query & code cleanup --- .../Category/categoryContent.js | 81 ++++--------------- .../src/queries/getCategory.graphql | 78 +++++++++++++----- 2 files changed, 72 insertions(+), 87 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 061801dc5f..f9317c49c3 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -1,48 +1,11 @@ -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Query } from 'react-apollo'; -import gql from 'graphql-tag'; import classify from 'src/classify'; import Gallery from 'src/components/Gallery'; import Pagination from 'src/components/Pagination'; import FilterModal from 'src/components/FilterModal'; import defaultClasses from './category.css'; -const productsQuery = gql` - query category($id: String!, $pageSize: Int!, $currentPage: Int!) { - products( - pageSize: $pageSize - currentPage: $currentPage - filter: { category_id: { eq: $id } } - ) { - items { - id - name - small_image - url_key - price { - regularPrice { - amount { - value - currency - } - } - } - } - total_count - filters { - name - filter_items_count - request_var - filter_items { - label - value_string - } - } - } - } -`; - class CategoryContent extends Component { static propTypes = { classes: PropTypes.shape({ @@ -64,13 +27,14 @@ class CategoryContent extends Component { pageSize, openDrawer, closeDrawer, - isFilterModalOpen, - queryVariables + isFilterModalOpen } = this.props; const title = data ? data.category.description : null; const categoryTitle = data ? data.category.name : null; + const { items, filters } = data && data.products; + return (

      @@ -90,32 +54,17 @@ class CategoryContent extends Component {

    - - {({ loading, error, data }) => { - if (loading || error) return null; - const { products } = data; - const { items, filters } = products; - return ( - -
    - -
    -
    - -
    - -     - ); - }} -     +
    + +
    +
    + +
    + ); } diff --git a/packages/venia-concept/src/queries/getCategory.graphql b/packages/venia-concept/src/queries/getCategory.graphql index f9ff67a1cb..2bc9b540ff 100644 --- a/packages/venia-concept/src/queries/getCategory.graphql +++ b/packages/venia-concept/src/queries/getCategory.graphql @@ -1,28 +1,64 @@ -query category($id: Int!, $pageSize: Int!, $currentPage: Int!, $onServer: Boolean!) { - category(id: $id) { +query category( + $id: Int! + $pageSize: Int! + $currentPage: Int! + $onServer: Boolean! + $idString: String +) { + category(id: $id) { + id + description + name + product_count + products(pageSize: $pageSize, currentPage: $currentPage) { + items { + id + name + small_image + url_key + price { + regularPrice { + amount { + value + currency + } + } + } + } + total_count + } + meta_title @include(if: $onServer) + meta_keywords @include(if: $onServer) + meta_description @include(if: $onServer) + } + products( + pageSize: $pageSize + currentPage: $currentPage + filter: { category_id: { eq: $idString } } + ) { + items { id - description name - product_count - products(pageSize: $pageSize, currentPage: $currentPage) { - items { - id - name - small_image - url_key - price { - regularPrice { - amount { - value - currency - } - } + small_image + url_key + price { + regularPrice { + amount { + value + currency } } - total_count } - meta_title @include(if: $onServer) - meta_keywords @include(if: $onServer) - meta_description @include(if: $onServer) + } + total_count + filters { + name + filter_items_count + request_var + filter_items { + label + value_string + } } } +} From 99e1b880e50249910550f59ba000d056ba8ad675 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 4 Mar 2019 14:02:00 +0100 Subject: [PATCH 37/91] Code cleanup & Fix static typing --- .../src/RootComponents/Category/category.js | 7 +++---- .../RootComponents/Category/categoryContent.js | 4 ++-- .../src/queries/getCategory.graphql | 18 ------------------ 3 files changed, 5 insertions(+), 24 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index 25f5fb147b..605a22ab62 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -62,7 +62,8 @@ class Category extends Component { id: Number(id), onServer: false, pageSize: Number(pageSize), - currentPage: Number(currentPage) + currentPage: Number(currentPage), + idString: String(id) }; const isFilterModalOpen = drawer === 'filter'; @@ -82,8 +83,7 @@ class Category extends Component { ); // Retrieve the total page count from GraphQL when ready - const pageCount = - data.category.products.total_count / pageSize; + const pageCount = data.products.total_count / pageSize; const totalPages = Math.ceil(pageCount); const totalWrapper = { ...pageControl, @@ -95,7 +95,6 @@ class Category extends Component { closeDrawer={closeDrawer} openDrawer={openDrawer} isFilterModalOpen={isFilterModalOpen} - queryVariables={queryVariables} classes={classes} pageControl={totalWrapper} data={data} diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index f9317c49c3..5ab19bfbbc 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -30,11 +30,11 @@ class CategoryContent extends Component { isFilterModalOpen } = this.props; + const items = data ? data.products.items : null; + const filters = data ? data.products.filters : null; const title = data ? data.category.description : null; const categoryTitle = data ? data.category.name : null; - const { items, filters } = data && data.products; - return (

    diff --git a/packages/venia-concept/src/queries/getCategory.graphql b/packages/venia-concept/src/queries/getCategory.graphql index 2bc9b540ff..dc3c474708 100644 --- a/packages/venia-concept/src/queries/getCategory.graphql +++ b/packages/venia-concept/src/queries/getCategory.graphql @@ -9,24 +9,6 @@ query category( id description name - product_count - products(pageSize: $pageSize, currentPage: $currentPage) { - items { - id - name - small_image - url_key - price { - regularPrice { - amount { - value - currency - } - } - } - } - total_count - } meta_title @include(if: $onServer) meta_keywords @include(if: $onServer) meta_description @include(if: $onServer) From ec04f3ce18c03ae23213c09cdf2390a00084bd8a Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 4 Mar 2019 14:07:28 +0100 Subject: [PATCH 38/91] Fix failing test --- .../Category/__tests__/categoryContent.spec.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/__tests__/categoryContent.spec.js b/packages/venia-concept/src/RootComponents/Category/__tests__/categoryContent.spec.js index 174d5bb88c..cfe4451fb3 100644 --- a/packages/venia-concept/src/RootComponents/Category/__tests__/categoryContent.spec.js +++ b/packages/venia-concept/src/RootComponents/Category/__tests__/categoryContent.spec.js @@ -12,12 +12,12 @@ const classes = { const data = { category: { - products: { - items: { - id: 1 - } - }, description: 'test' + }, + products: { + items: { + id: 1 + } } }; From 8c1fb94aedb216fdcc2b7921447239dda8f42675 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 7 Mar 2019 08:03:04 +0100 Subject: [PATCH 39/91] Fix z-index --- .../venia-concept/src/components/FilterModal/filterModal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.css b/packages/venia-concept/src/components/FilterModal/filterModal.css index 67610cbb07..93127b9391 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.css +++ b/packages/venia-concept/src/components/FilterModal/filterModal.css @@ -14,7 +14,7 @@ opacity: 0; overflow: hidden; width: 100%; - z-index: 3; + z-index: 11; display: grid; grid-template-rows: min-content 1fr; } From 7516fbec4d7800494f94b3be5eb50941bc5624c0 Mon Sep 17 00:00:00 2001 From: Stephen Rugh Date: Thu, 21 Mar 2019 14:31:58 -0500 Subject: [PATCH 40/91] Add required props to small_image in category gql --- packages/venia-concept/src/queries/getCategory.graphql | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/venia-concept/src/queries/getCategory.graphql b/packages/venia-concept/src/queries/getCategory.graphql index dc3c474708..0ffdb2b44d 100644 --- a/packages/venia-concept/src/queries/getCategory.graphql +++ b/packages/venia-concept/src/queries/getCategory.graphql @@ -21,7 +21,9 @@ query category( items { id name - small_image + small_image { + url + } url_key price { regularPrice { From f1ff6f67dc144af1f4b9b5e370d2f471fd575fa1 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Tue, 26 Mar 2019 11:19:06 +0100 Subject: [PATCH 41/91] Improved URL generation on filter clear, added extra actions, code cleanup --- .../src/actions/catalog/asyncActions.js | 80 +++++++++++++++++++ .../FilterModal/FilterFooter/filterFooter.js | 3 +- .../FilterModal/FilterFooter/utils.js | 36 --------- .../FiltersCurrent/filtersCurrent.js | 11 ++- .../FiltersCurrent/filtersCurrentContainer.js | 4 +- .../FilterModal/filterModalContainer.js | 6 +- .../venia-concept/src/reducers/catalog.js | 15 +--- 7 files changed, 96 insertions(+), 59 deletions(-) delete mode 100644 packages/venia-concept/src/components/FilterModal/FilterFooter/utils.js diff --git a/packages/venia-concept/src/actions/catalog/asyncActions.js b/packages/venia-concept/src/actions/catalog/asyncActions.js index ee570df27f..bfdc4e12af 100644 --- a/packages/venia-concept/src/actions/catalog/asyncActions.js +++ b/packages/venia-concept/src/actions/catalog/asyncActions.js @@ -1,6 +1,86 @@ import actions from './actions'; import mockData from './mockData'; +export const serialize = (params, keys = [], isArray = false) => { + const p = Object.keys(params) + .map(key => { + let val = params[key]; + if ( + '[object Object]' === Object.prototype.toString.call(val) || + Array.isArray(val) + ) { + if (val.length === 0) return null; + + if (Array.isArray(params)) { + keys.push(''); + } else { + keys.push(key); + } + return serialize(val, keys, Array.isArray(val)); + } else { + let tKey = key; + + if (keys.length > 0) { + const tKeys = isArray + ? keys.filter(v => v != '') + : [...keys, key].filter(v => v != ''); + tKey = tKeys.reduce((str, k) => { + return '' === str ? k : `${str}[${k}]`; + }, ''); + } + if (isArray) { + return `${tKey}[]=${val}`; + } else { + return `${tKey}=${val}`; + } + } + }) + .filter(Boolean) + .join('&'); + + keys.pop(); + return p; +}; + +const updateCatalogUrl = (filters, history) => + history.push('?' + serialize(filters)); + +export const filterAdd = ({ group, title, value }, history) => + async function thunk(dispatch, getState) { + const { + catalog: { chosenFilterOptions } + } = getState(); + + const oldState = chosenFilterOptions[group] || []; + const newState = oldState.concat({ title, value }); + + dispatch(actions.filterOption.add({ newState, group })); + + if (history) { + const filters = { ...chosenFilterOptions, [group]: newState }; + updateCatalogUrl(filters, history); + } + }; + +export const filterRemove = ({ group, title, value }, history) => + async function thunk(dispatch, getState) { + const { + catalog: { chosenFilterOptions } + } = getState(); + + const oldState = chosenFilterOptions[group] || []; + const newState = oldState.filter(item => { + return item.title !== title || item.value !== value; + }); + + dispatch(actions.filterOption.remove({ newState, group })); + + if (history) { + const filters = { ...chosenFilterOptions, [group]: newState }; + updateCatalogUrl(filters, history); + } + }; + export const getAllCategories = () => async function thunk(dispatch) { dispatch(actions.getAllCategories.request()); diff --git a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js index 9be141622d..c89481c28c 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js +++ b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js @@ -1,9 +1,8 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; -import catalogActions from 'src/actions/catalog'; +import catalogActions, { serialize } from 'src/actions/catalog'; import { withRouter } from 'react-router-dom'; import classify from 'src/classify'; -import { serialize } from './utils'; import defaultClasses from './filterFooter.css'; import { compose } from 'redux'; import { connect } from 'react-redux'; diff --git a/packages/venia-concept/src/components/FilterModal/FilterFooter/utils.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/utils.js deleted file mode 100644 index a4071fd556..0000000000 --- a/packages/venia-concept/src/components/FilterModal/FilterFooter/utils.js +++ /dev/null @@ -1,36 +0,0 @@ -export const serialize = (params, keys = [], isArray = false) => { - const p = Object.keys(params) - .map(key => { - let val = params[key]; - - if ( - '[object Object]' === Object.prototype.toString.call(val) || - Array.isArray(val) - ) { - if (Array.isArray(params)) { - keys.push(''); - } else { - keys.push(key); - } - return serialize(val, keys, Array.isArray(val)); - } else { - let tKey = key; - - if (keys.length > 0) { - const tKeys = isArray ? keys : [...keys, key]; - tKey = tKeys.reduce((str, k) => { - return '' === str ? k : `${str}[${k}]`; - }, ''); - } - if (isArray) { - return `${tKey}[]=${val}`; - } else { - return `${tKey}=${val}`; - } - } - }) - .join('&'); - - keys.pop(); - return p; -}; diff --git a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js index 410b1e8dfa..d88597b22a 100644 --- a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js +++ b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js @@ -1,8 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { compose } from 'redux'; import Icon from 'src/components/Icon'; import Remove from 'react-feather/dist/icons/x'; import classify from 'src/classify'; +import { withRouter } from 'react-router-dom'; import defaultClasses from './filtersCurrent.css'; class FiltersCurrent extends Component { @@ -25,8 +27,8 @@ class FiltersCurrent extends Component { const { title, value, dataset } = event.currentTarget || event.srcElement; const { group } = dataset; - const { filterRemove } = this.props; - filterRemove({ title, value, group }); + const { filterRemove, history } = this.props; + filterRemove({ title, value, group }, history); }; getCurrentFilter = (item, key) => { @@ -70,4 +72,7 @@ class FiltersCurrent extends Component { } } -export default classify(defaultClasses)(FiltersCurrent); +export default compose( + withRouter, + classify(defaultClasses) +)(FiltersCurrent); diff --git a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js index bc39ff017f..4aeff682b4 100644 --- a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js +++ b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import FiltersCurrent from './filtersCurrent'; -import catalogActions from 'src/actions/catalog'; +import { filterRemove } from 'src/actions/catalog'; const mapStateToProps = ({ catalog }) => { const { chosenFilterOptions } = catalog; @@ -10,7 +10,7 @@ const mapStateToProps = ({ catalog }) => { }; const mapDispatchToProps = { - filterRemove: catalogActions.filterOption.remove + filterRemove }; export default connect( diff --git a/packages/venia-concept/src/components/FilterModal/filterModalContainer.js b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js index 1e92e55391..1941a97342 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js @@ -1,12 +1,12 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import FilterModal from './filterModal'; -import catalogActions from 'src/actions/catalog'; +import { filterAdd, filterRemove } from 'src/actions/catalog'; import { withRouter } from 'react-router-dom'; const mapDispatchToProps = { - filterAdd: catalogActions.filterOption.add, - filterRemove: catalogActions.filterOption.remove + filterAdd, + filterRemove }; export default compose( diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index b0c70f89b5..cae9767ba6 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -46,13 +46,7 @@ const reducerMap = { prevPageTotal: payload }; }, - [actions.filterOption.add]: ( - state, - { payload: { group, title, value } } - ) => { - const oldState = state.chosenFilterOptions[group] || []; - const newState = oldState.concat({ title, value }); - + [actions.filterOption.add]: (state, { payload: { newState, group } }) => { return { ...state, chosenFilterOptions: { @@ -63,13 +57,8 @@ const reducerMap = { }, [actions.filterOption.remove]: ( state, - { payload: { group, title, value } } + { payload: { newState, group } } ) => { - const oldState = state.chosenFilterOptions[group] || []; - const newState = oldState.filter(item => { - return item.title !== title || item.value !== value; - }); - return { ...state, chosenFilterOptions: { From 4cc4415b33f26143c3c5a3374da076524c4c528d Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Tue, 26 Mar 2019 11:59:24 +0100 Subject: [PATCH 42/91] CSS Fix --- packages/venia-concept/src/components/Mask/mask.css | 2 +- packages/venia-concept/src/components/Navigation/navigation.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/venia-concept/src/components/Mask/mask.css b/packages/venia-concept/src/components/Mask/mask.css index 746c338eae..6616b5d8de 100644 --- a/packages/venia-concept/src/components/Mask/mask.css +++ b/packages/venia-concept/src/components/Mask/mask.css @@ -12,7 +12,7 @@ transition-timing-function: linear; visibility: hidden; width: 100vw; - z-index: 2; + z-index: 10; -webkit-appearance: none; } diff --git a/packages/venia-concept/src/components/Navigation/navigation.css b/packages/venia-concept/src/components/Navigation/navigation.css index 64502b0cf0..c08656d2e0 100644 --- a/packages/venia-concept/src/components/Navigation/navigation.css +++ b/packages/venia-concept/src/components/Navigation/navigation.css @@ -14,7 +14,7 @@ visibility: hidden; width: 100%; max-width: 360px; - z-index: 3; + z-index: 10; } .header { From 8b7380030c5773444a530a8f81a05f36e5b85487 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Tue, 26 Mar 2019 12:16:43 +0100 Subject: [PATCH 43/91] CSS z-index fix --- packages/venia-concept/src/components/MiniCart/mask.css | 1 + packages/venia-concept/src/components/MiniCart/miniCart.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/MiniCart/mask.css b/packages/venia-concept/src/components/MiniCart/mask.css index 2868d30514..c2fab24975 100644 --- a/packages/venia-concept/src/components/MiniCart/mask.css +++ b/packages/venia-concept/src/components/MiniCart/mask.css @@ -1,4 +1,5 @@ .root_active { composes: root_active from '../Mask/mask.css'; opacity: 0.25; + z-index: 1; } diff --git a/packages/venia-concept/src/components/MiniCart/miniCart.css b/packages/venia-concept/src/components/MiniCart/miniCart.css index 47a0aaefdb..88e0fbe302 100644 --- a/packages/venia-concept/src/components/MiniCart/miniCart.css +++ b/packages/venia-concept/src/components/MiniCart/miniCart.css @@ -21,7 +21,7 @@ visibility: hidden; width: 100%; max-width: 360px; - z-index: var(--base-z-index); + z-index: 10; } /* state: open */ From dd37636c27b2ea1a2523eb2e31d11a8aeef45be0 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Wed, 27 Mar 2019 08:39:26 +0100 Subject: [PATCH 44/91] Fix layered navigation bug --- .../venia-concept/src/components/FilterModal/filterModal.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index c1c05de1f1..efb34b7a7c 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -72,6 +72,8 @@ class FilterModal extends Component { const { classes, isModalOpen, closeModalHandler } = this.props; const modalClass = isModalOpen ? classes.rootOpen : classes.root; + if (!this.props.filters) return null; + return (
    From 3f98d38156fa3c41a78a00f217f1131f9f6391de Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 12:51:53 +0100 Subject: [PATCH 45/91] Remove prevPageTotal --- .../src/RootComponents/Category/category.js | 10 +++------- .../src/reducers/__tests__/catalog.spec.js | 11 ----------- packages/venia-concept/src/reducers/catalog.js | 11 ----------- 3 files changed, 3 insertions(+), 29 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index e5919c7d04..0b240de492 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -20,8 +20,7 @@ class Category extends Component { title: string }), currentPage: number, - pageSize: number, - prevPageTotal: number + pageSize: number }; // TODO: Should not be a default here, we just don't have @@ -45,7 +44,6 @@ class Category extends Component { openDrawer, closeDrawer, pageSize, - prevPageTotal, setCurrentPage, setPrevPageTotal, drawer @@ -54,8 +52,7 @@ class Category extends Component { const pageControl = { currentPage: currentPage, setPage: setCurrentPage, - updateTotalPages: setPrevPageTotal, - totalPages: prevPageTotal + updateTotalPages: setPrevPageTotal }; const queryVariables = { @@ -113,8 +110,7 @@ const mapStateToProps = ({ catalog, app }) => { return { drawer: app.drawer, currentPage: catalog.currentPage, - pageSize: catalog.pageSize, - prevPageTotal: catalog.prevPageTotal + pageSize: catalog.pageSize }; }; diff --git a/packages/venia-concept/src/reducers/__tests__/catalog.spec.js b/packages/venia-concept/src/reducers/__tests__/catalog.spec.js index 37e65519c2..d793e432de 100644 --- a/packages/venia-concept/src/reducers/__tests__/catalog.spec.js +++ b/packages/venia-concept/src/reducers/__tests__/catalog.spec.js @@ -113,17 +113,6 @@ describe('setCurrentPage.receive', () => { describe('setPrevPageTotal.receive', () => { const actionType = actions.setPrevPageTotal.receive; - test('it sets prevPageTotal to payload', () => { - const action = { - payload: 5, - type: actionType - }; - - const result = reducer(state, action); - - expect(result).toHaveProperty('prevPageTotal', 5); - }); - test('it does not alter state on error', () => { const action = { error: true, diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index cae9767ba6..960f0b3f31 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -9,7 +9,6 @@ export const initialState = { rootCategoryId: null, currentPage: 1, pageSize: 6, - prevPageTotal: null, chosenFilterOptions: {}, appliedFilterOptions: {} }; @@ -36,16 +35,6 @@ const reducerMap = { currentPage: payload }; }, - [actions.setPrevPageTotal.receive]: (state, { payload, error }) => { - if (error) { - return state; - } - - return { - ...state, - prevPageTotal: payload - }; - }, [actions.filterOption.add]: (state, { payload: { newState, group } }) => { return { ...state, From 895fbfdc3ffdbf4dbba755cb045b149f150e8a18 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 12:54:14 +0100 Subject: [PATCH 46/91] CSS cleanup --- .../venia-concept/src/RootComponents/Category/category.css | 1 + packages/venia-concept/src/index.css | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/category.css b/packages/venia-concept/src/RootComponents/Category/category.css index 877d8e48da..5c7b0aea99 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.css +++ b/packages/venia-concept/src/RootComponents/Category/category.css @@ -38,6 +38,7 @@ .categoryTitle { color: rgb(var(--venia-text)); + padding-bottom: 1rem; font-size: 1.375rem; font-weight: 300; line-height: 1.375rem; diff --git a/packages/venia-concept/src/index.css b/packages/venia-concept/src/index.css index 3fa70160f9..c17fea72a1 100755 --- a/packages/venia-concept/src/index.css +++ b/packages/venia-concept/src/index.css @@ -42,10 +42,6 @@ body { padding: 0; } -.modalIsOpen { - overflow: hidden; -} - body, input, select, From 61d03a2a1e879fe927982d38685bd1efdd0a3c1c Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 12:57:37 +0100 Subject: [PATCH 47/91] Rename filter props --- .../src/components/FilterModal/FilterList/filterList.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index e5c45f5fe0..90faa93186 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -69,7 +69,7 @@ class FilterList extends Component { )} renderItem={({ item }) => { const isActive = isFilterSelected(item); - const swatchProps = { + const filterProps = { ...item, isActive, options, @@ -80,9 +80,9 @@ class FilterList extends Component { return (
  • {isSwatch ? ( - + ) : ( - + )}
    • ); From a034291537a2e35910efa6f8efb7de5a0672198d Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 13:02:18 +0100 Subject: [PATCH 48/91] Removed generateColor constant --- .../FilterModal/FilterList/filterSwatch.js | 13 ++----------- .../src/components/FilterModal/constants.js | 1 - 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js index 6ea3791f4c..afbbde4ae3 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js @@ -23,9 +23,6 @@ class FilterSwatch extends Component { iconWrapper: PropTypes.string, swatch: PropTypes.string }), - options: PropTypes.shape({ - generateColor: PropTypes.bool - }), isActive: PropTypes.bool, toggleOption: PropTypes.func, value_string: PropTypes.string, @@ -44,8 +41,7 @@ class FilterSwatch extends Component { group } = this.props; - const generatedColor = - options.generateColor && memoizedGetRandomColor(value_string); + const generatedColor = memoizedGetRandomColor(value_string); const swatchInlineStyle = generatedColor && { backgroundColor: `rgb(${generatedColor})` @@ -72,12 +68,7 @@ class FilterSwatch extends Component { )} - {options.generateColor && ( - - )} + ); } diff --git a/packages/venia-concept/src/components/FilterModal/constants.js b/packages/venia-concept/src/components/FilterModal/constants.js index 8870c2bf3d..ff2d96e6d7 100644 --- a/packages/venia-concept/src/components/FilterModal/constants.js +++ b/packages/venia-concept/src/components/FilterModal/constants.js @@ -13,7 +13,6 @@ export const filterRenderOptions = { mode: filterModes.swatch, options: { layout: filterLayouts.grid, - generateColor: true, searchable: true } }, From ca81667d27a5a43a81b2d9b9074f20a7445f9ac0 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 13:03:38 +0100 Subject: [PATCH 49/91] Remove unused option --- .../src/components/FilterModal/FilterList/filterSwatch.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js index afbbde4ae3..f917f5ad56 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js @@ -32,7 +32,6 @@ class FilterSwatch extends Component { render() { const { - options, isActive, toggleOption, value_string, From f7ab947ffef5d0c59af0a141ca3103ba41879045 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 13:38:36 +0100 Subject: [PATCH 50/91] Filter redux store init with URL instead of component mount --- .../src/components/FilterModal/filterModal.js | 39 ------------------- .../FilterModal/filterModalContainer.js | 2 - .../venia-concept/src/reducers/catalog.js | 5 ++- .../src/util/getFilterParamsFromUrl.js | 22 +++++++++++ 4 files changed, 25 insertions(+), 43 deletions(-) create mode 100644 packages/venia-concept/src/util/getFilterParamsFromUrl.js diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index efb34b7a7c..dae2fa0a2c 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -29,45 +29,6 @@ class FilterModal extends Component { closeModalHandler: PropTypes.func }; - getFilterParams = location => { - const params = new URLSearchParams(location.search); - let titles, - values = []; - - let urlFilterParams = {}; - - for (var key of params.keys()) { - const cleanKey = key.replace(/\[\]\[.*\]/gm, ''); - - if (urlFilterParams[cleanKey]) continue; - - titles = params.getAll(`${cleanKey}[][title]`); - values = params.getAll(`${cleanKey}[][value]`); - - urlFilterParams[cleanKey] = titles.map((title, index) => ({ - title: title, - value: values[index] - })); - } - - return urlFilterParams; - }; - - componentDidMount = () => { - const filterParams = this.getFilterParams(this.props.history.location); - for (var key in filterParams) { - if (filterParams.hasOwnProperty(key)) { - filterParams[key].map(({ title, value }) => { - this.props.filterAdd({ - group: key, - title, - value - }); - }); - } - } - }; - render() { const { classes, isModalOpen, closeModalHandler } = this.props; const modalClass = isModalOpen ? classes.rootOpen : classes.root; diff --git a/packages/venia-concept/src/components/FilterModal/filterModalContainer.js b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js index 1941a97342..7332bd49c9 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js @@ -2,7 +2,6 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import FilterModal from './filterModal'; import { filterAdd, filterRemove } from 'src/actions/catalog'; -import { withRouter } from 'react-router-dom'; const mapDispatchToProps = { filterAdd, @@ -10,7 +9,6 @@ const mapDispatchToProps = { }; export default compose( - withRouter, connect( null, mapDispatchToProps diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index 960f0b3f31..e13da93774 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -1,4 +1,5 @@ import { handleActions } from 'redux-actions'; +import { getFilterParams } from 'src/util/getFilterParamsFromUrl'; import actions from 'src/actions/catalog'; @@ -9,8 +10,8 @@ export const initialState = { rootCategoryId: null, currentPage: 1, pageSize: 6, - chosenFilterOptions: {}, - appliedFilterOptions: {} + chosenFilterOptions: getFilterParams(), + appliedFilterOptions: getFilterParams() }; const reducerMap = { diff --git a/packages/venia-concept/src/util/getFilterParamsFromUrl.js b/packages/venia-concept/src/util/getFilterParamsFromUrl.js new file mode 100644 index 0000000000..6831515b2e --- /dev/null +++ b/packages/venia-concept/src/util/getFilterParamsFromUrl.js @@ -0,0 +1,22 @@ +export const getFilterParams = () => { + const params = new URLSearchParams(window.location.search); + let titles, + values = []; + + let urlFilterParams = {}; + + for (var key of params.keys()) { + const cleanKey = key.replace(/\[.*\]/gm, ''); + if (urlFilterParams[cleanKey]) continue; + + titles = params.getAll(`${cleanKey}[title]`); + values = params.getAll(`${cleanKey}[value]`); + + urlFilterParams[cleanKey] = titles.map((title, index) => ({ + title: title, + value: values[index] + })); + } + + return urlFilterParams; +}; From e8ab64f5f956957d78b2ba9ea2cc46648ac7f6ba Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 13:51:08 +0100 Subject: [PATCH 51/91] Replace getDerivedStateFromProps with connected catalog store in redux --- .../FilterModal/FilterFooter/filterFooter.js | 26 ++++--------------- 1 file changed, 5 insertions(+), 21 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js index c89481c28c..99176f6ed1 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js +++ b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js @@ -6,6 +6,7 @@ import classify from 'src/classify'; import defaultClasses from './filterFooter.css'; import { compose } from 'redux'; import { connect } from 'react-redux'; +import isObjectEmpty from 'src/util/isObjectEmpty'; class FilterFooter extends Component { static propTypes = { @@ -22,24 +23,6 @@ class FilterFooter extends Component { closeModalHandler: PropTypes.func }; - static getDerivedStateFromProps(nextProps) { - const { chosenFilterOptions } = nextProps; - let filterOptionsArePristine = true; - - for (const optionName in chosenFilterOptions) { - if (chosenFilterOptions[optionName].length > 0) { - filterOptionsArePristine = false; - break; - } - } - - return { areOptionsPristine: filterOptionsArePristine }; - } - - state = { - areOptionsPristine: true - }; - resetFilterOptions = () => { const { history, filterClear } = this.props; history.push(); @@ -84,9 +67,10 @@ class FilterFooter extends Component { }; render() { - const { areOptionsPristine } = this.state; - const { classes } = this.props; - const footerButtons = this.getFooterButtons(areOptionsPristine); + const { classes, chosenFilterOptions } = this.props; + const footerButtons = this.getFooterButtons( + isObjectEmpty(chosenFilterOptions) + ); return
    {footerButtons}
    ; } From 468509a54281db1f1bcee18034e0c5c0d8f31a04 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 28 Mar 2019 13:56:08 +0100 Subject: [PATCH 52/91] Replace duplicate filterOption.add and filterOption.remove with filterOption.update --- packages/venia-concept/src/actions/catalog/actions.js | 3 +-- .../venia-concept/src/actions/catalog/asyncActions.js | 4 ++-- packages/venia-concept/src/reducers/catalog.js | 11 +---------- 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/venia-concept/src/actions/catalog/actions.js b/packages/venia-concept/src/actions/catalog/actions.js index 9ce0463d27..f705a80e13 100644 --- a/packages/venia-concept/src/actions/catalog/actions.js +++ b/packages/venia-concept/src/actions/catalog/actions.js @@ -16,8 +16,7 @@ const actionMap = { RECEIVE: null }, FILTER_OPTION: { - ADD: null, - REMOVE: null, + UPDATE: null, CLEAR: null } }; diff --git a/packages/venia-concept/src/actions/catalog/asyncActions.js b/packages/venia-concept/src/actions/catalog/asyncActions.js index bfdc4e12af..80d8b7b1e5 100644 --- a/packages/venia-concept/src/actions/catalog/asyncActions.js +++ b/packages/venia-concept/src/actions/catalog/asyncActions.js @@ -54,7 +54,7 @@ export const filterAdd = ({ group, title, value }, history) => const oldState = chosenFilterOptions[group] || []; const newState = oldState.concat({ title, value }); - dispatch(actions.filterOption.add({ newState, group })); + dispatch(actions.filterOption.update({ newState, group })); if (history) { const filters = { ...chosenFilterOptions, [group]: newState }; @@ -73,7 +73,7 @@ export const filterRemove = ({ group, title, value }, history) => return item.title !== title || item.value !== value; }); - dispatch(actions.filterOption.remove({ newState, group })); + dispatch(actions.filterOption.update({ newState, group })); if (history) { const filters = { ...chosenFilterOptions, [group]: newState }; diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index e13da93774..730b70ae58 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -36,16 +36,7 @@ const reducerMap = { currentPage: payload }; }, - [actions.filterOption.add]: (state, { payload: { newState, group } }) => { - return { - ...state, - chosenFilterOptions: { - ...state.chosenFilterOptions, - [group]: newState - } - }; - }, - [actions.filterOption.remove]: ( + [actions.filterOption.update]: ( state, { payload: { newState, group } } ) => { From 1174a6646baba9af54d5e18e0f7b81c214fbda65 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 08:25:41 +0100 Subject: [PATCH 53/91] Revert commit --- .../src/RootComponents/Category/category.js | 8 ++++++-- .../src/reducers/__tests__/catalog.spec.js | 11 +++++++++++ packages/venia-concept/src/reducers/catalog.js | 11 +++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index 0b240de492..5fa40c5107 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -20,6 +20,7 @@ class Category extends Component { title: string }), currentPage: number, + prevPageTotal: number, pageSize: number }; @@ -42,6 +43,7 @@ class Category extends Component { classes, currentPage, openDrawer, + prevPageTotal, closeDrawer, pageSize, setCurrentPage, @@ -52,7 +54,8 @@ class Category extends Component { const pageControl = { currentPage: currentPage, setPage: setCurrentPage, - updateTotalPages: setPrevPageTotal + updateTotalPages: setPrevPageTotal, + totalPages: prevPageTotal }; const queryVariables = { @@ -110,7 +113,8 @@ const mapStateToProps = ({ catalog, app }) => { return { drawer: app.drawer, currentPage: catalog.currentPage, - pageSize: catalog.pageSize + pageSize: catalog.pageSize, + prevPageTotal: catalog.prevPageTotal }; }; diff --git a/packages/venia-concept/src/reducers/__tests__/catalog.spec.js b/packages/venia-concept/src/reducers/__tests__/catalog.spec.js index d793e432de..37e65519c2 100644 --- a/packages/venia-concept/src/reducers/__tests__/catalog.spec.js +++ b/packages/venia-concept/src/reducers/__tests__/catalog.spec.js @@ -113,6 +113,17 @@ describe('setCurrentPage.receive', () => { describe('setPrevPageTotal.receive', () => { const actionType = actions.setPrevPageTotal.receive; + test('it sets prevPageTotal to payload', () => { + const action = { + payload: 5, + type: actionType + }; + + const result = reducer(state, action); + + expect(result).toHaveProperty('prevPageTotal', 5); + }); + test('it does not alter state on error', () => { const action = { error: true, diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index 730b70ae58..717d6436f8 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -10,6 +10,7 @@ export const initialState = { rootCategoryId: null, currentPage: 1, pageSize: 6, + prevPageTotal: null, chosenFilterOptions: getFilterParams(), appliedFilterOptions: getFilterParams() }; @@ -36,6 +37,16 @@ const reducerMap = { currentPage: payload }; }, + [actions.setPrevPageTotal.receive]: (state, { payload, error }) => { + if (error) { + return state; + } + + return { + ...state, + prevPageTotal: payload + }; + }, [actions.filterOption.update]: ( state, { payload: { newState, group } } From f000b0e3da7768bda107d3d0bdaceb4e1b5433cb Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 08:41:06 +0100 Subject: [PATCH 54/91] Remove unused reducer, connect filterModal to redux --- .../src/RootComponents/Category/category.js | 9 ++------- .../RootComponents/Category/categoryContent.js | 4 +--- .../src/components/FilterModal/filterModal.js | 18 +++++++++++++++--- packages/venia-concept/src/reducers/catalog.js | 3 +-- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index 5fa40c5107..d9246fcb54 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -47,8 +47,7 @@ class Category extends Component { closeDrawer, pageSize, setCurrentPage, - setPrevPageTotal, - drawer + setPrevPageTotal } = this.props; const pageControl = { @@ -66,8 +65,6 @@ class Category extends Component { idString: String(id) }; - const isFilterModalOpen = drawer === 'filter'; - return ( {({ loading, error, data }) => { @@ -97,7 +94,6 @@ class Category extends Component { { +const mapStateToProps = ({ catalog }) => { return { - drawer: app.drawer, currentPage: catalog.currentPage, pageSize: catalog.pageSize, prevPageTotal: catalog.prevPageTotal diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 5ab19bfbbc..6bf32d79a5 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -26,8 +26,7 @@ class CategoryContent extends Component { data, pageSize, openDrawer, - closeDrawer, - isFilterModalOpen + closeDrawer } = this.props; const items = data ? data.products.items : null; @@ -62,7 +61,6 @@ class CategoryContent extends Component {

    diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index dae2fa0a2c..01fad1e39c 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import { compose } from 'redux'; +import { connect } from 'src/drivers'; import FilterFooter from './FilterFooter'; import PropTypes from 'prop-types'; import { List } from '@magento/peregrine'; @@ -30,8 +32,9 @@ class FilterModal extends Component { }; render() { - const { classes, isModalOpen, closeModalHandler } = this.props; - const modalClass = isModalOpen ? classes.rootOpen : classes.root; + const { classes, drawer, closeModalHandler } = this.props; + const modalClass = + drawer === 'filter' ? classes.rootOpen : classes.root; if (!this.props.filters) return null; @@ -70,4 +73,13 @@ class FilterModal extends Component { } } -export default classify(defaultClasses)(FilterModal); +const mapStateToProps = ({ app }) => { + return { + drawer: app.drawer + }; +}; + +export default compose( + connect(mapStateToProps), + classify(defaultClasses) +)(FilterModal); diff --git a/packages/venia-concept/src/reducers/catalog.js b/packages/venia-concept/src/reducers/catalog.js index 717d6436f8..c71d60534c 100644 --- a/packages/venia-concept/src/reducers/catalog.js +++ b/packages/venia-concept/src/reducers/catalog.js @@ -11,8 +11,7 @@ export const initialState = { currentPage: 1, pageSize: 6, prevPageTotal: null, - chosenFilterOptions: getFilterParams(), - appliedFilterOptions: getFilterParams() + chosenFilterOptions: getFilterParams() }; const reducerMap = { From 7df6d8d5b2108177c0ca5eb3aef9d4e6106be7fc Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 08:43:44 +0100 Subject: [PATCH 55/91] Added conditional rendering to filter button --- .../RootComponents/Category/categoryContent.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 6bf32d79a5..3efb17c080 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -44,14 +44,16 @@ class CategoryContent extends Component { }} />
    {categoryTitle}
    -
    - -
    + {filters && ( +
    + +
    + )}
    From 5c439656e4f7a15f893e7c561649b683366b3762 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 08:54:43 +0100 Subject: [PATCH 56/91] Clean up modal controls on filter modal --- .../src/RootComponents/Category/category.js | 7 ----- .../Category/categoryContent.js | 29 ++++++++++--------- .../FilterModal/FilterFooter/filterFooter.js | 10 ++++--- .../src/components/FilterModal/filterModal.js | 20 ++++++++----- 4 files changed, 35 insertions(+), 31 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index d9246fcb54..aca1e2c8d2 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import { string, number, shape } from 'prop-types'; import { compose } from 'redux'; import { connect, Query } from 'src/drivers'; -import { closeDrawer, toggleDrawer } from 'src/actions/app'; import classify from 'src/classify'; import { setCurrentPage, setPrevPageTotal } from 'src/actions/catalog'; @@ -42,9 +41,7 @@ class Category extends Component { id, classes, currentPage, - openDrawer, prevPageTotal, - closeDrawer, pageSize, setCurrentPage, setPrevPageTotal @@ -92,8 +89,6 @@ class Category extends Component { return ( { }; const mapDispatchToProps = dispatch => ({ - openDrawer: () => dispatch(toggleDrawer('filter')), - closeDrawer: () => dispatch(closeDrawer()), setCurrentPage: payload => dispatch(setCurrentPage(payload)), setPrevPageTotal: payload => dispatch(setPrevPageTotal(payload)) }); diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 3efb17c080..f493b00854 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { compose } from 'redux'; +import { connect } from 'src/drivers'; +import { toggleDrawer } from 'src/actions/app'; import classify from 'src/classify'; import Gallery from 'src/components/Gallery'; import Pagination from 'src/components/Pagination'; @@ -20,14 +23,7 @@ class CategoryContent extends Component { }; render() { - const { - classes, - pageControl, - data, - pageSize, - openDrawer, - closeDrawer - } = this.props; + const { classes, pageControl, data, pageSize, openDrawer } = this.props; const items = data ? data.products.items : null; const filters = data ? data.products.filters : null; @@ -61,13 +57,20 @@ class CategoryContent extends Component {
    - + {filters && } ); } } -export default classify(defaultClasses)(CategoryContent); +const mapDispatchToProps = dispatch => ({ + openDrawer: () => dispatch(toggleDrawer('filter')) +}); + +export default compose( + connect( + null, + mapDispatchToProps + ), + classify(defaultClasses) +)(CategoryContent); diff --git a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js index 99176f6ed1..da94fbebcc 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js +++ b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.js @@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import catalogActions, { serialize } from 'src/actions/catalog'; import { withRouter } from 'react-router-dom'; +import { closeDrawer } from 'src/actions/app'; import classify from 'src/classify'; import defaultClasses from './filterFooter.css'; import { compose } from 'redux'; @@ -20,7 +21,7 @@ class FilterFooter extends Component { history: PropTypes.object, filterClear: PropTypes.func, chosenFilterOptions: PropTypes.object, - closeModalHandler: PropTypes.func + closeDrawer: PropTypes.func }; resetFilterOptions = () => { @@ -30,9 +31,9 @@ class FilterFooter extends Component { }; handleApplyFilters = () => { - const { history, chosenFilterOptions, closeModalHandler } = this.props; + const { history, chosenFilterOptions, closeDrawer } = this.props; history.push('?' + serialize(chosenFilterOptions)); - closeModalHandler(); + closeDrawer(); }; getFooterButtons = areOptionsPristine => { @@ -85,7 +86,8 @@ const mapStateToProps = ({ catalog }) => { }; const mapDispatchToProps = { - filterClear: catalogActions.filterOption.clear + filterClear: catalogActions.filterOption.clear, + closeDrawer: closeDrawer }; export default compose( diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index 01fad1e39c..f70768aad1 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { compose } from 'redux'; import { connect } from 'src/drivers'; import FilterFooter from './FilterFooter'; +import { closeDrawer } from 'src/actions/app'; import PropTypes from 'prop-types'; import { List } from '@magento/peregrine'; import { FiltersCurrent } from './FiltersCurrent'; @@ -28,22 +29,20 @@ class FilterModal extends Component { ), filterAdd: PropTypes.func, filterRemove: PropTypes.func, - closeModalHandler: PropTypes.func + closeDrawer: PropTypes.func }; render() { - const { classes, drawer, closeModalHandler } = this.props; + const { classes, drawer, closeDrawer } = this.props; const modalClass = drawer === 'filter' ? classes.rootOpen : classes.root; - if (!this.props.filters) return null; - return (
    FILTER BY -
    @@ -67,7 +66,7 @@ class FilterModal extends Component { )} />
    - +
    ); } @@ -79,7 +78,14 @@ const mapStateToProps = ({ app }) => { }; }; +const mapDispatchToProps = dispatch => ({ + closeDrawer: () => dispatch(closeDrawer()) +}); + export default compose( - connect(mapStateToProps), + connect( + mapStateToProps, + mapDispatchToProps + ), classify(defaultClasses) )(FilterModal); From 19cd3dad52ea73eed9df8cabdcfa1300f07ba682 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 08:58:55 +0100 Subject: [PATCH 57/91] Replaced var with const in iterator --- packages/venia-concept/src/util/getFilterParamsFromUrl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/util/getFilterParamsFromUrl.js b/packages/venia-concept/src/util/getFilterParamsFromUrl.js index 6831515b2e..f082c2c509 100644 --- a/packages/venia-concept/src/util/getFilterParamsFromUrl.js +++ b/packages/venia-concept/src/util/getFilterParamsFromUrl.js @@ -5,7 +5,7 @@ export const getFilterParams = () => { let urlFilterParams = {}; - for (var key of params.keys()) { + for (const key of params.keys()) { const cleanKey = key.replace(/\[.*\]/gm, ''); if (urlFilterParams[cleanKey]) continue; From 82c3500dac98a8c14d34aae2450647ac82fcda4b Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 11:25:31 +0100 Subject: [PATCH 58/91] Rename add and remove filter functions --- .../src/actions/catalog/asyncActions.js | 4 ++-- .../components/FilterModal/FilterList/filterList.js | 8 ++++---- .../FilterModal/FiltersCurrent/filtersCurrent.js | 6 +++--- .../FiltersCurrent/filtersCurrentContainer.js | 4 ++-- .../src/components/FilterModal/filterBlock.js | 12 ++++++------ .../src/components/FilterModal/filterModal.js | 8 ++++---- .../components/FilterModal/filterModalContainer.js | 6 +++--- 7 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/venia-concept/src/actions/catalog/asyncActions.js b/packages/venia-concept/src/actions/catalog/asyncActions.js index 80d8b7b1e5..4aa7e552bc 100644 --- a/packages/venia-concept/src/actions/catalog/asyncActions.js +++ b/packages/venia-concept/src/actions/catalog/asyncActions.js @@ -45,7 +45,7 @@ export const serialize = (params, keys = [], isArray = false) => { const updateCatalogUrl = (filters, history) => history.push('?' + serialize(filters)); -export const filterAdd = ({ group, title, value }, history) => +export const addFilter = ({ group, title, value }, history) => async function thunk(dispatch, getState) { const { catalog: { chosenFilterOptions } @@ -62,7 +62,7 @@ export const filterAdd = ({ group, title, value }, history) => } }; -export const filterRemove = ({ group, title, value }, history) => +export const removeFilter = ({ group, title, value }, history) => async function thunk(dispatch, getState) { const { catalog: { chosenFilterOptions } diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index 90faa93186..31fff57745 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -23,18 +23,18 @@ class FilterList extends Component { layoutClass: PropTypes.string, isSwatch: PropTypes.bool, options: PropTypes.object, - filterAdd: PropTypes.func, - filterRemove: PropTypes.func, + addFilter: PropTypes.func, + removeFilter: PropTypes.func, items: PropTypes.array }; toggleOption = event => { - const { filterRemove, filterAdd } = this.props; + const { removeFilter, addFilter } = this.props; const { value, title, dataset } = event.currentTarget || event.srcElement; const { group } = dataset; const item = { title, value, group }; - this.isOptionActive(item) ? filterRemove(item) : filterAdd(item); + this.isOptionActive(item) ? removeFilter(item) : addFilter(item); }; isOptionActive = option => diff --git a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js index d88597b22a..42c4527507 100644 --- a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js +++ b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js @@ -16,7 +16,7 @@ class FiltersCurrent extends Component { icon: PropTypes.string }), keyPrefix: PropTypes.string, - filterRemove: PropTypes.func, + removeFilter: PropTypes.func, chosenFilterOptions: PropTypes.shape({ title: PropTypes.string, value: PropTypes.string @@ -27,8 +27,8 @@ class FiltersCurrent extends Component { const { title, value, dataset } = event.currentTarget || event.srcElement; const { group } = dataset; - const { filterRemove, history } = this.props; - filterRemove({ title, value, group }, history); + const { removeFilter, history } = this.props; + removeFilter({ title, value, group }, history); }; getCurrentFilter = (item, key) => { diff --git a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js index 4aeff682b4..10c6910712 100644 --- a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js +++ b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrentContainer.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import FiltersCurrent from './filtersCurrent'; -import { filterRemove } from 'src/actions/catalog'; +import { removeFilter } from 'src/actions/catalog'; const mapStateToProps = ({ catalog }) => { const { chosenFilterOptions } = catalog; @@ -10,7 +10,7 @@ const mapStateToProps = ({ catalog }) => { }; const mapDispatchToProps = { - filterRemove + removeFilter }; export default connect( diff --git a/packages/venia-concept/src/components/FilterModal/filterBlock.js b/packages/venia-concept/src/components/FilterModal/filterBlock.js index 63c4d17573..02e8f5f6f8 100644 --- a/packages/venia-concept/src/components/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/components/FilterModal/filterBlock.js @@ -27,8 +27,8 @@ class FilterBlock extends Component { filter_items: PropTypes.array, request_var: PropTypes.string }), - filterAdd: PropTypes.func, - filterRemove: PropTypes.func + addFilter: PropTypes.func, + removeFilter: PropTypes.func }; state = { @@ -81,8 +81,8 @@ class FilterBlock extends Component { const { classes, item: { filter_items, request_var, name }, - filterRemove, - filterAdd + removeFilter, + addFilter } = this.props; const { isExpanded } = this.state; @@ -102,8 +102,8 @@ class FilterBlock extends Component { const filterProps = { isSwatch, name, - filterAdd, - filterRemove, + addFilter, + removeFilter, mode, options, id: request_var, diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index f70768aad1..3a7d760a06 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -27,8 +27,8 @@ class FilterModal extends Component { items: PropTypes.array }) ), - filterAdd: PropTypes.func, - filterRemove: PropTypes.func, + addFilter: PropTypes.func, + removeFilter: PropTypes.func, closeDrawer: PropTypes.func }; @@ -60,8 +60,8 @@ class FilterModal extends Component { renderItem={props => ( )} /> diff --git a/packages/venia-concept/src/components/FilterModal/filterModalContainer.js b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js index 7332bd49c9..4f2cf1e669 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModalContainer.js +++ b/packages/venia-concept/src/components/FilterModal/filterModalContainer.js @@ -1,11 +1,11 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import FilterModal from './filterModal'; -import { filterAdd, filterRemove } from 'src/actions/catalog'; +import { addFilter, removeFilter } from 'src/actions/catalog'; const mapDispatchToProps = { - filterAdd, - filterRemove + addFilter, + removeFilter }; export default compose( From 6922ad016a50cea67277d9885ac8ec363c4ac680 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 11:44:48 +0100 Subject: [PATCH 59/91] Replace filter swatch with default swatch component --- .../FilterModal/FilterList/filterDefault.js | 27 +++--- .../FilterModal/FilterList/filterList.js | 29 +++---- .../FilterModal/FilterList/filterSwatch.css | 84 ------------------- .../FilterModal/FilterList/filterSwatch.js | 76 ----------------- .../src/components/FilterModal/filterBlock.js | 1 - 5 files changed, 23 insertions(+), 194 deletions(-) delete mode 100644 packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.css delete mode 100644 packages/venia-concept/src/components/FilterModal/FilterList/filterSwatch.js diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js index c7cc812a74..bd2b29e831 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js @@ -12,35 +12,28 @@ class FilterDefault extends Component { icon: PropTypes.string, iconActive: PropTypes.string }), - isActive: PropTypes.bool, - toggleOption: PropTypes.func, - value_string: PropTypes.string, + item: PropTypes.shape({ + label: PropTypes.string + }), + isSelected: PropTypes.bool, label: PropTypes.string, group: PropTypes.string }; render() { const { - value_string, - toggleOption, - label, classes, - group, - isActive + isSelected, + item: { label }, + ...rest } = this.props; - const iconClassName = isActive ? classes.iconActive : classes.icon; + const iconClassName = isSelected ? classes.iconActive : classes.icon; return ( - - ); - } -} - -export default classify(defaultClasses)(FilterSwatch); diff --git a/packages/venia-concept/src/components/FilterModal/filterBlock.js b/packages/venia-concept/src/components/FilterModal/filterBlock.js index 02e8f5f6f8..7e4f3c7c21 100644 --- a/packages/venia-concept/src/components/FilterModal/filterBlock.js +++ b/packages/venia-concept/src/components/FilterModal/filterBlock.js @@ -105,7 +105,6 @@ class FilterBlock extends Component { addFilter, removeFilter, mode, - options, id: request_var, items: filter_items, layoutClass: filterLayoutClass From 47e8aee9970198912d69f66d15985692a9f37dcc Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 29 Mar 2019 11:54:59 +0100 Subject: [PATCH 60/91] filterSearch improvements --- .../components/FilterModal/FilterSearch/filterSearch.js | 7 ++----- .../src/components/FilterModal/filterBlock.js | 1 + 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js index b25653b3bc..1d266a8d8f 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js +++ b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js @@ -17,10 +17,7 @@ const withFilterSearch = WrappedComponent => { filterQuery: '' }; - handleFilterSearch = event => { - const { value } = event.currentTarget || event.srcElement; - this.setState({ filterQuery: value }); - }; + handleFilterSearch = value => this.setState({ filterQuery: value }); handleResetSearch = () => this.setState({ filterQuery: '' }); @@ -58,7 +55,7 @@ const withFilterSearch = WrappedComponent => { Date: Fri, 29 Mar 2019 12:05:13 +0100 Subject: [PATCH 61/91] Fix filter modal css - replace value with var --- .../venia-concept/src/components/FilterModal/filterModal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.css b/packages/venia-concept/src/components/FilterModal/filterModal.css index 93127b9391..006ccdd392 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.css +++ b/packages/venia-concept/src/components/FilterModal/filterModal.css @@ -8,7 +8,7 @@ max-width: 640px; transform: translate3d(-100%, 0, 0); transition-duration: 192ms; - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-timing-function: var(--venia-anim-out); transition-property: opacity, transform, visibility; visibility: hidden; opacity: 0; From b6aa5a5a948bd022033ffaca671a990ab3cffeed Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 1 Apr 2019 09:57:36 +0200 Subject: [PATCH 62/91] Split categoryContent component into container and component, fix broken test --- .../src/RootComponents/Category/category.js | 2 +- .../RootComponents/Category/categoryContent.js | 15 +-------------- .../Category/categoryContentContainer.js | 12 ++++++++++++ 3 files changed, 14 insertions(+), 15 deletions(-) create mode 100644 packages/venia-concept/src/RootComponents/Category/categoryContentContainer.js diff --git a/packages/venia-concept/src/RootComponents/Category/category.js b/packages/venia-concept/src/RootComponents/Category/category.js index aca1e2c8d2..51954ffe75 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.js +++ b/packages/venia-concept/src/RootComponents/Category/category.js @@ -6,7 +6,7 @@ import { connect, Query } from 'src/drivers'; import classify from 'src/classify'; import { setCurrentPage, setPrevPageTotal } from 'src/actions/catalog'; import { loadingIndicator } from 'src/components/LoadingIndicator'; -import CategoryContent from './categoryContent'; +import CategoryContent from './categoryContentContainer'; import defaultClasses from './category.css'; import categoryQuery from 'src/queries/getCategory.graphql'; diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index f493b00854..e8c0e3d182 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -1,8 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { compose } from 'redux'; -import { connect } from 'src/drivers'; -import { toggleDrawer } from 'src/actions/app'; import classify from 'src/classify'; import Gallery from 'src/components/Gallery'; import Pagination from 'src/components/Pagination'; @@ -63,14 +60,4 @@ class CategoryContent extends Component { } } -const mapDispatchToProps = dispatch => ({ - openDrawer: () => dispatch(toggleDrawer('filter')) -}); - -export default compose( - connect( - null, - mapDispatchToProps - ), - classify(defaultClasses) -)(CategoryContent); +export default classify(defaultClasses)(CategoryContent); diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContentContainer.js b/packages/venia-concept/src/RootComponents/Category/categoryContentContainer.js new file mode 100644 index 0000000000..4f47790988 --- /dev/null +++ b/packages/venia-concept/src/RootComponents/Category/categoryContentContainer.js @@ -0,0 +1,12 @@ +import { connect } from 'src/drivers'; +import { toggleDrawer } from 'src/actions/app'; +import CategoryContent from './categoryContent'; + +const mapDispatchToProps = dispatch => ({ + openDrawer: () => dispatch(toggleDrawer('filter')) +}); + +export default connect( + null, + mapDispatchToProps +)(CategoryContent); From efa17bbc0d7a750ca3d25f1865d13a81cded4755 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 15 Apr 2019 08:54:50 +0200 Subject: [PATCH 63/91] Fix eslint errors --- .../src/actions/catalog/asyncActions.js | 27 +++++++------------ .../src/util/getFilterParamsFromUrl.js | 2 +- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/packages/venia-concept/src/actions/catalog/asyncActions.js b/packages/venia-concept/src/actions/catalog/asyncActions.js index 4aa7e552bc..3853bd69cb 100644 --- a/packages/venia-concept/src/actions/catalog/asyncActions.js +++ b/packages/venia-concept/src/actions/catalog/asyncActions.js @@ -2,20 +2,14 @@ import actions from './actions'; import mockData from './mockData'; export const serialize = (params, keys = [], isArray = false) => { - const p = Object.keys(params) + const serialized = Object.keys(params) .map(key => { - let val = params[key]; - if ( - '[object Object]' === Object.prototype.toString.call(val) || - Array.isArray(val) - ) { + const val = params[key]; + const isObject = + Object.prototype.toString.call(val) === '[object Object]'; + if (isObject || Array.isArray(val)) { if (val.length === 0) return null; - - if (Array.isArray(params)) { - keys.push(''); - } else { - keys.push(key); - } + keys.push(Array.isArray(params) ? '' : key); return serialize(val, keys, Array.isArray(val)); } else { let tKey = key; @@ -28,18 +22,15 @@ export const serialize = (params, keys = [], isArray = false) => { return '' === str ? k : `${str}[${k}]`; }, ''); } - if (isArray) { - return `${tKey}[]=${val}`; - } else { - return `${tKey}=${val}`; - } + + return isArray ? `${tKey}[]=${val}` : `${tKey}=${val}`; } }) .filter(Boolean) .join('&'); keys.pop(); - return p; + return serialized; }; const updateCatalogUrl = (filters, history) => diff --git a/packages/venia-concept/src/util/getFilterParamsFromUrl.js b/packages/venia-concept/src/util/getFilterParamsFromUrl.js index f082c2c509..122ac1ebae 100644 --- a/packages/venia-concept/src/util/getFilterParamsFromUrl.js +++ b/packages/venia-concept/src/util/getFilterParamsFromUrl.js @@ -3,7 +3,7 @@ export const getFilterParams = () => { let titles, values = []; - let urlFilterParams = {}; + const urlFilterParams = {}; for (const key of params.keys()) { const cleanKey = key.replace(/\[.*\]/gm, ''); From 1a85088ba430a967208db2ab1a259f69fb010ecd Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 18 Apr 2019 13:15:36 +0200 Subject: [PATCH 64/91] Strip HTML from filter label and remove dangerouslySetInnerHtml - temporary fix --- .../FilterModal/FilterList/filterDefault.js | 6 +----- .../FilterModal/FilterList/filterList.js | 14 +++++++++----- .../FilterModal/FiltersCurrent/filtersCurrent.js | 6 +----- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js index bd2b29e831..469bbd55ba 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterDefault.js @@ -35,11 +35,7 @@ class FilterDefault extends Component { {isSelected && } - + {label} ); } diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index 90dd48a268..9cd2c6bd94 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -9,6 +9,8 @@ import FilterDefault from './filterDefault'; import Swatch from 'src/components/ProductOptions/swatch'; import { WithFilterSearch } from 'src/components/FilterModal/FilterSearch'; +const stripHtmlRegex = /(<([^>]+)>)/gi; + class FilterList extends Component { static propTypes = { classes: PropTypes.shape({ @@ -27,6 +29,8 @@ class FilterList extends Component { items: PropTypes.array }; + stripHtml = html => html.replace(/(<([^>]+)>)/gi, ''); + toggleOption = event => { const { removeFilter, addFilter } = this.props; const { value, title, dataset } = @@ -42,14 +46,14 @@ class FilterList extends Component { ) > -1; isFilterSelected = item => { + const label = this.stripHtml(item.label); return !!this.props.chosenOptions.find( - ({ title, value }) => - item.label === title && item.value_string === value + ({ title, value }) => label === title && item.value_string === value ); }; render() { - const { toggleOption, isFilterSelected } = this; + const { toggleOption, isFilterSelected, stripHtml } = this; const { classes, items, id, layoutClass, isSwatch } = this.props; return ( @@ -64,11 +68,11 @@ class FilterList extends Component { const filterProps = { item: { - label: item.label, + label: stripHtml(item.label), value_index: item.value_string }, value: item.value_string, - title: item.label, + title: stripHtml(item.label), 'data-group': id, onClick: toggleOption, isSelected: isActive diff --git a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js index 42c4527507..11f788e4e4 100644 --- a/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js +++ b/packages/venia-concept/src/components/FilterModal/FiltersCurrent/filtersCurrent.js @@ -46,11 +46,7 @@ class FiltersCurrent extends Component { value={value} > - + {title} ); From 74fef5c4610745e8fc05efb98c1283785882ca9a Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 18 Apr 2019 13:17:47 +0200 Subject: [PATCH 65/91] Remove unused const and improved filter search --- .../src/components/FilterModal/FilterList/filterList.js | 2 -- .../components/FilterModal/FilterSearch/filterSearch.js | 7 ++----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js index 9cd2c6bd94..8cf3013758 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-concept/src/components/FilterModal/FilterList/filterList.js @@ -9,8 +9,6 @@ import FilterDefault from './filterDefault'; import Swatch from 'src/components/ProductOptions/swatch'; import { WithFilterSearch } from 'src/components/FilterModal/FilterSearch'; -const stripHtmlRegex = /(<([^>]+)>)/gi; - class FilterList extends Component { static propTypes = { classes: PropTypes.shape({ diff --git a/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js index 1d266a8d8f..f7f4e44f0d 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js +++ b/packages/venia-concept/src/components/FilterModal/FilterSearch/filterSearch.js @@ -22,11 +22,8 @@ const withFilterSearch = WrappedComponent => { handleResetSearch = () => this.setState({ filterQuery: '' }); getFilteredItems = (items, filterQuery) => - items.filter( - item => - item.label - .toUpperCase() - .indexOf(filterQuery.toUpperCase()) >= 0 + items.filter(item => + item.label.toUpperCase().includes(filterQuery.toUpperCase()) ); render() { From 2941768f7513bf326e455fab5d5ca5faa6220140 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 2 May 2019 16:50:05 +0200 Subject: [PATCH 66/91] Refactoring with React portal --- .../components/FilterModal/filterModal.css | 2 +- .../src/components/FilterModal/filterModal.js | 59 ++++++++++--------- .../src/components/Main/main.css | 1 + .../src/components/Mask/mask.css | 2 +- .../src/components/MiniCart/mask.css | 1 - .../src/components/MiniCart/miniCart.css | 2 +- .../src/components/Modal/index.js | 1 + .../src/components/Modal/modal.js | 5 ++ .../src/components/Navigation/navigation.css | 2 +- 9 files changed, 43 insertions(+), 32 deletions(-) create mode 100644 packages/venia-concept/src/components/Modal/index.js create mode 100644 packages/venia-concept/src/components/Modal/modal.js diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.css b/packages/venia-concept/src/components/FilterModal/filterModal.css index 006ccdd392..dd76c4d8a3 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.css +++ b/packages/venia-concept/src/components/FilterModal/filterModal.css @@ -14,7 +14,7 @@ opacity: 0; overflow: hidden; width: 100%; - z-index: 11; + z-index: 3; display: grid; grid-template-rows: min-content 1fr; } diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index 3a7d760a06..f3bf88a988 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -11,6 +11,7 @@ import CloseIcon from 'react-feather/dist/icons/x'; import Icon from 'src/components/Icon'; import FilterBlock from './filterBlock'; import defaultClasses from './filterModal.css'; +import { Modal } from 'src/components/Modal'; class FilterModal extends Component { static propTypes = { @@ -38,36 +39,40 @@ class FilterModal extends Component { drawer === 'filter' ? classes.rootOpen : classes.root; return ( -
    -
    -
    - FILTER BY - -
    + +
    +
    +
    + + FILTER BY + + +
    - + - request_var} - render={props => ( -
      - {props.children} -
    - )} - renderItem={props => ( - - )} - /> + request_var} + render={props => ( +
      + {props.children} +
    + )} + renderItem={props => ( + + )} + /> +
    +
    - -
    + ); } } diff --git a/packages/venia-concept/src/components/Main/main.css b/packages/venia-concept/src/components/Main/main.css index cbe3a1d272..3b91ade884 100755 --- a/packages/venia-concept/src/components/Main/main.css +++ b/packages/venia-concept/src/components/Main/main.css @@ -2,6 +2,7 @@ background-color: white; color: rgb(var(--venia-text)); position: relative; + z-index: 1; } .root_masked { diff --git a/packages/venia-concept/src/components/Mask/mask.css b/packages/venia-concept/src/components/Mask/mask.css index 6616b5d8de..746c338eae 100644 --- a/packages/venia-concept/src/components/Mask/mask.css +++ b/packages/venia-concept/src/components/Mask/mask.css @@ -12,7 +12,7 @@ transition-timing-function: linear; visibility: hidden; width: 100vw; - z-index: 10; + z-index: 2; -webkit-appearance: none; } diff --git a/packages/venia-concept/src/components/MiniCart/mask.css b/packages/venia-concept/src/components/MiniCart/mask.css index c2fab24975..2868d30514 100644 --- a/packages/venia-concept/src/components/MiniCart/mask.css +++ b/packages/venia-concept/src/components/MiniCart/mask.css @@ -1,5 +1,4 @@ .root_active { composes: root_active from '../Mask/mask.css'; opacity: 0.25; - z-index: 1; } diff --git a/packages/venia-concept/src/components/MiniCart/miniCart.css b/packages/venia-concept/src/components/MiniCart/miniCart.css index 88e0fbe302..47a0aaefdb 100644 --- a/packages/venia-concept/src/components/MiniCart/miniCart.css +++ b/packages/venia-concept/src/components/MiniCart/miniCart.css @@ -21,7 +21,7 @@ visibility: hidden; width: 100%; max-width: 360px; - z-index: 10; + z-index: var(--base-z-index); } /* state: open */ diff --git a/packages/venia-concept/src/components/Modal/index.js b/packages/venia-concept/src/components/Modal/index.js new file mode 100644 index 0000000000..b04ab42f99 --- /dev/null +++ b/packages/venia-concept/src/components/Modal/index.js @@ -0,0 +1 @@ +export { default as Modal } from './modal'; diff --git a/packages/venia-concept/src/components/Modal/modal.js b/packages/venia-concept/src/components/Modal/modal.js new file mode 100644 index 0000000000..b30588205f --- /dev/null +++ b/packages/venia-concept/src/components/Modal/modal.js @@ -0,0 +1,5 @@ +import { createPortal } from 'react-dom'; + +const Modal = ({ children }) => createPortal(children, document.body); + +export default Modal; diff --git a/packages/venia-concept/src/components/Navigation/navigation.css b/packages/venia-concept/src/components/Navigation/navigation.css index c08656d2e0..64502b0cf0 100644 --- a/packages/venia-concept/src/components/Navigation/navigation.css +++ b/packages/venia-concept/src/components/Navigation/navigation.css @@ -14,7 +14,7 @@ visibility: hidden; width: 100%; max-width: 360px; - z-index: 10; + z-index: 3; } .header { From c3d4b92240eff890cc79f41c814fa30a53c7f2c3 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 2 May 2019 16:59:19 +0200 Subject: [PATCH 67/91] Replace div element with more appropriate aside element for modal --- .../venia-concept/src/components/FilterModal/filterModal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.js b/packages/venia-concept/src/components/FilterModal/filterModal.js index f3bf88a988..e21418e569 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.js +++ b/packages/venia-concept/src/components/FilterModal/filterModal.js @@ -40,7 +40,7 @@ class FilterModal extends Component { return ( -
    + ); } From c95df08867803a2df01f15771005767324f5b406 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Thu, 2 May 2019 17:00:36 +0200 Subject: [PATCH 68/91] Move Portal to root div --- packages/venia-concept/src/components/Modal/modal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/venia-concept/src/components/Modal/modal.js b/packages/venia-concept/src/components/Modal/modal.js index b30588205f..0c26daa47a 100644 --- a/packages/venia-concept/src/components/Modal/modal.js +++ b/packages/venia-concept/src/components/Modal/modal.js @@ -1,5 +1,6 @@ import { createPortal } from 'react-dom'; -const Modal = ({ children }) => createPortal(children, document.body); +const Modal = ({ children }) => + createPortal(children, document.getElementById('root')); export default Modal; From c0dc68dad648bd2a8d929f7ad36599ac21ec1e38 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 3 May 2019 11:32:50 +0200 Subject: [PATCH 69/91] Added focus shifting --- .../Category/categoryContent.js | 22 ++++++++++++++++--- .../src/components/FilterModal/filterModal.js | 4 ++-- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index e8c0e3d182..768c405132 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -19,8 +19,22 @@ class CategoryContent extends Component { }) }; + constructor(props) { + super(props); + this.modal = React.createRef(); + } + + handleOpenDrawer = e => { + e.preventDefault(); + this.props.openDrawer(); + /* For some reason, modal will not get focused without the timeout + * even when using preventDefault() + */ + setTimeout(() => this.modal.current.focus(), 200); + }; + render() { - const { classes, pageControl, data, pageSize, openDrawer } = this.props; + const { classes, pageControl, data, pageSize } = this.props; const items = data ? data.products.items : null; const filters = data ? data.products.filters : null; @@ -40,7 +54,7 @@ class CategoryContent extends Component { {filters && (
    From c13975bdc3d5c24434443c20c4814128a2b41b2b Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Fri, 3 May 2019 15:42:11 +0200 Subject: [PATCH 70/91] Revert focus fix --- .../Category/categoryContent.js | 22 +++---------------- .../src/components/FilterModal/filterModal.js | 4 ++-- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index 768c405132..e8c0e3d182 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -19,22 +19,8 @@ class CategoryContent extends Component { }) }; - constructor(props) { - super(props); - this.modal = React.createRef(); - } - - handleOpenDrawer = e => { - e.preventDefault(); - this.props.openDrawer(); - /* For some reason, modal will not get focused without the timeout - * even when using preventDefault() - */ - setTimeout(() => this.modal.current.focus(), 200); - }; - render() { - const { classes, pageControl, data, pageSize } = this.props; + const { classes, pageControl, data, pageSize, openDrawer } = this.props; const items = data ? data.products.items : null; const filters = data ? data.products.filters : null; @@ -54,7 +40,7 @@ class CategoryContent extends Component { {filters && (
    From 1f5da7cb63021b7bb44f7d3196e61d221e9d13c3 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 6 May 2019 17:12:03 +0200 Subject: [PATCH 71/91] Add filers to search results page and style them --- .../src/RootComponents/Search/container.js | 8 +++++-- .../src/RootComponents/Search/search.css | 21 +++++++++++++++++++ .../src/RootComponents/Search/search.js | 19 +++++++++++++++-- 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Search/container.js b/packages/venia-concept/src/RootComponents/Search/container.js index 15f3545d95..7fe2db57f9 100644 --- a/packages/venia-concept/src/RootComponents/Search/container.js +++ b/packages/venia-concept/src/RootComponents/Search/container.js @@ -1,5 +1,5 @@ import { connect } from 'src/drivers'; - +import { toggleDrawer } from 'src/actions/app'; import Search from './search'; import { executeSearch, toggleSearch } from 'src/actions/app'; @@ -9,7 +9,11 @@ const mapStateToProps = ({ app }) => { return { searchOpen }; }; -const mapDispatchToProps = { executeSearch, toggleSearch }; +const mapDispatchToProps = dispatch => ({ + openDrawer: () => dispatch(toggleDrawer('filter')), + executeSearch: () => dispatch(executeSearch()), + toggleSearch: () => dispatch(toggleSearch()) +}); export default connect( mapStateToProps, diff --git a/packages/venia-concept/src/RootComponents/Search/search.css b/packages/venia-concept/src/RootComponents/Search/search.css index 86e0643f53..ab335cfb51 100644 --- a/packages/venia-concept/src/RootComponents/Search/search.css +++ b/packages/venia-concept/src/RootComponents/Search/search.css @@ -4,6 +4,7 @@ .categoryTop { display: flex; + flex-wrap: wrap; padding: 0 0 1rem 0; color: rgb(var(--venia-text-alt)); justify-content: center; @@ -30,3 +31,23 @@ .noResult { display: flex; } + +.headerButtons { + display: flex; + justify-content: center; + flex-basis: 100%; + padding-top: 0.5rem; +} + +.filterButton { + width: 9rem; + height: 3rem; + border: 1px solid rgb(var(--venia-teal)); + border-radius: 100px; + background-color: white; + font-size: 14px; + font-weight: 600; + line-height: 14px; + color: rgb(var(--venia-teal)); + outline: none; +} diff --git a/packages/venia-concept/src/RootComponents/Search/search.js b/packages/venia-concept/src/RootComponents/Search/search.js index c0b42e5305..0fe841ede4 100644 --- a/packages/venia-concept/src/RootComponents/Search/search.js +++ b/packages/venia-concept/src/RootComponents/Search/search.js @@ -8,6 +8,7 @@ import classify from 'src/classify'; import Icon from 'src/components/Icon'; import getQueryParameterValue from 'src/util/getQueryParameterValue'; import CloseIcon from 'react-feather/dist/icons/x'; +import FilterModal from 'src/components/FilterModal'; import { loadingIndicator } from 'src/components/LoadingIndicator'; import defaultClasses from './search.css'; import PRODUCT_SEARCH from '../../queries/productSearch.graphql'; @@ -115,6 +116,8 @@ export class Search extends Component { {({ loading, error, data }) => { if (error) return
    Data Fetch Error
    ; if (loading) return loadingIndicator; + const { products } = data; + const { filters, total_count, items } = products; if (data.products.items.length === 0) return ( @@ -127,13 +130,25 @@ export class Search extends Component {
    - {data.products.total_count} items{' '} + {total_count} items{' '}
    {categoryId && getCategoryName(categoryId, classes)} + {filters && ( +
    + +
    + )}
    + + {filters && }
    - +
    ); From c0bef34e325b7e5e14594b9db8e97a7f2bd8dd55 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 6 May 2019 17:20:46 +0200 Subject: [PATCH 72/91] Filter modal CSS adjusments - positioning and transition --- .../FilterModal/FilterFooter/filterFooter.css | 1 - .../src/components/FilterModal/filterModal.css | 11 +++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.css b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.css index 97bfede436..0d706a1e83 100644 --- a/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.css +++ b/packages/venia-concept/src/components/FilterModal/FilterFooter/filterFooter.css @@ -8,7 +8,6 @@ bottom: 0; padding: 1.5rem; border-top: 2px solid rgb(var(--venia-border)); - max-width: 640px; } .footerButton { diff --git a/packages/venia-concept/src/components/FilterModal/filterModal.css b/packages/venia-concept/src/components/FilterModal/filterModal.css index dd76c4d8a3..d991461be7 100644 --- a/packages/venia-concept/src/components/FilterModal/filterModal.css +++ b/packages/venia-concept/src/components/FilterModal/filterModal.css @@ -1,12 +1,10 @@ .root { position: fixed; left: 0; - top: 0; - right: 0; bottom: 0; + right: 0; background-color: white; - max-width: 640px; - transform: translate3d(-100%, 0, 0); + transform: translate3d(0, 100%, 0); transition-duration: 192ms; transition-timing-function: var(--venia-anim-out); transition-property: opacity, transform, visibility; @@ -17,6 +15,7 @@ z-index: 3; display: grid; grid-template-rows: min-content 1fr; + max-height: 100%; } .rootOpen { @@ -31,13 +30,13 @@ .modalWrapper { overflow: auto; - height: 100vh; + max-height: 100vh; } .header { display: flex; justify-content: space-between; - padding: 0.5rem 1.5rem; + padding: 1.5rem 1.5rem 0.5rem; } .headerTitle { From f30bc579ab3033d6815e62af95027aea8530b3bd Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 6 May 2019 17:39:27 +0200 Subject: [PATCH 73/91] Style guide & CSS update --- .../src/RootComponents/Category/category.css | 12 +++++------ .../Category/categoryContent.js | 20 +++++++++---------- .../src/RootComponents/Search/search.css | 12 +++++------ 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Category/category.css b/packages/venia-concept/src/RootComponents/Category/category.css index 5c7b0aea99..7ec39cb22f 100644 --- a/packages/venia-concept/src/RootComponents/Category/category.css +++ b/packages/venia-concept/src/RootComponents/Category/category.css @@ -24,15 +24,13 @@ } .filterButton { + padding: 0.5rem; + margin-left: 0.5rem; + margin-right: 0.5rem; width: 9rem; - height: 3rem; - border: 1px solid rgb(var(--venia-teal)); + border: 1px solid black; border-radius: 100px; - background-color: white; - font-size: 14px; - font-weight: 600; - line-height: 14px; - color: rgb(var(--venia-teal)); + color: black; outline: none; } diff --git a/packages/venia-concept/src/RootComponents/Category/categoryContent.js b/packages/venia-concept/src/RootComponents/Category/categoryContent.js index e8c0e3d182..d558ac44a5 100644 --- a/packages/venia-concept/src/RootComponents/Category/categoryContent.js +++ b/packages/venia-concept/src/RootComponents/Category/categoryContent.js @@ -37,17 +37,17 @@ class CategoryContent extends Component { }} />
    {categoryTitle}
    - {filters && ( -
    - -
    - )} + {filters && ( +
    + +
    + )}
    diff --git a/packages/venia-concept/src/RootComponents/Search/search.css b/packages/venia-concept/src/RootComponents/Search/search.css index ab335cfb51..18544b281d 100644 --- a/packages/venia-concept/src/RootComponents/Search/search.css +++ b/packages/venia-concept/src/RootComponents/Search/search.css @@ -40,14 +40,12 @@ } .filterButton { + padding: 0.5rem; + margin-left: 0.5rem; + margin-right: 0.5rem; width: 9rem; - height: 3rem; - border: 1px solid rgb(var(--venia-teal)); + border: 1px solid black; border-radius: 100px; - background-color: white; - font-size: 14px; - font-weight: 600; - line-height: 14px; - color: rgb(var(--venia-teal)); + color: black; outline: none; } From 2027e4acedd3af6b2acb229bcf9d7ab2bfaf6913 Mon Sep 17 00:00:00 2001 From: Adrian Bece Date: Mon, 6 May 2019 17:44:18 +0200 Subject: [PATCH 74/91] Proptype updates & code cleanup --- packages/venia-concept/src/RootComponents/Search/search.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/venia-concept/src/RootComponents/Search/search.js b/packages/venia-concept/src/RootComponents/Search/search.js index 0fe841ede4..714d8e2c26 100644 --- a/packages/venia-concept/src/RootComponents/Search/search.js +++ b/packages/venia-concept/src/RootComponents/Search/search.js @@ -28,6 +28,7 @@ export class Search extends Component { root: string, totalPages: string }), + openDrawer: func.isRequired, executeSearch: func.isRequired, history: object, location: object.isRequired, @@ -91,7 +92,7 @@ export class Search extends Component { }; render() { - const { classes, location } = this.props; + const { classes, location, openDrawer } = this.props; const { getCategoryName } = this; const inputText = getQueryParameterValue({ @@ -137,7 +138,7 @@ export class Search extends Component { {filters && (