purecomponent.js

pure.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
// styles
import styles from './highlights.scss';

/**
 * Offer component
 * @extends { PureComponent }
 * @class
 */
class Offer extends PureComponent {
  /**
   * @constructor
   * @param {Object} props
   */
  constructor(props) {
    super(props);

    this.image = 'https://s3-sa-east-1.amazonaws.com/chefs-salles/imagens/sem-foto.png';

    this.addDefaultSrc = this.addDefaultSrc.bind(this);
  }

  /**
   * propTypes
   * @property {String} className
   */
  static propTypes = {
    className: PropTypes.string,
  };

  addDefaultSrc(event) {
    event.target.src = this.image;
  }

  /**
   * render
   * @return {ReactElement} markup
   */
  render() {
    const { highlights, className, ...others } = this.props;

    return (
      <section {...others} className={classnames(styles.highlights, className)}>
        {highlights.map(item => (
          <div className={styles['highlights-item']}>
            {item.photos[0] && (
              <figure className={styles['highlights-figure']}>
                <img onError={this.addDefaultSrc} className={styles['highlights-image']} src={item.photos[0].thumb} />
              </figure>
            )}
            {!item.photos[0] && (
              <figure className={styles['highlights-figure']}>
                <img className={styles['highlights-image']} src={this.image} />
              </figure>
            )}
            <div className={styles['highlights-description']}>
              <div className={styles['highlights-description-top']}>
                <div>
                  <h3 className={styles['highlights-name']}>{item.name}</h3>
                  <p className={styles['highlights-neighborhood']}>{item.address.neighbourhood}</p>
                  <p className={styles['highlights-neighborhood']}>{item.main_cuisine}</p>
                </div>
                {item.average_rating > 0 && (
                  <div className={styles.rating}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" width="16">
                      <path
                        fill="#ffbb00"
                        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"
                      />
                    </svg>
                    <span className={styles['rating-number']}>{item.average_rating.toFixed(1)}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
      </section>
    );
  }
}

/**
 * @example <Offer />
 */
export default Offer;