-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcartlogic.js
108 lines (98 loc) · 3.04 KB
/
cartlogic.js
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { useState } from 'react'
import Head from 'next/head'
import Button from '../../components/Button'
import Image from '../../components/Image'
import QuantityPicker from '../../components/QuantityPicker'
import { fetchInventory } from '../../utils/inventoryProvider'
import { slugify } from '../../utils/helpers'
import CartLink from '../../components/CartLink'
import { SiteContext, ContextProviderComponent } from '../../context/mainContext'
const ItemView = (props) => {
const [numberOfitems, updateNumberOfItems] = useState(1)
const { product } = props
const { price, image, name, description } = product
const { context: { addToCart }} = props
function addItemToCart (product) {
product["quantity"] = numberOfitems
addToCart(product)
}
function increment() {
updateNumberOfItems(numberOfitems + 1)
}
function decrement() {
if (numberOfitems === 1) return
updateNumberOfItems(numberOfitems - 1)
}
return (
<>
<CartLink />
<Head>
<title>Jamstack ECommerce - {name}</title>
<meta name="description" content={description} />
<meta property="og:title" content={`Jamstack ECommerce - ${name}`} key="title" />
</Head>
<div className="
sm:py-12
md:flex-row
py-4 w-full flex flex-1 flex-col my-0 mx-auto
">
<div className="w-full md:w-1/2 h-120 flex flex-1 bg-light hover:bg-light-200">
<div className="py-16 p10 flex flex-1 justify-center items-center">
<Image src={image} alt="Inventory item" className="max-h-full" />
</div>
</div>
<div className="pt-2 px-0 md:px-10 pb-8 w-full md:w-1/2">
<h1 className="
sm:mt-0 mt-2 text-5xl font-light leading-large
">{name}</h1>
<h2 className="text-2xl tracking-wide sm:py-8 py-6">${price}</h2>
<p className="text-gray-600 leading-7">{description}</p>
<div className="my-6">
<QuantityPicker
increment={increment}
decrement={decrement}
numberOfitems={numberOfitems}
/>
</div>
<Button
full
title="Add to Cart"
onClick={() => addItemToCart(product)}
/>
</div>
</div>
</>
)
}
export async function getStaticPaths () {
const inventory = await fetchInventory()
const paths = inventory.map(item => {
return { params: { name: slugify(item.name) }}
})
return {
paths,
fallback: false
}
}
export async function getStaticProps ({ params }) {
const name = params.name.replace(/-/g," ")
const inventory = await fetchInventory()
const product = inventory.find(item => slugify(item.name) === slugify(name))
return {
props: {
product,
}
}
}
function ItemViewWithContext(props) {
return (
<ContextProviderComponent>
<SiteContext.Consumer>
{
context => <ItemView {...props} context={context} />
}
</SiteContext.Consumer>
</ContextProviderComponent>
)
}
export default ItemViewWithContext