Merge pull request #46 from vtex-apps/feat/pages

Add extension point on filter, gallery and product summary

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+- Moved the filter navigator, gallery and product summary to extension points.
 
 ## [1.6.0] - 2018-10-02
 ### Added

manifest.json

@@ -26,8 +26,6 @@
   ],
   "dependencies": {
     "vtex.styleguide": "6.x",
-    "vtex.product-summary": "1.x",
-    "vtex.store-graphql": "2.x",
-    "vtex.breadcrumb": "0.x"
+    "vtex.product-summary": "1.x"
   }
 }

pages/pages.json

@@ -4,4 +4,4 @@
       "component": "index"
     }
   }
-}
+}

react/components/FiltersContainer.js → react/FilterNavigator.js

@@ -4,15 +4,15 @@ import { flatten, path, identity, contains } from 'ramda'
 import ContentLoader from 'react-content-loader'
 import { withRuntimeContext } from 'render'
 
-import SelectedFilters from './SelectedFilters'
-import AvailableFilters from './AvailableFilters'
-import AccordionFilterContainer from './AccordionFilterContainer'
+import SelectedFilters from './components/SelectedFilters'
+import AvailableFilters from './components/AvailableFilters'
+import AccordionFilterContainer from './components/AccordionFilterContainer'
 import {
   formatCategoriesTree,
   mountOptions,
   getMapByType,
-} from '../constants/SearchHelpers'
-import { facetOptionShape, paramShape, hiddenFacetsSchema } from '../constants/propTypes'
+} from './constants/SearchHelpers'
+import { facetOptionShape, paramShape, hiddenFacetsSchema } from './constants/propTypes'
 
 export const CATEGORIES_TYPE = 'Categories'
 export const BRANDS_TYPE = 'Brands'
@@ -27,7 +27,7 @@ const PRICE_RANGES_TITLE = 'search.filter.title.price-ranges'
  * Wrapper around the filters (selected and available) as well
  * as the popup filters that appear on mobile devices
  */
-class FiltersContainer extends Component {
+class FilterNavigator extends Component {
   static propTypes = {
     /** Get the props to pass to render's Link */
     getLinkProps: PropTypes.func.isRequired,
@@ -208,4 +208,4 @@ class FiltersContainer extends Component {
   }
 }
 
-export default withRuntimeContext(FiltersContainer)
+export default withRuntimeContext(FilterNavigator)

react/components/Gallery.js → react/Gallery.js

@@ -2,8 +2,8 @@ import React from 'react'
 import { PropTypes } from 'prop-types'
 import classNames from 'classnames'
 
-import { productShape } from '../constants/propTypes'
-import GalleryItem from './GalleryItem'
+import { productShape } from './constants/propTypes'
+import GalleryItem from './components/GalleryItem'
 
 /**
  * Canonical gallery that displays a list of given products.

react/__tests__/components/FiltersContainer.test.js → react/__tests__/FilterNavigator.test.js

@@ -2,9 +2,9 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
-import FiltersContainer from '../../components/FiltersContainer'
+import FilterNavigator from '../FilterNavigator'
 
-describe('<FiltersContainer />', () => {
+describe('<FilterNavigator />', () => {
   beforeEach(() => {
     global.__RUNTIME__ = {
       hints: { mobile: false },
@@ -13,7 +13,7 @@ describe('<FiltersContainer />', () => {
 
   it('should match snapshot', () => {
     const wrapper = shallow(
-      <FiltersContainer
+      <FilterNavigator
         getLinkProps={jest.fn()}
         map="c"
         rest=""
@@ -66,7 +66,7 @@ describe('<FiltersContainer />', () => {
     ]
 
     const wrapper = shallow(
-      <FiltersContainer
+      <FilterNavigator
         getLinkProps={jest.fn()}
         map="c"
         rest=""
@@ -127,7 +127,7 @@ describe('<FiltersContainer />', () => {
     ]
 
     const wrapper = shallow(
-      <FiltersContainer
+      <FilterNavigator
         getLinkProps={jest.fn()}
         map="c"
         rest=""

react/__tests__/components/__snapshots__/FiltersContainer.test.js.snap → react/__tests__/__snapshots__/FilterNavigator.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FiltersContainer /> should match snapshot 1`] = `
+exports[`<FilterNavigator /> should match snapshot 1`] = `
 <React.Fragment>
   <InjectIntl(SelectedFilters)
     filters={Array []}

react/__tests__/constants/SearchHelpers.test.js

@@ -5,7 +5,7 @@ import {
   BRANDS_TYPE,
   PRICE_RANGES_TYPE,
   SPECIFICATION_FILTERS_TYPE,
-} from '../../components/FiltersContainer'
+} from '../../FilterNavigator'
 
 describe('getSpecificationFilterFromLink', () => {
   it('should return the only specification in link', () => {

react/components/AvailableFilters.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { PRICE_RANGES_TYPE } from './FiltersContainer'
+import { PRICE_RANGES_TYPE } from '../FilterNavigator'
 import { mountOptions } from '../constants/SearchHelpers'
 import SearchFilter from './SearchFilter'
 import PriceRange from './PriceRange'

react/components/GalleryItem.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
+import { ExtensionPoint } from 'render'
 
-import ProductSummary from 'vtex.product-summary/index'
 import { productShape } from '../constants/propTypes'
 import { PropTypes } from 'prop-types'
 
@@ -38,7 +38,8 @@ export default class GalleryItem extends Component {
 
   render() {
     return (
-      <ProductSummary
+      <ExtensionPoint
+        id="product-summary"
         {...this.props.summary}
         product={this.normalizeProductSummary(this.props.item)}
         displayMode={this.props.displayMode}

react/components/SearchResult.js

@@ -4,10 +4,8 @@ import { ExtensionPoint } from 'render'
 import { FormattedMessage } from 'react-intl'
 
 import LayoutModeSwitcher from './LayoutModeSwitcher'
-import FiltersContainer from './FiltersContainer'
 import { searchResultPropTypes } from '../constants/propTypes'
 import OrderBy from './OrderBy'
-import Gallery from './Gallery'
 
 /**
  * Search Result Component.
@@ -63,7 +61,8 @@ export default class SearchResult extends Component {
           </FormattedMessage>
         </div>
         <div className="vtex-search-result__filters">
-          <FiltersContainer
+          <ExtensionPoint
+            id="filter-navigator"
             brands={brands}
             getLinkProps={getLinkProps}
             map={map}
@@ -98,7 +97,8 @@ export default class SearchResult extends Component {
               </div>
             </div>
           ) : (
-            <Gallery
+            <ExtensionPoint
+              id="gallery"
               products={products}
               summary={summary}
               layoutMode={this.state.galleryLayoutMode}

react/constants/SearchHelpers.js

@@ -6,7 +6,7 @@ import {
   BRANDS_TYPE,
   PRICE_RANGES_TYPE,
   SPECIFICATION_FILTERS_TYPE,
-} from '../components/FiltersContainer'
+} from '../FilterNavigator'
 
 /**
  * Returns the parameter name to be used in the map

react/index.js

@@ -147,7 +147,7 @@ export default class SearchResultContainer extends Component {
       params,
       priceRange,
       pagination,
-      hiddenFacets
+      hiddenFacets,
     } = this.props
 
     const breadcrumbsProps = this.breadcrumbsProps
@@ -176,17 +176,17 @@ export default class SearchResultContainer extends Component {
       priceRanges: PriceRanges,
       priceRange: priceRange,
       hiddenFacets,
-      tree: CategoriesTrees
+      tree: CategoriesTrees,
     }
 
     return (
       <PopupProvider>
         {pagination === PAGINATION_TYPES[0] ? (
           <ShowMoreLoaderResult {...props} />
         ) : (
-            <InfiniteScrollLoaderResult {...props} />
-          )}
-      </PopupProvider >
+          <InfiniteScrollLoaderResult {...props} />
+        )}
+      </PopupProvider>
     )
   }
 }
@@ -278,7 +278,7 @@ SearchResultContainer.getSchema = props => {
           'editor.search-result.pagination.show-more',
           'editor.search-result.pagination.infinite-scroll',
         ],
-      }
+      },
     },
   }
 }