Feature/show more button (#40)

* Splitting SearchResult using the Container/Component strategie

* Split the search into diferente components using render functions

* Implement ShowMore loader on search result

* refact with extension points

* Fix extension points

* fix pages

* Finish component refact

* Add the possibility to hide the search-result facets

* Place PropTypes inside schemaPropsTypes

* Revert multiline JSX brackets

* Release v1.1.2

* Refact schema

* Added custom way to hide specification filter

* Fix PropTypes

* Added PropTypes documentation

* Udate to use range slider from styleguide

* Update slider props

* Add page padding

* Release v1.2.0

* Update CHANGELOG

* Release v1.3.0

* Fix incorrect specification filter being removed

* Update changelog

* please work

* Rename filter argument

* Splitting SearchResult using the Container/Component strategie

* Split the search into diferente components using render functions

* Implement ShowMore loader on search result

* Release v1.3.1

* Finish merge

* finish rebase

* Fix spinner, proptypes

* Fix pr requests

* Splitting SearchResult using the Container/Component strategie

* Split the search into diferente components using render functions

* Implement ShowMore loader on search result

* Add the possibility to hide the search-result facets

* Udate to use range slider from styleguide

* Update slider props

* Release v1.1.2

* Added custom way to hide specification filter

* Fix incorrect specification filter being removed

* please work

* Fix spinner, proptypes

* Fix pr requests

* Fix rebase issues

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]
+### Added
+- ShowMore loading option
 
 ## [1.3.1] - 2018-09-14
 ### Fixed

manifest.json

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

pages/pages.json

@@ -1,12 +1,7 @@
 {
-  "pages": {
-    "search-result": {
-      "path": "/_v/search-result"
-    }
-  },
   "extensions": {
     "search-result": {
-      "component": "SearchResult"
+      "component": "index"
     }
   }
-}
+}

react/components/FiltersContainer.js

@@ -145,17 +145,17 @@ export default class FiltersContainer extends Component {
 
     const categories = this.availableCategories
     const hiddenFacetsNames = (
-        path(['specificationFilters', 'hiddenFilters'], hiddenFacets) || []
-      ).map(filter => filter.name)
+      path(['specificationFilters', 'hiddenFilters'], hiddenFacets) || []
+    ).map(filter => filter.name)
 
     const mappedSpecificationFilters = !path(['specificationFilters', 'hideAll'], hiddenFacets)
       ? specificationFilters.filter(
-          spec => !contains(spec.name, hiddenFacetsNames)
-        ).map(spec => ({
-          type: SPECIFICATION_FILTERS_TYPE,
-          title: spec.name,
-          options: spec.facets,
-        }))
+        spec => !contains(spec.name, hiddenFacetsNames)
+      ).map(spec => ({
+        type: SPECIFICATION_FILTERS_TYPE,
+        title: spec.name,
+        options: spec.facets,
+      }))
       : []
 
     const filters = [

react/components/SearchResult.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import { Spinner } from 'vtex.styleguide'
+import { ExtensionPoint } from 'render'
+import { FormattedMessage } from 'react-intl'
+
+import FiltersContainer from './FiltersContainer'
+import { searchResultPropTypes } from '../constants/propTypes'
+import OrderBy from './OrderBy'
+import Gallery from './Gallery'
+
+/**
+ * Search Result Component.
+ */
+export default class SearchResult extends Component {
+  render() {
+    const {
+      children, recordsFiltered, breadcrumbsProps,
+      brands, getLinkProps, map, params, priceRange,
+      priceRanges, rest, specificationFilters, tree,
+      loading, fetchMoreLoading, products, summary,
+      orderBy, hiddenFacets
+    } = this.props
+
+    return (
+      <div className="vtex-search-result vtex-search-result--show-more pv5 ph9-l ph7-m ph5-s">
+        <div className="vtex-search-result__breadcrumb">
+          <ExtensionPoint id="breadcrumb" {...breadcrumbsProps} />
+        </div>
+        <div className="vtex-search-result__total-products">
+          <FormattedMessage
+            id="search.total-products"
+            values={{ recordsFiltered }}
+          >
+            {txt => <span className="ph4 black-50">{txt}</span>}
+          </FormattedMessage>
+        </div>
+        <div className="vtex-search-result__filters">
+          <FiltersContainer
+            brands={brands}
+            getLinkProps={getLinkProps}
+            map={map}
+            params={params}
+            priceRange={priceRange}
+            priceRanges={priceRanges}
+            rest={rest}
+            specificationFilters={specificationFilters}
+            tree={tree}
+            hiddenFacets={hiddenFacets}
+            loading={loading && !fetchMoreLoading}
+          />
+        </div>
+        <div className="vtex-search-result__border" />
+        <div className="vtex-search-result__order-by">
+          <OrderBy
+            orderBy={orderBy}
+            getLinkProps={getLinkProps}
+          />
+        </div>
+        <div className="vtex-search-result__gallery">
+          {loading && !fetchMoreLoading ? (
+            <div className="w-100 flex justify-center">
+              <div className="w3 ma0">
+                <Spinner />
+              </div>
+            </div>
+          ) : (
+              <Gallery
+                products={products}
+                summary={summary}
+              />
+            )}
+          {children}
+        </div>
+      </div>
+    )
+  }
+}
+
+SearchResult.propTypes = searchResultPropTypes