From 115cf12529c6aaed10bd24e66e03b8614cb7504f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 7 Nov 2020 19:15:54 -0300
Subject: [PATCH 1/2] Removing useDialog, cause rerender

---
 .../cart/CartSidebarView/CartSidebarView.tsx  |   2 +-
 components/common/Layout/Layout.tsx           |   8 +-
 components/ui/Modal/Modal.tsx                 |  27 +----
 components/ui/Sidebar/Sidebar.tsx             | 100 +++++++++---------
 package.json                                  |  26 +++--
 pages/index.tsx                               |   2 +-
 yarn.lock                                     |  39 ++++++-
 7 files changed, 112 insertions(+), 92 deletions(-)

diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 0ad7b95f1..b35fdb18b 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -10,6 +10,7 @@ import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'
 
 const CartSidebarView: FC = () => {
+  const { closeSidebar } = useUI()
   const { data, isEmpty } = useCart()
   const { price: subTotal } = usePrice(
     data && {
@@ -23,7 +24,6 @@ const CartSidebarView: FC = () => {
       currencyCode: data.currency.code,
     }
   )
-  const { closeSidebar } = useUI()
   const handleClose = () => closeSidebar()
 
   const items = data?.line_items.physical_items ?? []
diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
index d53f0a740..f76a75561 100644
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@@ -10,6 +10,7 @@ import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
 import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { CartSidebarView } from '@components/cart'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
@@ -20,9 +21,7 @@ const Loading = () => (
 const dynamicProps = {
   loading: () => <Loading />,
 }
-const CartSidebarView = dynamic(
-  () => import('@components/cart/CartSidebarView')
-)
+
 const LoginView = dynamic(
   () => import('@components/auth/LoginView'),
   dynamicProps
@@ -67,14 +66,17 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Navbar />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
+
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
+
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
           {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
+
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index e31e32e91..db823fcd9 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -1,11 +1,10 @@
-import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
-import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
 import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 import { Cross } from '@components/icons'
+import { useOverlay, OverlayContainer } from '@react-aria/overlays'
+import Portal from '@reach/portal'
 interface Props {
   className?: string
   children?: any
@@ -13,17 +12,8 @@ interface Props {
   onClose: () => void
 }
 
-const Modal: FC<Props> = ({
-  className,
-  children,
-  open = false,
-  onClose,
-  ...props
-}) => {
-  const rootClassName = cn(s.root, className)
+const Modal: FC<Props> = ({ children, open = false, onClose, ...props }) => {
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  let { modalProps } = useModal()
-  let { dialogProps } = useDialog({}, ref)
   let { overlayProps } = useOverlay(
     {
       isOpen: open,
@@ -38,7 +28,7 @@ const Modal: FC<Props> = ({
     <Transition show={open}>
       <OverlayContainer>
         <FocusScope contain restoreFocus autoFocus>
-          <div className={rootClassName}>
+          <div className={s.root}>
             <Transition.Child
               enter="transition-opacity ease-linear duration-300"
               enterFrom="opacity-0"
@@ -47,13 +37,7 @@ const Modal: FC<Props> = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div
-                className={s.modal}
-                {...overlayProps}
-                {...dialogProps}
-                {...modalProps}
-                ref={ref}
-              >
+              <div className={s.modal} {...overlayProps} ref={ref}>
                 <div className="h-7 flex items-center justify-end w-full">
                   <button
                     onClick={() => onClose()}
@@ -63,7 +47,6 @@ const Modal: FC<Props> = ({
                     <Cross className="h-6 w-6" />
                   </button>
                 </div>
-
                 {children}
               </div>
             </Transition.Child>
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 4c7704c4d..3cc4920a8 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -1,22 +1,19 @@
 import cn from 'classnames'
-import { FC, useRef } from 'react'
+import { FC, useRef, useMemo } from 'react'
 import s from './Sidebar.module.css'
 import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
-import { useDialog } from '@react-aria/dialog'
+import { useOverlay, OverlayContainer } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
+import Portal from '@reach/portal'
 
 interface Props {
-  className?: string
-  children?: any
-  open?: boolean
+  children: any
+  open: boolean
   onClose: () => void
 }
 
-const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
-  const rootClassName = cn(s.root, className)
+const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
   const ref = useRef<HTMLDivElement>(null)
-  const { modalProps } = useModal()
   const { overlayProps } = useOverlay(
     {
       isOpen: open,
@@ -25,55 +22,54 @@ const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
     },
     ref
   )
-  const { dialogProps } = useDialog({}, ref)
 
   return (
-    <Transition show={open}>
-      <OverlayContainer>
-        <FocusScope contain restoreFocus autoFocus>
-          <div className={rootClassName}>
-            <div className="absolute inset-0 overflow-hidden">
-              <Transition.Child
-                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}
-              >
+    <Portal>
+      <Transition show={open}>
+        <OverlayContainer>
+          <FocusScope contain restoreFocus autoFocus>
+            <div className={s.root}>
+              <div className="absolute inset-0 overflow-hidden">
                 <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"
+                  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="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>
+                  <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>
+                <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>
-        </FocusScope>
-      </OverlayContainer>
-    </Transition>
+          </FocusScope>
+        </OverlayContainer>
+      </Transition>
+    </Portal>
   )
 }
 
diff --git a/package.json b/package.json
index 4b5569a5a..d727481bd 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,23 @@
     "semi": false,
     "singleQuote": true
   },
-    "next-unused": {
+  "next-unused": {
     "alias": {
-      "@lib/*": ["lib/*"],
-      "@assets/*": ["assets/*"],
-      "@config/*": ["config/*"],
-      "@components/*": ["components/*"],
-      "@utils/*": ["utils/*"]
+      "@lib/*": [
+        "lib/*"
+      ],
+      "@assets/*": [
+        "assets/*"
+      ],
+      "@config/*": [
+        "config/*"
+      ],
+      "@components/*": [
+        "components/*"
+      ],
+      "@utils/*": [
+        "utils/*"
+      ]
     },
     "debug": true,
     "include": [
@@ -26,8 +36,7 @@
       "lib",
       "pages"
     ],
-    "exclude": [
-    ],
+    "exclude": [],
     "entrypoints": [
       "pages"
     ]
@@ -35,6 +44,7 @@
   "dependencies": {
     "@bigcommerce/storefront-data-hooks": "^1.0.2",
     "@headlessui/react": "^0.2.0",
+    "@reach/portal": "^0.11.2",
     "@react-aria/overlays": "^3.4.0",
     "@tailwindcss/ui": "^0.6.2",
     "@types/lodash.throttle": "^4.1.6",
diff --git a/pages/index.tsx b/pages/index.tsx
index 7400f6644..49127e360 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -69,7 +69,7 @@ export async function getStaticProps({
       brands,
       pages,
     },
-    revalidate: 10,
+    revalidate: 14400,
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index fe3d64fa7..b60d7113e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1175,6 +1175,23 @@
   dependencies:
     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":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.1.1.tgz#3af2e65117db495740ca0ff1c872c0fa0eb05597"
@@ -1884,6 +1901,11 @@
     "@types/prop-types" "*"
     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":
   version "2.34.0"
   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"
     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:
   version "3.0.0"
   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"
   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:
   version "3.17.1"
   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"
   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:
   version "2.0.0-beta.13"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.0.0-beta.13.tgz#9d9b0c094b8402139333e04eb6194643c8384f55"

From f8a75b8e2596b761b7ba055124e6c2b7753b2178 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 7 Nov 2020 19:16:10 -0300
Subject: [PATCH 2/2] Removing useDialog, cause rerender

---
 components/ui/Sidebar/Sidebar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 3cc4920a8..a23992946 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -1,5 +1,4 @@
-import cn from 'classnames'
-import { FC, useRef, useMemo } from 'react'
+import { FC, useRef } from 'react'
 import s from './Sidebar.module.css'
 import { Transition } from '@headlessui/react'
 import { useOverlay, OverlayContainer } from '@react-aria/overlays'