cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Merge pull request #77 from vercel/develop

Browse Source 
Performance #3
This commit is contained in:
B 2020-11-07 19:27:36 -03:00 committed by GitHub
commit f52c780c97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 111 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -10,6 +10,7 @@ import CartItem from '../CartItem'
import s from './CartSidebarView.module.css' import s from './CartSidebarView.module.css'
const CartSidebarView: FC = () => { const CartSidebarView: FC = () => {
const { closeSidebar } = useUI()
const { data, isEmpty } = useCart() const { data, isEmpty } = useCart()
const { price: subTotal } = usePrice( const { price: subTotal } = usePrice(
data && { data && {
@ -23,7 +24,6 @@ const CartSidebarView: FC = () => {
currencyCode: data.currency.code, currencyCode: data.currency.code,
} }
) )
const { closeSidebar } = useUI()
const handleClose = () => closeSidebar() const handleClose = () => closeSidebar()
const items = data?.line_items.physical_items ?? [] const items = data?.line_items.physical_items ?? []

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

@ -10,6 +10,7 @@ import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks' import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui' import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages' import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
import { CartSidebarView } from '@components/cart'
const Loading = () => ( const Loading = () => (
<div className="w-80 h-80 flex items-center text-center justify-center p-3"> <div className="w-80 h-80 flex items-center text-center justify-center p-3">
@ -20,9 +21,7 @@ const Loading = () => (
const dynamicProps = { const dynamicProps = {
loading: () => <Loading />, loading: () => <Loading />,
} }
const CartSidebarView = dynamic(
() => import('@components/cart/CartSidebarView')
)
const LoginView = dynamic( const LoginView = dynamic(
() => import('@components/auth/LoginView'), () => import('@components/auth/LoginView'),
dynamicProps dynamicProps
@ -67,14 +66,17 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
<Navbar /> <Navbar />
<main className="fit">{children}</main> <main className="fit">{children}</main>
<Footer pages={pageProps.pages} /> <Footer pages={pageProps.pages} />
<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}

27
components/ui/Modal/Modal.tsx
View File

@ -1,11 +1,10 @@
import cn from 'classnames'
import { FC, useRef } from 'react' import { FC, useRef } from 'react'
import s from './Modal.module.css' import s from './Modal.module.css'
import { useDialog } from '@react-aria/dialog'
import { FocusScope } from '@react-aria/focus' import { FocusScope } from '@react-aria/focus'
import { Transition } from '@headlessui/react' import { Transition } from '@headlessui/react'
import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
import { Cross } from '@components/icons' import { Cross } from '@components/icons'
import { useOverlay, OverlayContainer } from '@react-aria/overlays'
import Portal from '@reach/portal'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
@ -13,17 +12,8 @@ interface Props {
onClose: () => void onClose: () => void
} }
const Modal: FC<Props> = ({ const Modal: FC<Props> = ({ children, open = false, onClose, ...props }) => {
className,
children,
open = false,
onClose,
...props
}) => {
const rootClassName = cn(s.root, className)
let ref = useRef() as React.MutableRefObject<HTMLInputElement> let ref = useRef() as React.MutableRefObject<HTMLInputElement>
let { modalProps } = useModal()
let { dialogProps } = useDialog({}, ref)
let { overlayProps } = useOverlay( let { overlayProps } = useOverlay(
{ {
isOpen: open, isOpen: open,
@ -38,7 +28,7 @@ const Modal: FC<Props> = ({
<Transition show={open}> <Transition show={open}>
<OverlayContainer> <OverlayContainer>
<FocusScope contain restoreFocus autoFocus> <FocusScope contain restoreFocus autoFocus>
<div className={rootClassName}> <div className={s.root}>
<Transition.Child <Transition.Child
enter="transition-opacity ease-linear duration-300" enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
@ -47,13 +37,7 @@ const Modal: FC<Props> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div <div className={s.modal} {...overlayProps} ref={ref}>
className={s.modal}
{...overlayProps}
{...dialogProps}
{...modalProps}
ref={ref}
>
<div className="h-7 flex items-center justify-end w-full"> <div className="h-7 flex items-center justify-end w-full">
<button <button
onClick={() => onClose()} onClick={() => onClose()}
@ -63,7 +47,6 @@ const Modal: FC<Props> = ({
<Cross className="h-6 w-6" /> <Cross className="h-6 w-6" />
</button> </button>
</div> </div>
{children} {children}
</div> </div>
</Transition.Child> </Transition.Child>

99
components/ui/Sidebar/Sidebar.tsx
View File

@ -1,22 +1,18 @@
import cn from 'classnames'
import { FC, useRef } from 'react' import { FC, useRef } from 'react'
import s from './Sidebar.module.css' import s from './Sidebar.module.css'
import { Transition } from '@headlessui/react' import { Transition } from '@headlessui/react'
import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays' import { useOverlay, OverlayContainer } from '@react-aria/overlays'
import { useDialog } from '@react-aria/dialog'
import { FocusScope } from '@react-aria/focus' import { FocusScope } from '@react-aria/focus'
import Portal from '@reach/portal'
interface Props { interface Props {
className?: string children: any
children?: any open: boolean
open?: boolean
onClose: () => void onClose: () => void
} }
const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => { const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
const rootClassName = cn(s.root, className)
const ref = useRef<HTMLDivElement>(null) const ref = useRef<HTMLDivElement>(null)
const { modalProps } = useModal()
const { overlayProps } = useOverlay( const { overlayProps } = useOverlay(
{ {
isOpen: open, isOpen: open,
@ -25,55 +21,54 @@ const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
}, },
ref ref
) )
const { dialogProps } = useDialog({}, ref)
return ( return (
<Transition show={open}> <Portal>
<OverlayContainer> <Transition show={open}>
<FocusScope contain restoreFocus autoFocus> <OverlayContainer>
<div className={rootClassName}> <FocusScope contain restoreFocus autoFocus>
<div className="absolute inset-0 overflow-hidden"> <div className={s.root}>
<Transition.Child <div className="absolute inset-0 overflow-hidden">
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div
className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
// Close the sidebar when clicking on the backdrop
onClick={onClose}
/>
</Transition.Child>
<section
className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
{...dialogProps}
{...overlayProps}
{...modalProps}
ref={ref}
>
<Transition.Child <Transition.Child
enter="transition ease-in-out duration-300 transform" enter="transition-opacity ease-linear duration-300"
enterFrom="translate-x-full" enterFrom="opacity-0"
enterTo="translate-x-0" enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform" leave="transition-opacity ease-linear duration-300"
leaveFrom="translate-x-0" leaveFrom="opacity-100"
leaveTo="translate-x-full" leaveTo="opacity-0"
> >
<div className="h-full md:w-screen md:max-w-md"> <div
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto"> className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
{children} // Close the sidebar when clicking on the backdrop
</div> onClick={onClose}
</div> />
</Transition.Child> </Transition.Child>
</section> <section
className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
{...overlayProps}
ref={ref}
>
<Transition.Child
enter="transition ease-in-out duration-300 transform"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="h-full md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
{children}
</div>
</div>
</Transition.Child>
</section>
</div>
</div> </div>
</div> </FocusScope>
</FocusScope> </OverlayContainer>
</OverlayContainer> </Transition>
</Transition> </Portal>
) )
} }

26
package.json
View File

@ -12,13 +12,23 @@
"semi": false, "semi": false,
"singleQuote": true "singleQuote": true
}, },
"next-unused": { "next-unused": {
"alias": { "alias": {
"@lib/*": ["lib/*"], "@lib/*": [
"@assets/*": ["assets/*"], "lib/*"
"@config/*": ["config/*"], ],
"@components/*": ["components/*"], "@assets/*": [
"@utils/*": ["utils/*"] "assets/*"
],
"@config/*": [
"config/*"
],
"@components/*": [
"components/*"
],
"@utils/*": [
"utils/*"
]
}, },
"debug": true, "debug": true,
"include": [ "include": [
@ -26,8 +36,7 @@
"lib", "lib",
"pages" "pages"
], ],
"exclude": [ "exclude": [],
],
"entrypoints": [ "entrypoints": [
"pages" "pages"
] ]
@ -35,6 +44,7 @@
"dependencies": { "dependencies": {
"@bigcommerce/storefront-data-hooks": "^1.0.2", "@bigcommerce/storefront-data-hooks": "^1.0.2",
"@headlessui/react": "^0.2.0", "@headlessui/react": "^0.2.0",
"@reach/portal": "^0.11.2",
"@react-aria/overlays": "^3.4.0", "@react-aria/overlays": "^3.4.0",
"@tailwindcss/ui": "^0.6.2", "@tailwindcss/ui": "^0.6.2",
"@types/lodash.throttle": "^4.1.6", "@types/lodash.throttle": "^4.1.6",

2
pages/index.tsx
View File

@ -69,7 +69,7 @@ export async function getStaticProps({
brands, brands,
pages, pages,
}, },
revalidate: 10, revalidate: 14400,
} }
} }

39
yarn.lock
View File

@ -1175,6 +1175,23 @@
dependencies: dependencies:
mkdirp "^1.0.4" mkdirp "^1.0.4"
"@reach/portal@^0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762"
integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g==
dependencies:
"@reach/utils" "0.11.2"
tslib "^2.0.0"
"@reach/utils@0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.11.2.tgz#be1f03650db56fd67a16d3fc70e5262cdb139cec"
integrity sha512-fBTolYj+rKTROXmf0zHO0rCWSvw7J0ALmYj5QxW4DmITMOH5uyRuWDWOfqohIGFbOtF/sum50WTB3tvx76d+Aw==
dependencies:
"@types/warning" "^3.0.0"
tslib "^2.0.0"
warning "^4.0.3"
"@react-aria/breadcrumbs@^3.1.1": "@react-aria/breadcrumbs@^3.1.1":
version "3.1.1" version "3.1.1"
resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.1.1.tgz#3af2e65117db495740ca0ff1c872c0fa0eb05597" resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.1.1.tgz#3af2e65117db495740ca0ff1c872c0fa0eb05597"
@ -1884,6 +1901,11 @@
"@types/prop-types" "*" "@types/prop-types" "*"
csstype "^3.0.2" csstype "^3.0.2"
"@types/warning@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
"@typescript-eslint/typescript-estree@^2.29.0": "@typescript-eslint/typescript-estree@^2.29.0":
version "2.34.0" version "2.34.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
@ -2090,11 +2112,6 @@
async-retry "1.2.3" async-retry "1.2.3"
lru-cache "5.1.1" lru-cache "5.1.1"
"@zeit/next-source-maps@^0.0.3":
version "0.0.3"
resolved "https://registry.yarnpkg.com/@zeit/next-source-maps/-/next-source-maps-0.0.3.tgz#d62e93b4f5ccdd542c8530d21f60dd2757d98e3c"
integrity sha512-gFDf7yQI8r/fdzTKJG9cp0rhKscRJWs/uebhScj8nZINT16kPTVm23JAi5EivO5pAJmHGzT1A8dwxAhTX0liNw==
abort-controller@3.0.0: abort-controller@3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392" resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@ -6543,6 +6560,11 @@ tslib@^1.8.1, tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
tsutils@^3.17.1: tsutils@^3.17.1:
version "3.17.1" version "3.17.1"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@ -6693,6 +6715,13 @@ walkdir@^0.4.1:
resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.4.1.tgz#dc119f83f4421df52e3061e514228a2db20afa39" resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.4.1.tgz#dc119f83f4421df52e3061e514228a2db20afa39"
integrity sha512-3eBwRyEln6E1MSzcxcVpQIhRG8Q1jLvEqRmCZqS3dsfXEDR/AhOF4d+jHg1qvDCpYaVRZjENPQyrVxAkQqxPgQ== integrity sha512-3eBwRyEln6E1MSzcxcVpQIhRG8Q1jLvEqRmCZqS3dsfXEDR/AhOF4d+jHg1qvDCpYaVRZjENPQyrVxAkQqxPgQ==
warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
watchpack@2.0.0-beta.13: watchpack@2.0.0-beta.13:
version "2.0.0-beta.13" version "2.0.0-beta.13"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.0.0-beta.13.tgz#9d9b0c094b8402139333e04eb6194643c8384f55" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.0.0-beta.13.tgz#9d9b0c094b8402139333e04eb6194643c8384f55"