import React, { Component } from 'react';
import { Card } from './components/card.js'
import uuid from 'uuid/v1'
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
    this.state={
      restaurants:
      [ 
      ]
    }
  }

  componentWillMount() {
    this.getData()
  }

  getData() {
    this.setState({
      restaurants:[
        {
          id: uuid(),
          name: "Sushi S",
          details: "2301 Moscrop Street, Burnaby, BC V61 23Y",
          image: "null",
          starsSelected: 0,
        },
        {
          id: uuid(),
          name: "Agra Tandoori",
          details: "1255 Canada Way, Burnaby, BC V61 23Y",
          image: "null",
          starsSelected: 0,
        },
        {
          id: uuid(),
          name: "Bandidas Taqueria",
          details: "2544 Sanders Avenue, Richmond, BC V6Y 0B5",
          image: "null",
          starsSelected: 0,
        },
      ]
    });
  }

  OnChange(id, starsSelected) {
    this.setState(
      [...this.state.restaurants].map((restaurant) => {
        if(restaurant.id === id) {
          restaurant.starsSelected = starsSelected
        }
      })
    );
  }

  render() {
    return (
      <div className="main-body">
        {[...this.state.restaurants].map((restaurant, index) => {
          let name = restaurant.name
          let image = restaurant.image
          let details = restaurant.details
          let starsSelected = restaurant.starsSelected
          let id = restaurant.id
          return(
            <Card
              key={index}
              name={name}
              details={details}
              image={image}
              starsSelected={starsSelected}
              id={id}
              change={(id, starsSelected) => this.OnChange(id, starsSelected)}
             />
          )
        })}      
      </div>
    );
  }
}

export default App;

App.js에서는 Card를 가져옵니다. 식당 데이터는 이 앱의 상태로 모델링됩니다. 'App.js'외부의 파일에 상태를 별도로 저장하면 앱과 음식점 데이터가 증가함에 따라 더 나은 디자인이 됩니다. "render()"함수에서 이 데이터를 "Card"구성 요소에 속성으로 전달합니다.

데이터는 속성으로 하위 구성 요소로 흐르고 별 등급을 업데이트하는 데 사용되는 OnChange 콜백인 콜백을 통해 다시 흐릅니다.

모든 스타일은 App.css 안에 있습니다. 이 앱을 포크하는 데 관심이 있다면 여기에서 찾을 수 있습니다.

이제 http://localhost:3000/으로 이동하면 요금 식당 앱이 표시됩니다.