All files / src/components/ProductDetails ProductImages.jsx

77.78% Statements 7/9
50% Branches 2/4
60% Functions 3/5
77.78% Lines 7/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39              7x 7x 7x   7x         7x               14x   1x                        
/* eslint-disable react/prop-types */
import React, { useState } from 'react';
import './ProductImages.scss';
import Overlay from '../Overlay/Overlay';
import AlertInfo from '../../helpers/AlertInfo/AlertInfo'
 
export default function ProductsImages({ product }) {
  const [mainImage, setMainImage] = useState(product.hero.href)
  const [displayCarosuel, setDisplayCarosuel] = useState(false)
  const { images } = product;
 
  const closeOverLay = () => {
    setDisplayCarosuel(false)
  }
 
 
  return (
        <React.Fragment>
            {<div className="medium-6 columns">
                <a data-open="exampleModal8" onClick={() => { setDisplayCarosuel(true) }}>
                    <img className="thumbnail main-image" src={mainImage} alt={name} />
                </a>
                <div className="row small-up-8">
                    {images ? images.map((image, index) => {
                      return (<div key={index} className="column">
                            <a>
                                <img className="thumbnail alt-image" src={image.href} onClick={(e) => { setMainImage(e.target.src) }} />
                            </a>
                        </div>)
                    }) : <AlertInfo message="Ohh, Alternative images are not available for this product." />}
                </div>
            </div>}
            {displayCarosuel && <Overlay closeoverlay={closeOverLay} images={images} />}
        </React.Fragment >
  )
}