Removing Providers from Layout

components/commerce/hooks/useCommerce.ts

@@ -1,10 +1,12 @@
 import { useContext } from 'react'
 import { CommerceContext } from '../context'
 
-export const useCommerce = () => {
+const useCommerce = () => {
   const context = useContext(CommerceContext)
   if (context === undefined) {
     throw new Error(`useCommerce must be used within a CommerceProvider`)
   }
   return context
 }
+
+export default useCommerce

components/commerce/index.ts

@@ -1 +1,3 @@
 export { default as useCart } from './hooks/useCart'
+export { default as useCommerce } from './hooks/useCommerce'
+export * from './context'

components/common/Layout/Layout.tsx

@@ -1,16 +1,15 @@
 import cn from 'classnames'
 import s from './Layout.module.css'
-import { useRouter } from 'next/router'
+
 import { usePreventScroll } from '@react-aria/overlays'
 import { FC, useCallback, useEffect, useState } from 'react'
 import { useUI } from '@components/ui/context'
 import { CartSidebarView } from '@components/cart'
 import { Navbar, Featurebar, Footer } from '@components/common'
 import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
-import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
+import { Container, Sidebar, Button, Modal } from '@components/ui'
 import debounce from 'lodash.debounce'
 
-import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
 
 interface Props {
@@ -29,7 +28,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
-  const { locale = 'en-US' } = useRouter()
 
   usePreventScroll({
     isDisabled: !(displaySidebar || displayModal),
@@ -52,38 +50,36 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   }, [handleScroll])
 
   return (
-    <CommerceProvider locale={locale}>
+    <div className={cn(s.root)}>
-      <div className={cn(s.root)}>
+      <header className={cn(s.header, { 'shadow-magical': hasScrolled })}>
-        <header className={cn(s.header, { 'shadow-magical': hasScrolled })}>
+        <Container>
-          <Container>
+          <Navbar />
-            <Navbar />
+        </Container>
-          </Container>
+      </header>
-        </header>
+      <main className="fit">{children}</main>
-        <main className="fit">{children}</main>
+      <Footer pages={pageProps.pages} />
-        <Footer pages={pageProps.pages} />
 
-        {/** Aditional UI Components */}
+      {/** Aditional UI Components */}
-        <Sidebar open={displaySidebar} onClose={closeSidebar}>
+      <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView />
+        <CartSidebarView />
-        </Sidebar>
+      </Sidebar>
 
-        <Modal open={displayModal} onClose={closeModal}>
+      <Modal open={displayModal} onClose={closeModal}>
-          {modalView === 'LOGIN_VIEW' && <LoginView />}
+        {modalView === 'LOGIN_VIEW' && <LoginView />}
-          {modalView === 'SIGNUP_VIEW' && <SignUpView />}
+        {modalView === 'SIGNUP_VIEW' && <SignUpView />}
-          {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
+        {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
-        </Modal>
+      </Modal>
 
-        <Featurebar
+      <Featurebar
-          title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
+        title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
-          hide={acceptedCookies}
+        hide={acceptedCookies}
-          action={
+        action={
-            <Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
+          <Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
-              Accept cookies
+            Accept cookies
-            </Button>
+          </Button>
-          }
+        }
-        />
+      />
-      </div>
+    </div>
-    </CommerceProvider>
   )
 }
 

pages/_app.tsx

@@ -3,22 +3,26 @@ import 'keen-slider/keen-slider.min.css'
 
 import { FC } from 'react'
 import type { AppProps } from 'next/app'
-
-import { ManagedUIContext } from '@components/ui/context'
 import { Head } from '@components/common'
+import { ManagedUIContext } from '@components/ui/context'
+
+import { useRouter } from 'next/router'
+import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 
 const Noop: FC = ({ children }) => <>{children}</>
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const Layout = (Component as any).Layout || Noop
-
+  const { locale = 'en-US' } = useRouter()
   return (
     <>
       <Head />
       <ManagedUIContext>
-        <Layout pageProps={pageProps}>
+        <CommerceProvider locale={locale}>
-          <Component {...pageProps} />
+          <Layout pageProps={pageProps}>
-        </Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </CommerceProvider>
       </ManagedUIContext>
     </>
   )