import React from 'react'
import RestaurantModel from './RestaurantModel'

class Restaurant extends React.Component {
  constructor(props) {
    super(props)
    this.displayName = "Restaurant"
  }

  render() {
    // helper for code simplicity.
    var model = this.props.model

    // Controller calculats food icon for HTML View presentation.
    var foodTypeImage = "";
    if (model.foodType === "Burger") {
      foodTypeImage = "assets/img/Burger.png"
    } else {
      foodTypeImage = "http://placeponi.es/48/48"
    }

    // Prepare rating JSX
    var ratings = [];
    for (var i=0; i < model.rating; i++) {
        ratings.push(<span className="glyphicon glyphicon-star" key={i}/>);
    }

    return (
      <li className="media" onClick={this.props.onClick}>
        <div className="media-left">
          <img className="media-object" src={foodTypeImage} />
        </div>

        <div className={"media-body" + (this.props.selected ? " selected" : "")}>
          <h4 className="media-heading">{model.name}</h4>

          <p>
            Rating: {ratings}
          </p>
        </div>
      </li>
    )
  }
}

Restaurant.propTypes = {
  model: React.PropTypes.instanceOf(RestaurantModel)
}

Restaurant.defaultProps = {
  restaurant : new RestaurantModel("NameOfPlace", "Burger", 2, "Dubnov 7, Tel Aviv-Yafo, Israel")
}

export default Restaurant

import React from 'react'
import RestaurantModel from './RestaurantModel'

class Restaurant extends React.Component {
  constructor(props) {
    super(props)
    this.displayName = "Restaurant"
  }

  render() {
    // helper for code simplicity.
    var model = this.props.model

    // Controller calculats food icon for HTML View presentation.
    var foodTypeImage = "";
    if (model.foodType === "Burger") {
      foodTypeImage = "assets/img/Burger.png"
    } else {
      foodTypeImage = "http://placeponi.es/48/48"
    }

    // Prepare rating JSX
    var ratings = [];
    for (var i=0; i < model.rating; i++) {
        ratings.push(<span className="glyphicon glyphicon-star" key={i}/>);
    }

    return (
      <li className="media" onClick={this.props.onClick}>
        <div className="media-left">
          <img className="media-object" src={foodTypeImage} />
        </div>

        <div className={"media-body" + (this.props.selected ? " selected-restaurant-row" : "")}>
          <h4 className="media-heading">{model.name}</h4>

          <p>
            Rating: {ratings}
          </p>
        </div>
      </li>
    )
  }
}

Restaurant.propTypes = {
  model: React.PropTypes.instanceOf(RestaurantModel)
}

Restaurant.defaultProps = {
  restaurant : new RestaurantModel("NameOfPlace", "Burger", 2, "Dubnov 7, Tel Aviv-Yafo, Israel")
}

export default Restaurant

Use better css selector naming.
Use better css selector naming.

Fixes https://github.com/maximveksler/EatWell/pull/2#discussion_r60944809
