|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import React, {useState} from 'react'
|
|
|
|
|
import React, {useState, useEffect} from 'react'
|
|
|
|
|
import Head from 'next/head'
|
|
|
|
|
import Router from 'next/router'
|
|
|
|
|
import {FormController, IntegerInput, Button} from '~/components/form'
|
|
|
|
@ -10,6 +10,7 @@ import Modal from '~/components/modal'
|
|
|
|
|
|
|
|
|
|
import useCart, {useSetCart} from '~/hooks/useCart'
|
|
|
|
|
import styles from './style.module.css'
|
|
|
|
|
import usePrevious from '~/hooks/usePrevious'
|
|
|
|
|
|
|
|
|
|
Item.getInitialProps = async function({ctx: {axios, query: {slug}}}){
|
|
|
|
|
const {data: item} = await axios.get(`/api/items/by-slug/${slug}`)
|
|
|
|
@ -33,7 +34,16 @@ export default function Item({item}){
|
|
|
|
|
// Pick first one with featured flag or 0
|
|
|
|
|
const featuredIndex = item.images.reduce((p, im, i) => ((p !== undefined) ? p : (im.featured ? i : undefined)), undefined) || 0
|
|
|
|
|
const [selectedIndex, setSelected] = useState(featuredIndex);
|
|
|
|
|
const lastImage = usePrevious(selectedIndex);
|
|
|
|
|
const [imageModalVisible, setImageModalVisible] = useState(false);
|
|
|
|
|
const [imageChanged, setImageChanged] = useState(false);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (selectedIndex !== lastImage)
|
|
|
|
|
setImageChanged(true);
|
|
|
|
|
else
|
|
|
|
|
setImageChanged(false);
|
|
|
|
|
}, [selectedIndex, lastImage]);
|
|
|
|
|
|
|
|
|
|
const numInCart = cart?.items?.find(i => i.item.uuid === item.uuid)?.count || 0
|
|
|
|
|
|
|
|
|
@ -67,8 +77,8 @@ export default function Item({item}){
|
|
|
|
|
{item.images && item.images.length > 1 &&
|
|
|
|
|
<div className={styles.imageSelector}>
|
|
|
|
|
{item.images.map((image, index) => (
|
|
|
|
|
<picture>
|
|
|
|
|
<source srcset={`/api/images/${image.uuid}/thumb.webp`} type="image/webp"/>
|
|
|
|
|
<picture key={image.uuid}>
|
|
|
|
|
<source srcSet={`/api/images/${image.uuid}/thumb.webp`} type="image/webp"/>
|
|
|
|
|
<img key={image.uuid}
|
|
|
|
|
onClick={()=>setSelected(index)}
|
|
|
|
|
className={index === selectedIndex ? styles.selectedImage : undefined}
|
|
|
|
@ -84,10 +94,12 @@ export default function Item({item}){
|
|
|
|
|
<Icon icon="chevron_left" />
|
|
|
|
|
</button>
|
|
|
|
|
<div className={styles.fullImage}>
|
|
|
|
|
{!imageChanged && (
|
|
|
|
|
<picture>
|
|
|
|
|
<source srcSet={`/api/images/${item.images[selectedIndex].uuid}/large.webp`} type="image/webp"/>
|
|
|
|
|
<img src={`/api/images/${item.images[selectedIndex].uuid}/large.png`} onClick={() => setImageModalVisible(true)} />
|
|
|
|
|
</picture>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<button onClick={() => setSelected(index => (index + 1) % item.images.length)}>
|
|
|
|
|
<Icon icon="chevron_right" />
|
|
|
|
|