updates to context

joeynimu · Jan 6, 2021 · 373a5ad · 373a5ad
1 parent 05d4c7a
commit 373a5ad
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 90 deletions.
diff --git a/components/CartLink.js b/components/CartLink.js
@@ -41,5 +41,4 @@ function CartLinkWithContext(props) {
   )
 }
 
-
 export default CartLinkWithContext
diff --git a/context/cartUIContext.js b/context/cartUIContext.js
diff --git a/context/mainContext.js b/context/mainContext.js
@@ -1,7 +1,6 @@
 import { toast } from 'react-toastify'
 import React from 'react'
 const STORAGE_KEY = 'NEXT_ECOMMERCE_STARTER_'
-import CartLink from '../components/CartLink'
 
 const initialState = {
   cart: [],
@@ -100,7 +99,6 @@ class ContextProviderComponent extends React.Component {
          removeFromCart: this.removeFromCart,
          setItemQuantity: this.setItemQuantity
       }}>
-       <CartLink />
        {this.props.children}
      </SiteContext.Provider>
     )

diff --git a/pages/categories.js b/pages/categories.js
@@ -2,39 +2,43 @@ import Head from 'next/head'
 import { fetchInventory } from "../utils/inventoryProvider"
 import { titleIfy , slugify } from '../utils/helpers'
 import { DisplayMedium } from '../components'
-import { SiteContext, ContextProviderComponent } from '../context/mainContext'
+import CartLink from '../components/CartLink'
+import { ContextProviderComponent } from '../context/mainContext'
 
 function Categories ({ categories = [] }) {
   return (
-    <div className="w-full">
-      <Head>
-        <title>Jamstack ECommerce - All Categories</title>
-        <meta property="og:title" content="Jamstack ECommerce - All Categories" key="title" />
-      </Head>
-      <div className="
-        sm:pt-10 pb-8
-      ">
-        <h1 className="text-5xl font-light">All categories</h1>
-      </div>
-      <div className="flex flex-col items-center">
-
-        {/* <div className="my-4 lg:my-8 flex flex-col lg:flex-row justify-between"> */}
-        <div className="grid gap-4
-        lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
-        {
-          categories.map((category, index) => (
-            <DisplayMedium
-              key={index}
-              imageSrc={category.image}
-              subtitle={`${category.itemCount} items`}
-              title={titleIfy(category.name)}
-              link={`/category/${slugify(category.name)}`}
-            />
-          ))
-        }
+    <ContextProviderComponent>
+      <div className="w-full">
+        <CartLink />
+        <Head>
+          <title>Jamstack ECommerce - All Categories</title>
+          <meta property="og:title" content="Jamstack ECommerce - All Categories" key="title" />
+        </Head>
+        <div className="
+          sm:pt-10 pb-8
+        ">
+          <h1 className="text-5xl font-light">All categories</h1>
         </div>
-     </div>
-    </div>
+        <div className="flex flex-col items-center">
+
+          {/* <div className="my-4 lg:my-8 flex flex-col lg:flex-row justify-between"> */}
+          <div className="grid gap-4
+          lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
+          {
+            categories.map((category, index) => (
+              <DisplayMedium
+                key={index}
+                imageSrc={category.image}
+                subtitle={`${category.itemCount} items`}
+                title={titleIfy(category.name)}
+                link={`/category/${slugify(category.name)}`}
+              />
+            ))
+          }
+          </div>
+      </div>
+      </div>
+    </ContextProviderComponent>
   )
 }
 
@@ -68,16 +72,4 @@ export async function getStaticProps() {
   }
 }
 
-function CategoriesViewWithContext(props) {
-  return (
-    <ContextProviderComponent>
-      <SiteContext.Consumer>
-        {
-          context =>  <Categories {...props} context={context} />
-        }
-      </SiteContext.Consumer>
-    </ContextProviderComponent>
-  )
-}
-
-export default CategoriesViewWithContext
+export default Categories
diff --git a/pages/category/[name].js b/pages/category/[name].js
@@ -3,12 +3,14 @@ import ListItem from '../../components/ListItem'
 import { titleIfy, slugify } from '../../utils/helpers'
 import fetchCategories from '../../utils/categoryProvider'
 import inventoryForCategory from '../../utils/inventoryForCategory'
-import { SiteContext, ContextProviderComponent } from '../../context/mainContext'
+import CartLink from '../../components/CartLink'
+import { ContextProviderComponent } from '../../context/mainContext'
 
 const Category = (props) => {
   const { inventory, title } = props
   return (
-    <>
+    <ContextProviderComponent>
+      <CartLink />
       <Head>
         <title>Jamstack ECommerce - {title}</title>
         <meta property="og:title" content={`Jamstack ECommerce - ${title}`} key="title" />
@@ -38,18 +40,6 @@ const Category = (props) => {
           </div>
           </div>
       </div>
-    </>
-  )
-}
-
-function CategoryViewWithContext(props) {
-  return (
-    <ContextProviderComponent>
-      <SiteContext.Consumer>
-        {
-          context =>  <Category {...props} context={context} />
-        }
-      </SiteContext.Consumer>
     </ContextProviderComponent>
   )
 }
@@ -76,4 +66,4 @@ export async function getStaticProps ({ params }) {
   }
 }
 
-export default CategoryViewWithContext
+export default Category
diff --git a/pages/index.js b/pages/index.js
@@ -2,14 +2,16 @@ import Head from 'next/head'
 import { Center, Footer, Tag, Showcase, DisplaySmall, DisplayMedium } from '../components'
 import { titleIfy, slugify } from '../utils/helpers'
 import { fetchInventory } from '../utils/inventoryProvider'
-import { SiteContext, ContextProviderComponent } from '../context/mainContext'
+import { ContextProviderComponent } from '../context/mainContext'
+import CartLink from '../components/CartLink'
 
 const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
   const inventory = inventoryData.slice(0, 4)
   const categories = categoryData.slice(0, 2)
 
   return (
-    <>
+    <ContextProviderComponent>
+      <CartLink />
       <div className="w-full">
         <Head>
           <title>Jamstack ECommerce</title>
@@ -93,7 +95,7 @@ const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
           link={`/product/${slugify(inventory[3].name)}`}
         />
       </div>
-    </>
+    </ContextProviderComponent>
   )
 }
 
@@ -128,16 +130,4 @@ export async function getStaticProps() {
   }
 }
 
-function HomeViewWithContext(props) {
-  return (
-    <ContextProviderComponent>
-      <SiteContext.Consumer>
-        {
-          context =>  <Home {...props} context={context} />
-        }
-      </SiteContext.Consumer>
-    </ContextProviderComponent>
-  )
-}
-
-export default HomeViewWithContext
+export default Home
diff --git a/pages/product/[name].js b/pages/product/[name].js
@@ -1,11 +1,12 @@
 import { useState } from 'react'
 import Head from 'next/head'
-import { SiteContext, ContextProviderComponent } from '../../context/mainContext'
 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)
@@ -29,6 +30,7 @@ const ItemView = (props) => {
 
   return (
     <>
+      <CartLink />
       <Head>
         <title>Jamstack ECommerce - {name}</title>
         <meta property="og:title" content={`Jamstack ECommerce - ${name}`} key="title" />
@@ -64,19 +66,6 @@ const ItemView = (props) => {
   )
 }
 
-
-function ItemViewWithContext(props) {
-  return (
-    <ContextProviderComponent>
-      <SiteContext.Consumer>
-        {
-          context =>  <ItemView {...props} context={context} />
-        }
-      </SiteContext.Consumer>
-    </ContextProviderComponent>
-  )
-}
-
 export async function getStaticPaths () {
   const inventory = await fetchInventory()
   const paths = inventory.map(item => {
@@ -100,4 +89,16 @@ export async function getStaticProps ({ params }) {
   }
 }
 
+function ItemViewWithContext(props) {
+  return (
+    <ContextProviderComponent>
+      <SiteContext.Consumer>
+        {
+          context => <ItemView {...props} context={context} />
+        }
+      </SiteContext.Consumer>
+    </ContextProviderComponent>
+  )
+}
+
 export default ItemViewWithContext
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,5 +41,4 @@ function CartLinkWithContext(props) {
		)
		}


		export default CartLinkWithContext