pmkhoa · July 9, 2018 05:51 · Feb 24, 2018 · Feb 24, 2018 · Feb 24, 2018
diff --git a/Collections.js b/Collections.js
@@ -8,38 +8,38 @@ export default class Collections extends React.Component {
   // 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);
+    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 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 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;
+      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;
+        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));
+      const brightness = Math.floor(colorSum / (event.target.width*event.target.height))
 
-      callback(brightness);
+      callback(brightness)
     })
   }
 

diff --git a/Collections.js b/Collections.js
@@ -3,7 +3,10 @@ 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';

diff --git a/index.js b/index.js
@@ -10,8 +10,8 @@ export default class IndexPage extends React.Component {
 
   static async getInitialProps() {
     const shopifyClient = ShopifyClient.buildClient({
-      domain: 'the-wild-unknown-staging.myshopify.com',
-      storefrontAccessToken: 'ecfdd69a1408fc560ef4977f0ad3a00c'
+      domain: 'xxxx',
+      storefrontAccessToken: 'xxxx'
     })
 
     const shopifyCollectionsReq = await shopifyClient.collection.fetchAllWithProducts()

diff --git a/App.js b/App.js
@@ -0,0 +1,16 @@
+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
diff --git a/Collections.js b/Collections.js
@@ -0,0 +1,78 @@
+import Swiper from 'swiper'
+import style from './style'
+
+export default class Collections extends React.Component {
+  state = {}
+
+  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>
+    )
+  }
+}
diff --git a/index.js b/index.js
@@ -0,0 +1,67 @@
+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: 'the-wild-unknown-staging.myshopify.com',
+      storefrontAccessToken: 'ecfdd69a1408fc560ef4977f0ad3a00c'
+    })
+
+    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>
+    )
+  }
+}