import React , { useState } from 'react'
import Head from 'next/head'
import Router from 'next/router'
import { FormController , IntegerInput , Button } from '~/components/form'
import isNum from 'validator/lib/isNumeric'
import useCart , { useSetCart } from '~/hooks/useCart'
import styles from './style.module.css'
Item . getInitialProps = async function ( { ctx : { axios , query : { slug } } } ) {
const { data : item } = await axios . get ( ` /api/items/by-slug/ ${ slug } ` )
if ( ! item ) {
const err = new Error ( "Not found" )
err . status = 404
throw err ;
}
return { item }
}
// TODO: Modal with full image size on clicking preview
export default function Item ( { item } ) {
const cart = useCart ( )
const setCart = useSetCart ( )
// 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 numInCart = cart ? . items ? . find ( i => i . item . uuid === item . uuid ) ? . count || 0
return (
< >
< Head >
< title > { item . name } | Society of Socks < / t i t l e >
< / H e a d >
< div className = { styles . pageContainer } >
< div className = { 'dark ' + styles . itemDetails } >
{ item . images && item . images . length > 0 && (
< div className = { styles . imageContainer } >
< div className = { styles . card } >
< picture >
< source srcset = { ` /api/images/ ${ item . images [ selectedIndex ] . uuid } /thumb.webp ` } type = "image/webp" / >
< img src = { ` /api/images/ ${ item . images [ selectedIndex ] . uuid } /thumb.png ` } / >
< / p i c t u r e >
< / d i v >
{ 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" / >
< img key = { image . uuid }
onClick = { ( ) => setSelected ( index ) }
className = { index === selectedIndex ? styles . selectedImage : undefined }
src = { ` /api/images/ ${ image . uuid } /thumb.png ` }
/ >
< / p i c t u r e >
) ) }
< / d i v >
}
< / d i v >
) }
< div className = { styles . controls } >
< h2 > { item . name } < / h 2 >
{ item . description . split ( '\n' ) . map ( p => p . trim ( ) ) . filter ( p => p !== '' ) . map ( ( p , i ) => < p key = { i } > { p } < / p > ) }
< FormController className = { styles . form } url = { ` /api/cart/add/ ${ item . uuid } ` } afterSubmit = { ( cart ) => { setCart ( cart ) ; Router . push ( '/store/cart' ) } } >
< IntegerInput label = "Add to cart" name = "count" initialValue = "1" minimum = "1" validate = { value => isNum ( value , { no _symbols : true } ) } / >
{
item . number _in _stock > 0
? < Button type = "submit" > Add to cart < / B u t t o n >
: < Button enabled = { false } type = "submit" > Out of stock < / B u t t o n >
}
< / F o r m C o n t r o l l e r >
< div className = { styles . notes } >
< span > Price : $ { ( parseInt ( item . price _cents ) / 100 ) . toFixed ( 2 ) } each < / s p a n >
< span >
{
item . number _in _stock
? item . number _in _stock + ' in stock'
: 'Out of stock'
}
< / s p a n >
< span > { numInCart } in cart < / s p a n >
< / d i v >
< / d i v >
< / d i v >
< div className = { styles . moreDetails } >
< h2 > Additional Information < / h 2 >
< p > All socks are only available in adult medium sizes ( approximately US Men 's size 10 - 13 depending on stretching) at the moment - we' re working on getting more sizes available but not quite ready for that yet . < / p >
< p > All purchases are shipped within a few days of your purchase , ( USPS first class ) . < / p >
< / d i v >
< / d i v >
< / >
)
}
