Recommendations: Products per row based on recommendation widgets

// some code

const countProductsToShow = (width, config) => {
  // array of recommendations we want to change
  const recsList = ['product-findify-rec-1', 'category-findify-rec-1'];
  // current widget name
  const recWidget = config.get('slot');

  // check if current recommendation is present in our array
  const findCurrentWidgetInRecsList = recsList.find(rec => rec == recWidget);

  // render rows based on the widget name
  if (findCurrentWidgetInRecsList) {
    if (width > 50) return 3;
  } else {
    if (width > 900) return 5;
    if (width > 700) return 4;
    if (width > 500) return 3;
    if (width > 300) return 2;
    return 2;
  }
};

export default compose(
  // some code

  withPropsOnChange(['config', 'size'], ({ config, size, scrollToFirst, scrollToLast }) => ({
    sliderOptions: {
      swipeToSlide: true,
      infinite: false,
      slidesToScroll: 1,
      arrows: true,
      // pass config to the function
      slidesToShow: countProductsToShow(size.width, config),
      nextArrow: renderArrow('right' , scrollToFirst),
      prevArrow: renderArrow('left', scrollToLast),
      ...config.get('sliderOptions'),
    }
  })),
)(view);

// some code

// import this
import { withHandlers } from 'recompose';

// create enhancer
const enhancer = withHandlers({
  customColumns: ({ config }) => () => {
      const width = window.innerWidth;
      // array of recommendations we want to change
      const recsList = ['product-findify-rec-1', 'category-findify-rec-1'];
      // current widget name
      const recWidget = config.get('slot');

      // check if current recommendation is present in our array
      const findCurrentWidgetInRecsList = recsList.find(rec => rec == recWidget);

      // render rows based on the widget name
      if (findCurrentWidgetInRecsList) {
        if (width > 50) return '4';
      } else {
        if (width > 900) return '3';
        if (width > 300) return '6';
        return '2';
      }
    }
})

// don't forget to add 'customColumns'
const GridRecommendationLayout = ({ items, config, theme, customColumns }: IGridProps) =>
<React.Fragment display-if={items && items.size > 0}>
  <Text primary lowercase>{ config.get('title') }</Text>
{/* replace columns to use our handler */}
  <Grid columns={customColumns()}>
    {
      MapArray({
        config,
        array: items,
        factory: Product
      })
    }
  </Grid>
</React.Fragment>

export default enhancer(GridRecommendationLayout); // add enhancer