import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

import Header from 'components/header';
import Intro from 'components/intro';
import AutocompleteSearch from 'components/autocomplete-search';
import ResultCard from 'components/result-card';
import NDCSearchMap from 'components/ndcs-search-map';

import background from 'assets/backgrounds/home_bg_1';
import layout from 'styles/layout.scss';

import styles from './ndc-search-styles.scss';

class SearchPage extends PureComponent {
  render() {
    const { results } = this.props;
    return (
      <div>
        <Header image={background}>
          <div className={layout.content}>
            <div className={styles.headerCols}>
              <Intro title="NDC Content Search" />
              <AutocompleteSearch />
            </div>
          </div>
        </Header>
        <div className={cx(layout.content, styles.contentCols)}>
          <div className="resultsList">
            {results &&
              results.map(result => (
                <ResultCard key={result.iso_code3} result={result} />
              ))}
          </div>
          <NDCSearchMap />
        </div>
      </div>
    );
  }
}

SearchPage.propTypes = {
  query: PropTypes.string, // eslint-disable-line
  results: PropTypes.array, // eslint-disable-line
  onResultClick: PropTypes.func.isRequired // eslint-disable-line
};

SearchPage.defaultProps = {
  countriesOptions: []
};

export default SearchPage;

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Sticky from 'react-stickynode';

import Header from 'components/header';
import Intro from 'components/intro';
import AutocompleteSearch from 'components/autocomplete-search';
import ResultCard from 'components/result-card';
import NDCSearchMap from 'components/ndcs-search-map';

import background from 'assets/backgrounds/home_bg_1';
import layout from 'styles/layout.scss';

import styles from './ndc-search-styles.scss';

class SearchPage extends PureComponent {
  render() {
    const { results } = this.props;
    return (
      <div>
        <Header image={background}>
          <div className={layout.content}>
            <div className={styles.headerCols}>
              <Intro title="NDC Content Search" />
              <AutocompleteSearch />
            </div>
          </div>
        </Header>
        <div className={cx(layout.content, styles.contentCols)}>
          <div className="resultsList">
            {results &&
              results.map(result => (
                <ResultCard key={result.iso_code3} result={result} />
              ))}
          </div>
          <Sticky>
            <NDCSearchMap />
          </Sticky>
        </div>
      </div>
    );
  }
}

SearchPage.propTypes = {
  query: PropTypes.string, // eslint-disable-line
  results: PropTypes.array, // eslint-disable-line
  onResultClick: PropTypes.func.isRequired // eslint-disable-line
};

SearchPage.defaultProps = {
  countriesOptions: []
};

export default SearchPage;

Make the search map sticky
Make the search map sticky
