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 {DateTime} from 'luxon' 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; } if(item.preorder_availability_date) { item.preorder_availability_date = DateTime.fromISO(item.preorder_availability_date).toLocaleString(DateTime.DATE_FULL) } 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 const numberInStock = item.number_in_stock const numberPreorderSlots = (item.preorder_maximum || 0) - (-Math.min(0, item.number_in_stock)) const availabilityText = numberInStock > 0 ? `${numberInStock} in stock` : item.preorder_availability_date && numberPreorderSlots > 0 ? `${numberPreorderSlots} available for pre-order` : 'Currently out of stock' const totalAvailable = (numberInStock > 0 ? numberInStock : numberPreorderSlots) - numInCart return ( <> {item.name} | Society of Socks
{item.images && item.images.length > 0 && (
{item.images && item.images.length > 1 &&
{item.images.map((image, index) => ( setSelected(index)} className={index === selectedIndex ? styles.selectedImage : undefined} src={`/api/images/${image.uuid}/thumb.png`} /> ))}
}
)}

{item.name}

{ item.description.split('\n').map(p=>p.trim()).filter(p=>p !== '').map((p,i)=>

{p}

) } {setCart(cart); Router.push('/store/cart')}}> isNum(value, {no_symbols: true}) && parseInt(value) <= totalAvailable} /> { totalAvailable > 0 ? : }
Price: ${(parseInt(item.price_cents) / 100).toFixed(2)} each {availabilityText} {numInCart} in
{numberInStock < 1 && item.preorder_availability_date && numberPreorderSlots > 0 && (

Note: This is a pre-order item. If you place an order with this item in your cart, it will not ship until at least {item.preorder_availability_date}

)}

Additional Information

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.

All purchases are shipped within a few days of your purchase, (USPS first class).

) }