product.js

import React, { Component } from 'react'
import Flickity from 'flickity';

import API from '../api/prismic';
import Helper from '../helper';

class Product extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: this.props.id
    }
    this.callPrismic = this.callPrismic.bind(this)
  }
  componentWillMount() {
    this.callPrismic();
  }
  callPrismic() {
    let api = new API();
    let self = this;

    api.query('my.products.uid', this.state.id).then((res) => {
      let results = res.results[0];

      self.setState({
        ingredientMobileImage: results.getImage('products.ingredients-mobile').url,
        ingredientDesktopImage: results.getImage('products.ingredients-desktop').url,
        ingredientsCopy: results.getStructuredText('products.ingredients-copy').asHtml(),
        ingredientsHeader: results.get('products.ingredients-header').asText(),
      })
    })
    
  }


  render() {
    let background = {
      backgroundImage: 'url('+ this.state.ingredientMobileImage +')'
    }
    return (
      <div className='product'>
        <div className='product--content'>

          <div className='product--ingredients'>
            <div className='product--ingredients-header'>
              <h2>{this.state.ingredientsHeader}</h2>
            </div>
            <div className='product--ingredients-image'>
              <div className='product--ingredients-image-s' style={background}>
                <img src={this.state.ingredientMobileImage} />
              </div>
              <div className='product--ingredients-image-d'>
                <img src={this.state.ingredientDesktopImage} />
              </div>
            </div>
            <div className='product--ingredients-copy'>
              <div dangerouslySetInnerHTML={Helper.createMarkup(this.state.ingredientsCopy)}></div>
            </div>
          </div>

        </div>
      </div>
    )
  }
}

export default Product;