Dynamically change the number of returned results

📘
Components:

layouts/Search/view.tsx

any other component connected by @findify/react-connect

In this example, we will create a button, that, when you click on it, will change the number of the returned results. Say, by default your search page displays 10 results. When you click on the button of the following example, it will render 10 more results.

This can be done with the update function, which is available in every component that is connected via @findify/react-connect. You can find more about connectors in our documentation or the GitHub repository.

layouts/Search/view.tsx is already connected by @findify/react-connect in the layouts/Search/index.tsx file. So all we have to do is adjust our view as follows:

/**
 * @module layouts/Search
 */
import cx from 'classnames'
import React from 'react';
import Grid from 'components/common/Grid';
import StaticResults from 'components/search/StaticResults';
import LazyResults from 'components/search/LazyResults';
import DesktopFacets from 'components/search/DesktopFacets';
import MobileActions from 'components/search/MobileActions';
import DesktopActions from 'components/search/DesktopActions';
import Branch from 'components/common/Branch';
import Banner from 'components/Banner';
import { List } from 'immutable'
import { MJSConfiguration, ThemedSFCProps, IProduct } from 'types';
import { withHandlers } from 'recompose';
  
/** Props that search layout accepts */
export interface ISearchProps extends ThemedSFCProps {
  /** MJS Configuration */
  config: MJSConfiguration;
  /** Flag that switches Search to mobile layout */
  isMobile?: boolean;
  /** Flag to turn on Smart Collection display mode */
  isCollection?: boolean;
  /** Flag to render mobile facets */
  mobileFacetsOpened?: boolean;
  /** Flag to show filters on the right side of desktop search */
  filtersOnRight?: boolean;
  /** Items list */
  items: List<IProduct>;
}

// create an enhancer that will update the limit 
// Note: (meta.get('limit') is a number you can preset in your dashboard under Setup > Advanced Setup > Search Results > Number of results to display per page (Desktop)
const enhancer = withHandlers({
  onChangeLimit: ({ update, meta }) => () => {
    update('limit', meta.get('limit') + 10)
  }
})

const SearchLayout = ({
  config,
  meta,
  isMobile,
  isCollection,
  mobileFacetsOpened,
  filtersOnRight,
  theme,
  items,
  
  onChangeLimit // add the function here to make it available to the button
}) =>
  <div className={theme.root}>
    // add the button
    <button className='YOUR_CSS_CLASS' onClick={onChangeLimit}>
    	Change number of results  
    </button>
    <DesktopFacets display-if={!isMobile && !filtersOnRight} />
    <div className={theme.content}>
      <Branch
        isCollection={isCollection}
        condition={isMobile}
        left={MobileActions}
        right={DesktopActions} />
      <Banner />
      <Branch left={LazyResults} right={StaticResults} condition={config.getIn(['view', 'infinite'])} />
    </div>
    <DesktopFacets display-if={!isMobile && filtersOnRight} />
  </div>

// add enhancer here as well
export default enhancer(SearchLayout);

Updated almost 5 years ago

📘Components:

📘
Components: