pmkhoa/App.js

## App.js
import Head from 'next/head'
import style from './style'

const App = (props) => (
  <div className={`view view--${props.view ? props.view : 'root'} ${props.isBright ? 'is-bright' : 'is-dark'}`}>
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link href='/static/app.css' rel='stylesheet' />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css" />
    </Head>
    {props.children}
    <style jsx>{style}</style>
  </div>
)

export default App

## Collections.js
import Swiper from 'swiper'
import style from './style'

export default class Collections extends React.Component {
  state = {}

  ////
  // https://stackoverflow.com/questions/13762864/image-dark-light-detection-client-sided-script
  ////
  getImageBrightness = (imageSrc, callback) => {
    const image = document.createElement('img')
    image.crossOrigin = 'anonymous'
    image.src = imageSrc
    image.style.display = 'none'
    document.body.appendChild(image)

    let colorSum = 0;

    image.addEventListener('load', (event) => {
      const canvas = document.createElement('canvas')
      canvas.width = event.target.width
      canvas.height = event.target.height

      const ctx = canvas.getContext('2d')
      ctx.drawImage(event.target,0,0)

      const imageData = ctx.getImageData(0,0,canvas.width,canvas.height)
      const data = imageData.data
      let r,g,b,avg

      for(let x = 0, len = data.length; x < len; x+=4) {
        r = data[x]
        g = data[x+1]
        b = data[x+2]

        avg = Math.floor((r+g+b)/3)
        colorSum += avg
      }

      const brightness = Math.floor(colorSum / (event.target.width*event.target.height))

      callback(brightness)
    })
  }

  componentDidMount() {
    const mySwiper = new Swiper ('.collections-carousel', {
      loop: false,
      on: {
        init: () => {
          Array.from(document.getElementsByClassName('swiper-slide')).forEach(slide => {
            this.getImageBrightness(slide.children[0].getAttribute('src'), (brightness) => {
              slide.setAttribute('data-brightness', brightness)
            })
          })
        },
        slideChangeTransitionStart: () => {
          this.props.setCurrentCollectionsSlideImageBrightnessToState(document.querySelector('.swiper-slide-active').getAttribute('data-brightness'))
        }
      },
    })
  }

  render() {
    return (
      <div className='swiper-container collections-carousel'>
        <div className='swiper-wrapper'>
          {this.props.shopifyCollections.map((collection, idx) => (
            <div
              className='swiper-slide'
              onClick={() => this.props.setSelectedCollectionToState(idx)}
              key={collection.id}>
              <img className='swiper-slide__image' src={collection.image} />
            </div>
          ))}
        </div>
        <style jsx>{style}</style>
      </div>
    )
  }
}

## index.js
import Head from 'next/head'
import ShopifyClient from 'shopify-buy'
import fetch from 'isomorphic-unfetch'
import App from './../components/App'
import Collections from './../components/Collections'
import Collection from './../components/Collection'

export default class IndexPage extends React.Component {
  state = {}

  static async getInitialProps() {
    const shopifyClient = ShopifyClient.buildClient({
      domain: 'xxxx',
      storefrontAccessToken: 'xxxx'
    })

    const shopifyCollectionsReq = await shopifyClient.collection.fetchAllWithProducts()
    const shopifyCollections = shopifyCollectionsReq.map(collection => ({
      id: collection.id,
      handle: collection.handle,
      description: collection.descriptionHtml,
      image: collection.image.src,
      products: collection.products.map(product => ({
        createdAt: product.createdAt,
        description: product.descriptionHtml,
        handle: product.handle,
        id: product.id,
        image: product.images[0].src,
        title: product.title,
      }))
    }))

    return {
      shopifyCollections
    }
  }

  componentDidMount() {
    this.setSelectedCollectionToState(0)
  }

  setCurrentCollectionsSlideImageBrightnessToState = (brightness) => {
    this.setState({
      isBright: brightness > 100
    })
  }

  setSelectedCollectionToState = (idx) => {
    this.setState({
      selectedCollection: this.props.shopifyCollections[idx]
    })
  }

  render() {
    return (
      <App
        isBright={this.state.isBright}
        view={this.props.url.pathname.replace('/', '')}>
          <Collections
            setSelectedCollectionToState={this.setSelectedCollectionToState}
            shopifyCollections={this.props.shopifyCollections}
            setCurrentCollectionsSlideImageBrightnessToState={this.setCurrentCollectionsSlideImageBrightnessToState} />
          <Collection />
      </App>
    )
  }
}
	import Head from 'next/head'
	import style from './style'

	const App = (props) => (
	<div className={`view view--${props.view ? props.view : 'root'} ${props.isBright ? 'is-bright' : 'is-dark'}`}>
	<Head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link href='/static/app.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css" />
	</Head>
	{props.children}
	<style jsx>{style}</style>
	</div>
	)

	export default App
	import Swiper from 'swiper'
	import style from './style'

	export default class Collections extends React.Component {
	state = {}

	////
	// https://stackoverflow.com/questions/13762864/image-dark-light-detection-client-sided-script
	////
	getImageBrightness = (imageSrc, callback) => {
	const image = document.createElement('img')
	image.crossOrigin = 'anonymous'
	image.src = imageSrc
	image.style.display = 'none'
	document.body.appendChild(image)

	let colorSum = 0;

	image.addEventListener('load', (event) => {
	const canvas = document.createElement('canvas')
	canvas.width = event.target.width
	canvas.height = event.target.height

	const ctx = canvas.getContext('2d')
	ctx.drawImage(event.target,0,0)

	const imageData = ctx.getImageData(0,0,canvas.width,canvas.height)
	const data = imageData.data
	let r,g,b,avg

	for(let x = 0, len = data.length; x < len; x+=4) {
	r = data[x]
	g = data[x+1]
	b = data[x+2]

	avg = Math.floor((r+g+b)/3)
	colorSum += avg
	}

	const brightness = Math.floor(colorSum / (event.target.width*event.target.height))

	callback(brightness)
	})
	}

	componentDidMount() {
	const mySwiper = new Swiper ('.collections-carousel', {
	loop: false,
	on: {
	init: () => {
	Array.from(document.getElementsByClassName('swiper-slide')).forEach(slide => {
	this.getImageBrightness(slide.children[0].getAttribute('src'), (brightness) => {
	slide.setAttribute('data-brightness', brightness)
	})
	})
	},
	slideChangeTransitionStart: () => {
	this.props.setCurrentCollectionsSlideImageBrightnessToState(document.querySelector('.swiper-slide-active').getAttribute('data-brightness'))
	}
	},
	})
	}

	render() {
	return (
	<div className='swiper-container collections-carousel'>
	<div className='swiper-wrapper'>
	{this.props.shopifyCollections.map((collection, idx) => (
	<div
	className='swiper-slide'
	onClick={() => this.props.setSelectedCollectionToState(idx)}
	key={collection.id}>
	<img className='swiper-slide__image' src={collection.image} />
	</div>
	))}
	</div>
	<style jsx>{style}</style>
	</div>
	)
	}
	}
	import Head from 'next/head'
	import ShopifyClient from 'shopify-buy'
	import fetch from 'isomorphic-unfetch'
	import App from './../components/App'
	import Collections from './../components/Collections'
	import Collection from './../components/Collection'

	export default class IndexPage extends React.Component {
	state = {}

	static async getInitialProps() {
	const shopifyClient = ShopifyClient.buildClient({
	domain: 'xxxx',
	storefrontAccessToken: 'xxxx'
	})

	const shopifyCollectionsReq = await shopifyClient.collection.fetchAllWithProducts()
	const shopifyCollections = shopifyCollectionsReq.map(collection => ({
	id: collection.id,
	handle: collection.handle,
	description: collection.descriptionHtml,
	image: collection.image.src,
	products: collection.products.map(product => ({
	createdAt: product.createdAt,
	description: product.descriptionHtml,
	handle: product.handle,
	id: product.id,
	image: product.images[0].src,
	title: product.title,
	}))
	}))

	return {
	shopifyCollections
	}
	}

	componentDidMount() {
	this.setSelectedCollectionToState(0)
	}

	setCurrentCollectionsSlideImageBrightnessToState = (brightness) => {
	this.setState({
	isBright: brightness > 100
	})
	}

	setSelectedCollectionToState = (idx) => {
	this.setState({
	selectedCollection: this.props.shopifyCollections[idx]
	})
	}

	render() {
	return (
	<App
	isBright={this.state.isBright}
	view={this.props.url.pathname.replace('/', '')}>
	<Collections
	setSelectedCollectionToState={this.setSelectedCollectionToState}
	shopifyCollections={this.props.shopifyCollections}
	setCurrentCollectionsSlideImageBrightnessToState={this.setCurrentCollectionsSlideImageBrightnessToState} />
	<Collection />
	</App>
	)
	}
	}