Lift state manipulation up

vtex-apps · May 25, 2019 · c5b6cb8 · c5b6cb8
1 parent 84856c4
commit c5b6cb8
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 44 deletions.
diff --git a/react/Shelf.js b/react/Shelf.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { path } from 'ramda'
+import { path, identity } from 'ramda'
 import React, { Component, useMemo, useEffect } from 'react'
 import { graphql } from 'react-apollo'
 import { withRuntimeContext, Loading, useRuntime } from 'vtex.render-runtime'
@@ -15,7 +15,7 @@ import productsQuery from './queries/productsQuery.gql'
 import ShelfContent from './components/ShelfContent'
 
 import shelf from './components/shelf.css'
-import normalizeProduct from './utils/normalizeProduct'
+import { normalizeProduct, normalizeBuyable } from './utils/normalize'
 
 const useProductImpression = (products) => {
   const { push } = usePixel()
@@ -32,7 +32,7 @@ const useProductImpression = (products) => {
         event: 'productImpression',
         list: 'Shelf',
         position: index + 1,
-        product,
+        product: normalizedProduct,
       })
     });
   }, [push, products])
@@ -45,14 +45,18 @@ const Shelf = ({ data, productList = ProductList.defaultProps }) => {
   const { hints: { mobile }} = useRuntime()
   const { loading, error, products } = data || {}
 
+
+  const filteredProducts =
+    products && products.map(normalizeBuyable).filter(identity)
+
   const productListProps = useMemo(() => ({
-    products,
+    products: filteredProducts,
     loading: loading,
     isMobile: mobile,
     ...productList,
-  }), [products, loading, mobile, productList])
+  }), [filteredProducts, loading, mobile, productList])
 
-  useProductImpression(products)
+  useProductImpression(filteredProducts)
 
   if (loading) {
     return <Loading />

diff --git a/react/components/ProductList.js b/react/components/ProductList.js
@@ -17,38 +17,11 @@ import shelf from './shelf.css'
 const DEFAULT_MAX_ITEMS = 10
 const DEFAULT_ITEMS_PER_PAGE = 5
 
-function normalizeBuyable(product) {
-  const items = path(['items'], product)
-  const buyableItems =
-    path(['length'], items) &&
-    items
-      .map(item => ({
-        ...item,
-        sellers: getBuyableSellers(item.sellers),
-      }))
-      .filter(item => path(['sellers', 'length'], item))
-
-  return buyableItems
-    ? {
-        ...product,
-        items: buyableItems,
-      }
-    : null
-}
-
-function getBuyableSellers(sellers) {
-  return (
-    path(['length'], sellers) &&
-    sellers.filter(seller => path(['sellerId'], seller))
-  )
-}
-
 /**
  * Product List Component. Shows a collection of products.
  */
 const ProductList = ({
   products,
-  maxItems,
   titleText,
   arrows,
   scroll,
@@ -58,9 +31,6 @@ const ProductList = ({
   gap,
   showTitle,
 }) => {
-  const filteredProducts =
-    products && products.map(normalizeBuyable).filter(identity)
-
   return products && !products.length ? null : (
     <Fragment>
       {showTitle && (
@@ -75,8 +45,7 @@ const ProductList = ({
       <ReactResizeDetector handleWidth>
         {width => (
           <ShelfContent
-            products={filteredProducts}
-            maxItems={maxItems}
+            products={products}
             arrows={arrows}
             scroll={scroll}
             itemsPerPage={itemsPerPage}

diff --git a/react/components/ShelfContent.js b/react/components/ShelfContent.js
@@ -117,7 +117,7 @@ class ShelfContent extends Component {
             loop
             easing="ease"
           >
-            {productList.slice(0, maxItems).map((item, index) => (
+            {productList.map((item, index) => (
               <Slide
                 sliderTransitionDuration={500}
                 className={classNames('justify-center h-100', gap)}
@@ -134,7 +134,7 @@ class ShelfContent extends Component {
               showDotsPerPage={isScrollByPage}
               perPage={this.perPage}
               currentSlide={currentSlide}
-              totalSlides={productList.slice(0, maxItems).length}
+              totalSlides={productList.length}
               onChangeSlide={this.handleChangeSlide}
               classes={{
                 root: 'pt4',
@@ -159,8 +159,6 @@ ShelfContent.propTypes = {
   products: PropTypes.arrayOf(shelfItemPropTypes.item),
   /** Max Items per page */
   itemsPerPage: PropTypes.number.isRequired,
-  /** Max items in shelf */
-  maxItems: PropTypes.number.isRequired,
   /** Show Arrows */
   arrows: PropTypes.bool.isRequired,
   /** Scroll type */

diff --git a/react/components/ShelfItem.js b/react/components/ShelfItem.js
@@ -5,7 +5,7 @@ import { ExtensionPoint } from 'vtex.render-runtime'
 import { usePixel } from 'vtex.pixel-manager/PixelContext'
 
 import { shelfItemPropTypes } from '../utils/propTypes'
-import normalizeProduct from '../utils/normalizeProduct'
+import { normalizeProduct } from '../utils/normalize'
 
 /**
  * ShelfItem Component. Normalizes the item received in the props

diff --git a/react/utils/normalizeProduct.js → react/utils/normalize.js b/react/utils/normalizeProduct.js → react/utils/normalize.js
@@ -1,7 +1,7 @@
 import { path } from 'ramda'
 import { changeImageUrlSize, toHttps } from './urlHelpers'
 
-export default function normalizeProduct(product) {
+export function normalizeProduct(product) {
   if (!product) return null
   const normalizedProduct = { ...product }
   const items = normalizedProduct.items || []
@@ -28,3 +28,25 @@ function findAvailableProduct(item) {
     ({ commertialOffer = {} }) => commertialOffer.AvailableQuantity > 0
   )
 }
+
+export function normalizeBuyable(product) {
+  if (!product || !product.items || product.items.length === 0) {
+    return product
+  }
+
+  const buyableItems = product.items.map(item => ({
+      ...item,
+      sellers: getBuyableSellers(item.sellers),
+    }))
+    .filter(item => item && item.sellers && item.sellers.length > 0)
+
+  return buyableItems
+    ? { ...product, items: buyableItems }
+    : null
+}
+
+function getBuyableSellers(sellers) {
+  return sellers && sellers.length > 0
+    ? sellers.filter(seller => seller.sellerId)
+    : sellers
+}