From 09ccde71ccc488f89a072e9deb36da8c9d03e273 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Fri, 28 Sep 2018 09:04:12 -0300
Subject: [PATCH] Fix breadcrumb being shown on mobile (#45)

* Fix breadcrumb being shown on mobile

* Remove content loader of filters on mobile

* Change from db-m to db-ns

* Get mobile flag from runtime context

* Fix tests
---
 CHANGELOG.md                                        |  5 +++++
 react/__tests__/components/FiltersContainer.test.js |  3 +++
 react/components/FiltersContainer.js                | 13 ++++++++-----
 react/components/SearchResult.js                    |  2 +-
 react/global.css                                    |  4 ----
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6dd276f80..71342135f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ 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]
+### Fixed
+- Fix breadcrumb being shown on mobile.
+
+### Removed
+- Content loader of filters on mobile.
 
 ## [1.5.1] - 2018-09-20
 ### Fixed
diff --git a/react/__tests__/components/FiltersContainer.test.js b/react/__tests__/components/FiltersContainer.test.js
index 90552ef87..5930c901c 100644
--- a/react/__tests__/components/FiltersContainer.test.js
+++ b/react/__tests__/components/FiltersContainer.test.js
@@ -20,6 +20,7 @@ describe('<FiltersContainer />', () => {
         params={{
           department: 'Eletronicos',
         }}
+        runtime={{ hints: { mobile: false } }}
       />
     )
 
@@ -73,6 +74,7 @@ describe('<FiltersContainer />', () => {
         params={{
           department: 'Livros',
         }}
+        runtime={{ hints: { mobile: false } }}
       />
     )
 
@@ -133,6 +135,7 @@ describe('<FiltersContainer />', () => {
         params={{
           department: 'livros',
         }}
+        runtime={{ hints: { mobile: false } }}
       />
     )
 
diff --git a/react/components/FiltersContainer.js b/react/components/FiltersContainer.js
index 81136aa85..c7762d681 100644
--- a/react/components/FiltersContainer.js
+++ b/react/components/FiltersContainer.js
@@ -1,8 +1,8 @@
-/* global __RUNTIME__ */
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 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'
@@ -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
  */
-export default class FiltersContainer extends Component {
+class FiltersContainer extends Component {
   static propTypes = {
     /** Get the props to pass to render's Link */
     getLinkProps: PropTypes.func.isRequired,
@@ -54,7 +54,7 @@ export default class FiltersContainer extends Component {
     rest: PropTypes.string.isRequired,
     /** Loading indicator */
     loading: PropTypes.bool,
-    ...hiddenFacetsSchema
+    ...hiddenFacetsSchema,
   }
 
   static defaultProps = {
@@ -121,9 +121,10 @@ export default class FiltersContainer extends Component {
       getLinkProps,
       loading,
       hiddenFacets,
+      runtime: { hints: { mobile } },
     } = this.props
 
-    if (loading) {
+    if (loading && !mobile) {
       return (
         <ContentLoader
           style={{
@@ -178,7 +179,7 @@ export default class FiltersContainer extends Component {
       },
     ].filter(identity)
 
-    if (__RUNTIME__.hints.mobile) {
+    if (mobile) {
       return (
         <AccordionFilterContainer
           filters={filters}
@@ -206,3 +207,5 @@ export default class FiltersContainer extends Component {
     )
   }
 }
+
+export default withRuntimeContext(FiltersContainer)
diff --git a/react/components/SearchResult.js b/react/components/SearchResult.js
index 4d3705dca..76b7109c2 100644
--- a/react/components/SearchResult.js
+++ b/react/components/SearchResult.js
@@ -38,7 +38,7 @@ export default class SearchResult extends Component {
 
     return (
       <div className="vtex-search-result vtex-page-padding pv5 ph9-l ph7-m ph5-s">
-        <div className="vtex-search-result__breadcrumb">
+        <div className="vtex-search-result__breadcrumb db-ns dn-s">
           <ExtensionPoint id="breadcrumb" {...breadcrumbsProps} />
         </div>
         <div className="vtex-search-result__total-products">
diff --git a/react/global.css b/react/global.css
index 90dcb67da..919923502 100644
--- a/react/global.css
+++ b/react/global.css
@@ -151,10 +151,6 @@ body.vtex-filter-popup-open {
       "gallery gallery gallery";
   }
 
-  .vtex-search-result__breadcrumb {
-    justify-self: center;
-  }
-
   .vtex-search-result__total-products {
     justify-self: stretch;
     text-align: center;