Change results layout

/**
 * @module components/search/LazyResults
 */
import React, { Component, createElement } from 'react';
import { is, List, Map } from 'immutable';
import { connectItems } from '@findify/react-connect';
import { compose, withPropsOnChange, setDisplayName, withProps } from 'recompose';
import withTheme from 'helpers/withTheme';
import withLazy from 'helpers/withLazy';
import withColumns from 'helpers/withColumns';
import view from 'components/search/LazyResults/view';
import styles from 'components/search/LazyResults/styles.css';

export default compose(
  setDisplayName('LazyResults'),
  withTheme(styles),
  withProps(({ config }) => ({
    isMobile: window.innerWidth < config.get('mobileBreakpoint')
  })),
	                 
  /* The withColumns mapper should return a divisor of 12,
     and the would be a number of columns present, so if you 
     return 12, then 12/12 = 1 - one column per row, 
     if you return 3, then 12/3 = 4 - four columns per row, etc. 
  */
  withColumns((width, props) => {
    /* Note: that width prop will contain the width of the search results
       container. If you want to use the full width of the screen, 
       then  you would need to use the windows.innerWidth
       
       props - this is an object that contains available components props
       so you can return value based on some prop, like:
       if (props.isMobile) {
       	return 12 // return 1 column for mobile view
       }
    */
    if (width > 1280) return 3; // 4 columns
    if (width > 640) return 4; // 3 columns
    return 6; // 2 columns
  }),
  connectItems,
  withLazy(),
)(view);

/**
 * @module components/search/StaticResults
 */
import React from 'react';
import { compose, setDisplayName, withPropsOnChange, withProps } from 'recompose';
import { connectConfig } from '@findify/react-connect';
import withTheme from 'helpers/withTheme';
import withColumns from 'helpers/withColumns';

import view from 'components/search/StaticResults/view';
import styles from 'components/search/StaticResults/styles.css';

export default compose(
  setDisplayName('StaticResults'),

  withTheme(styles),

  connectConfig,
  
  withProps(({ config }) => ({
    isMobile: window.innerWidth < config.get('mobileBreakpoint')
  })),

  /* The withColumns mapper should return a divisor of 12,
     and the would be a number of columns present, so if you 
     return 12, then 12/12 = 1 - one column per row, 
     if you return 3, then 12/3 = 4 - four columns per row, etc. 
  */
  withColumns((width, props) => {
    /* Note: that width prop will contain the width of the search results
       container. If you want to use the full width of the screen, 
       then  you would need to use the windows.innerWidth
       
       props - this is an object that contains available components props
       so you can return value based on some prop, like:
       if (props.isMobile) {
       	return 12 // return 1 column for mobile view
       }
    */
    if (width > 1280) return 3; // 4 columns
    if (width > 640) return 4; // 3 columns
    return 6; // 2 columns
  }),

)(view);