crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-29 18:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removing Providers from Layout

Browse Source
This commit is contained in:
Belen Curcio 2020-10-29 13:10:45 -03:00
parent d6bbd13b19
commit 6184eb04c8
4 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/commerce/hooks/useCommerce.ts
View File

@ -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

2
components/commerce/index.ts
View File

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

8
components/common/Layout/Layout.tsx
View File

@ -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,7 +50,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
}, [handleScroll])
return (
<CommerceProvider locale={locale}>
<div className={cn(s.root)}>
<header className={cn(s.header, { 'shadow-magical': hasScrolled })}>
<Container>
@ -83,7 +80,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
}
/>
</div>
</CommerceProvider>
)
}

10
pages/_app.tsx
View File

@ -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>
<CommerceProvider locale={locale}>
<Layout pageProps={pageProps}>
<Component {...pageProps} />
</Layout>
</CommerceProvider>
</ManagedUIContext>
</>
)