Skip to content

Commit 964f8f8

Browse files
dabit3dabit3
committed
updated to optimize ssg
1 parent 373a5ad commit 964f8f8

File tree

13 files changed

+61
-50
lines changed

13 files changed

+61
-50
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Jamstack ECommerce Professional
1+
## Jamstack ECommerce Next
22

3-
Jamstack ECommerce Professional provides a way to quickly get up and running with a fully configurable ECommerce site using Next.js.
3+
Jamstack ECommerce Next provides a way to quickly get up and running with a fully configurable ECommerce site using Next.js.
44

55
Out of the box, the site uses completely static data coming from a provider at `providers/inventoryProvider.js`. You can update this provider to fetch data from any real API by changing the call in the `getInventory` function.
66

‎components/CartLink.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from 'react'
2-
import { SiteContext } from '../context/mainContext'
2+
import { ContextProviderComponent, SiteContext } from '../context/mainContext'
33
import { FaShoppingCart, FaCircle } from 'react-icons/fa';
44
import Link from "next/link"
55
import { colors } from '../theme'
@@ -33,11 +33,13 @@ function CartLink(props) {
3333

3434
function CartLinkWithContext(props) {
3535
return (
36-
<SiteContext.Consumer>
37-
{
38-
context => <CartLink {...props} context={context} />
39-
}
40-
</SiteContext.Consumer>
36+
<ContextProviderComponent>
37+
<SiteContext.Consumer>
38+
{
39+
context => <CartLink {...props} context={context} />
40+
}
41+
</SiteContext.Consumer>
42+
</ContextProviderComponent>
4143
)
4244
}
4345

‎pages/_app.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
import '../styles/globals.css'
22
import Layout from '../layouts/layout'
3+
/* Uncomment for dynamic nav
34
import fetchCategories from '../utils/categoryProvider'
5+
*/
46

5-
function Ecommerce({ Component, categories, pageProps }) {
7+
function Ecommerce({ Component, pageProps }) {
8+
const categories = ['new arrivals', 'sofas', 'living room', 'on sale']
69
return (
710
<Layout categories={categories}>
811
<Component {...pageProps} />
912
</Layout>
1013
)
1114
}
1215

16+
/* Uncomment for dynamic nav
1317
Ecommerce.getInitialProps = async () => {
1418
const categories = await fetchCategories()
1519
return {
1620
categories
1721
}
1822
}
23+
*/
1924

2025
export default Ecommerce

‎pages/api/inventory.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import inventory from '../../inventory'
1+
import inventory from '../../utils/inventory'
22

33
/*
44
Inventory items must adhere to the following schema:

‎pages/cart.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { slugify } from '../utils/helpers'
77
import QuantityPicker from '../components/QuantityPicker'
88
import Image from '../components/Image'
99
import Head from 'next/head'
10+
import CartLink from '../components/CartLink'
1011

1112
const Cart = ({ context }) => {
1213
const [renderClientSideComponent, setRenderClientSideComponent] = useState(false)
@@ -33,6 +34,7 @@ const Cart = ({ context }) => {
3334

3435
return (
3536
<>
37+
<CartLink />
3638
<div className="flex flex-col items-center pb-10">
3739
<Head>
3840
<title>Jamstack ECommerce - Cart</title>

‎pages/categories.js‎

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import Head from 'next/head'
2-
import { fetchInventory } from "../utils/inventoryProvider"
32
import { titleIfy , slugify } from '../utils/helpers'
43
import { DisplayMedium } from '../components'
54
import CartLink from '../components/CartLink'
6-
import { ContextProviderComponent } from '../context/mainContext'
5+
import { inventoryCategories } from '../utils/inventoryByCategory'
76

87
function Categories ({ categories = [] }) {
98
return (
10-
<ContextProviderComponent>
9+
<>
1110
<div className="w-full">
1211
<CartLink />
1312
<Head>
@@ -36,38 +35,17 @@ function Categories ({ categories = [] }) {
3635
))
3736
}
3837
</div>
38+
</div>
3939
</div>
40-
</div>
41-
</ContextProviderComponent>
40+
</>
4241
)
4342
}
4443

45-
export async function getStaticProps() {
46-
const inventory = await fetchInventory()
47-
48-
const inventoryByCategory = inventory.reduce((acc, next) => {
49-
const categories = next.categories
50-
categories.forEach(c => {
51-
const index = acc.findIndex(item => item.name === c)
52-
if (index !== -1) {
53-
const item = acc[index]
54-
item.itemCount = item.itemCount + 1
55-
acc[index] = item
56-
} else {
57-
const item = {
58-
name: c,
59-
image: next.image,
60-
itemCount: 1
61-
}
62-
acc.push(item)
63-
}
64-
})
65-
return acc
66-
}, [])
67-
44+
export function getStaticProps() {
45+
const categories = inventoryCategories()
6846
return {
6947
props: {
70-
categories: inventoryByCategory
48+
categories
7149
}
7250
}
7351
}

‎pages/category/[name].js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ import { titleIfy, slugify } from '../../utils/helpers'
44
import fetchCategories from '../../utils/categoryProvider'
55
import inventoryForCategory from '../../utils/inventoryForCategory'
66
import CartLink from '../../components/CartLink'
7-
import { ContextProviderComponent } from '../../context/mainContext'
87

98
const Category = (props) => {
109
const { inventory, title } = props
1110
return (
12-
<ContextProviderComponent>
11+
<>
1312
<CartLink />
1413
<Head>
1514
<title>Jamstack ECommerce - {title}</title>
@@ -40,7 +39,7 @@ const Category = (props) => {
4039
</div>
4140
</div>
4241
</div>
43-
</ContextProviderComponent>
42+
</>
4443
)
4544
}
4645

‎pages/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@ import Head from 'next/head'
22
import { Center, Footer, Tag, Showcase, DisplaySmall, DisplayMedium } from '../components'
33
import { titleIfy, slugify } from '../utils/helpers'
44
import { fetchInventory } from '../utils/inventoryProvider'
5-
import { ContextProviderComponent } from '../context/mainContext'
65
import CartLink from '../components/CartLink'
76

87
const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
98
const inventory = inventoryData.slice(0, 4)
109
const categories = categoryData.slice(0, 2)
1110

1211
return (
13-
<ContextProviderComponent>
12+
<>
1413
<CartLink />
1514
<div className="w-full">
1615
<Head>
@@ -95,7 +94,7 @@ const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
9594
link={`/product/${slugify(inventory[3].name)}`}
9695
/>
9796
</div>
98-
</ContextProviderComponent>
97+
</>
9998
)
10099
}
101100

‎utils/categoryProvider.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import inventory from '../inventory'
1+
import inventory from './inventory'
22

33
async function fetchCategories () {
44
const categories = inventory.reduce((acc, next) => {

‎inventory.js‎ renamed to ‎utils/inventory.js‎

File renamed without changes.

0 commit comments

Comments
 (0)