Add product context provider

3 files changed, 30 insertions, 3 deletions

diff --git a/src/contexts/ProductContext.js b/src/contexts/ProductContext.js
new file mode 100644
index 00000000..7bf65989
--- /dev/null
+++ b/src/contexts/ProductContext.js
@@ -0,0 +1,15 @@
+import { createContext, useContext, useState } from 'react'
+
+const ProductContext = createContext()
+
+export const ProductProvider = ({ children }) => {
+  const [product, setProduct] = useState(null)
+
+  return (
+    <ProductContext.Provider value={{ product, setProduct }}>{children}</ProductContext.Provider>
+  )
+}
+
+export const useProductContext = () => {
+  return useContext(ProductContext)
+}
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 7f23b94b..ef737794 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -10,6 +10,7 @@ import { createContext, useContext, useEffect, useState } from 'react'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 import { SessionProvider } from 'next-auth/react'
 import { getAuth } from '@/core/utils/auth'
+import { ProductProvider } from '@/contexts/ProductContext'
 
 const queryClient = new QueryClient()
 
@@ -93,7 +94,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
             initial={false}
             onExitComplete={() => window.scrollTo(0, 0)}
           >
-            {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+            <ProductProvider>
+              {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+            </ProductProvider>
           </AnimatePresence>
         </QueryClientProvider>
       </SessionProvider>
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index af20413f..534aa8da 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -7,6 +7,8 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import cookie from 'cookie'
 import axios from 'axios'
+import { useProductContext } from '@/contexts/ProductContext'
+import { useEffect } from 'react'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const Product = dynamic(() => import('@/lib/product/components/Product/Product'))
@@ -19,7 +21,7 @@ export async function getServerSideProps(context) {
   const authToken = auth?.token || ''
 
   let response = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=`+getIdFromSlug(slug)
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` + getIdFromSlug(slug)
   )
   let product = response.data
   // let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
@@ -41,8 +43,15 @@ export async function getServerSideProps(context) {
   }
 }
 
-export default function ProductDetail({ product}) {
+export default function ProductDetail({ product }) {
   const router = useRouter()
+  const { setProduct } = useProductContext()
+
+  useEffect(() => {
+    if (product) {
+      setProduct(product)
+    }
+  }, [product, setProduct])
 
   if (!product) return <PageNotFound />