home.js

import React, { Component } from 'react';

import API from '../api/prismic';
import Carousel from '../globals/carousel'

import Helper from '../helper';

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      products: [],
    }
    this.callPrismic = this.callPrismic.bind(this)
    this.renderProducts = this.renderProducts.bind(this)
  }

  componentWillMount() {
    this.callPrismic();
  }

  callPrismic() {
    const api = new API(),
     self = this,
     productArray = window.__PRODUCTS__,
     products = productArray.map(function(a) {return String(a.id)});

    api.query('my.home.uid', 'home').then((res) => {
      const results = res.results[0];

      self.setState({
        heroImage: results.getImage('home.hero-image').url,
        heroCopy: results.getStructuredText('home.hero-text').asHtml(),
        mainCopy: results.getStructuredText('home.chef-copy').asHtml(),
        videoCopy: results.getStructuredText('home.video-copy').asHtml(),
      })
    })

    api.queryIds('my.products.uid', products).then((res) => {
      // Parse request the way we want
      let results = res.results;
      let parseProducts = []

      Array.from(results, (product, i) => {
        let item = {
          title: product.get('products.product-title').asText(),
          subTitle: product.get('products.product-subheader').asText(),
          mainImage: product.getImage('products.main-image').url,
          leftIngredient: product.getImage('products.left-ingredient').url,
          rightIngredient: product.getImage('products.right-ingredient').url,
          url: productArray[i].url
        }
        parseProducts.push(item)
      })
      self.setState({
        products: parseProducts
      })
    })
  }

  renderProducts() {
    if (this.state.products.length >= 1) {
      return <Carousel slides={this.state.products}  />
    }
  }

  render() {
    let background = {
      backgroundImage: 'url('+ this.state.heroImage +')'
    }

    return (
      <div className='home'>
        <div className='home--hero'>
          <div className="home--hero-background" style={background} />
          <div className='home--hero-copy'>
            <div dangerouslySetInnerHTML={Helper.createMarkup(this.state.heroCopy)}></div>
            <a href='/collections/all' className='btn btn--red'>Shop Now</a>
          </div>
        </div>
        <div className='home--content'>
          <div className='home--copy'>
            <div dangerouslySetInnerHTML={Helper.createMarkup(this.state.mainCopy)}></div>
          </div>
          <div className='home--video'>
            <div className='home--video-wrapper'>
              <div className='home--video-player'>
                <iframe src={`https://player.vimeo.com/video/${this.state.videoId}?color=ffffff&byline=0&portrait=0`} width="640" height="360" frameBorder="0"  allowFullScreen></iframe>
              </div>
            </div>
          </div>
          <div className='product--carousel'>
            <h2>Check out our Flavors</h2>
            <div className='product--carousel-wrapper'>
              {this.renderProducts()}
            </div>
            <a href='/collections/all' className='btn btn--red'>See all Flavors</a>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;