import React, { useState, useEffect } from 'react'; import { graphql, Link } from 'gatsby'; import styled from 'styled-components'; import { first } from 'lodash'; import config from '../utils/config'; import Seo from './Seo'; import Layout from './Layout'; import ProductGallery from './ProductGallery'; import ProductInfo from './ProductInfo'; import ProductsList from './ProductsList'; import ProductSpecs from './ProductSpecs'; import ProductReviews from './ProductReviews'; const Container = styled.div``; const ViewAllBtn = styled(Link)` padding-right: 2rem; padding-left: 2rem; `; export const query = graphql` query ProductViewQuery($slug: String!) { sanitySiteSettings { productDeliveryInfo productShippingReturns } sanityProduct(slug: { current: { eq: $slug } }) { _id id title slug { current } tags shippingCost { price country } _rawBody tags categories { title slug { current } id } otherVariants { color { hex } pricing { country discountPrice price } featuredImage { asset { fluid(maxWidth: 700) { ...GatsbySanityImageFluid } } } images { asset { fluid(maxWidth: 700) { ...GatsbySanityImageFluid } } } sku title } } allSanityProduct( filter: { status: { eq: "active" }, slug: { current: { ne: $slug } } } limit: 8 sort: { fields: [_createdAt], order: DESC } ) { edges { node { id title slug { current } otherVariants { _key title color { hex } pricing { country discountPrice price } sku featuredImage { asset { fluid(maxWidth: 350) { ...GatsbySanityImageFluid } } } } } } } allSanityReview(sort: { fields: [_createdAt], order: DESC }) { edges { node { id comment personName } } } } `; const ProductView = ({ data }) => { const product = data.sanityProduct; const products = data.allSanityProduct.edges; const home = data.sanitySiteSettings; const reviews = data.allSanityReview.edges; const [variant, setVariant] = useState({}); // console.log('variant', variant); useEffect(() => { const firstItem = first(product.otherVariants); if (firstItem) { setVariant(firstItem); } }, [product.otherVariants]); const metaImage = variant.featuredImage ? variant.featuredImage.asset.fluid.src : `${config.logo}`; return ( <Layout> <Seo title={product.title} description={`Buy by ${product.title} at ${config.siteName}`} url={`${config.siteUrl}/product/${product.slug.title}`} image={metaImage} isProduct /> <div className="container"> <section className="section"> <Container className="columns"> <div className="column"> <ProductGallery variant={variant} /> </div> <div className="column section"> <ProductInfo home={home} product={product} reviews={reviews} variant={variant} setVariant={setVariant} /> </div> </Container> </section> </div> <ProductSpecs product={product} variant={variant} /> <ProductReviews reviews={reviews} /> <div className="container"> <ProductsList title="We think you'll" products={products} /> <div className="has-text-centered "> <ViewAllBtn to="/shop" className="button is-outlined is-medium"> View all </ViewAllBtn> </div> </div> </Layout> ); }; export default ProductView;