Gallery.js

import React from "react";
import PropTypes from "prop-types";
import ResizedImage from "theme/atoms/Images/ResizedImage";
import ImagesGallery from "theme/molecules/Product/View/ImagesGallery";
import EnhanceProductGallery from "common/enhancers/organisms/EnhanceProductGallery";
import ProductGalleryQuery from "./ProductGalleryQuery.gql";
import createFullUrlFromPath from "utils/createFullUrlFromPath";

const ProductGallery = ({
  mainImageSrc,
  visibleImages,
  alt,
  hasPrev,
  hasNext,
  onImageClick,
  setStartIndex
}) => {
  return (
    <div className="product__gallery">
      <ResizedImage
        itemProp="image"
        className="product__gallery__main-image"
        src={createFullUrlFromPath(mainImageSrc)}
        alt={alt}
        format="large"
      />
      {visibleImages &&
        <ImagesGallery
          alt={alt}
          images={visibleImages}
          onImageClick={onImageClick}
          hasPrev={hasPrev}
          hasNext={hasNext}
          setStartIndex={setStartIndex}
        />}
    </div>
  );
};

ProductGallery.propTypes = {
  mainImageSrc: PropTypes.string,
  visibleImages: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        file: PropTypes.string.isRequired
      })
    ),
    PropTypes.bool
  ]).isRequired,
  alt: PropTypes.string,
  hasPrev: PropTypes.bool,
  hasNext: PropTypes.bool,
  onImageClick: PropTypes.func,
  setStartIndex: PropTypes.func
};

// This comment will fix a weird issue. See https://github.com/detrohutt/babel-plugin-inline-import-graphql-ast/issues/2
const SmartGallery = EnhanceProductGallery({ ProductGalleryQuery })(
  ProductGallery
);

export default SmartGallery;