♻️ enhan: toggle cart

:%s

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

src/components/common/Header/Header.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useModalCommon } from 'src/components/hooks'
 import { isMobile } from 'src/utils/funtion.utils'
+import { CartDrawer } from '..'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
 import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
@@ -10,14 +11,23 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
 import s from './Header.module.scss'
 interface props {
-    toggleFilter:()=>void
+    toggleFilter: () => void
 }
 
-const Header = memo(({toggleFilter}:props) => {
+const Header = memo(({ toggleFilter }: props) => {
     const headeFullRef = useRef<HTMLDivElement>(null)
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
     const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
     const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
+    const { visible: visibleCartDrawer, openModal: openCartDrawer, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
+
+    const toggleCart = () => {
+        if (visibleCartDrawer) {
+            closeCartDrawer()
+        } else {
+            openCartDrawer()
+        }
+    }
 
     const headerHeight = useMemo(() => {
         return headeFullRef.current?.offsetHeight
@@ -46,6 +56,7 @@ const Header = memo(({toggleFilter}:props) => {
                 <div className={s.menu}>
                     <HeaderMenu
                         toggleFilter={toggleFilter}
+                        toggleCart={toggleCart}
                         isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
@@ -60,6 +71,7 @@ const Header = memo(({toggleFilter}:props) => {
             })}>
                 <HeaderMenu isFull={isFullHeader}
                     toggleFilter={toggleFilter}
+                    toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
                     openModalInfo={openModalInfo} />
             </div>
@@ -67,6 +79,9 @@ const Header = memo(({toggleFilter}:props) => {
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
             <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
+            <CartDrawer
+                visible={visibleCartDrawer}
+                onClose={closeCartDrawer} />
         </>
     )
 })

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -14,11 +14,12 @@ interface Props {
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter:() => void,
+    toggleCart:() => void,
 }
 
 const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
 
-const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter }: Props) => {
+const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
     const optionMenu = useMemo(() => [
         {
@@ -81,7 +82,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter
                     <MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
                 </li>
                 <li>
-                    <button className={s.btnCart}>
+                    <button className={s.btnCart} onClick={toggleCart}>
                         <IconBuy />
                     </button>
                 </li>

src/components/common/Layout/Layout.tsx

@@ -1,10 +1,9 @@
 import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
-import { FilterProvider } from 'src/components/contexts/FilterContext'
 import { useModalCommon } from 'src/components/hooks'
 import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
-import { CartDrawer, CustomShapeSvg } from '..'
+import { CustomShapeSvg } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
 import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
@@ -18,18 +17,9 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
-    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
     const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
-
+    
-    const toggle = () => {
-        if (visibleCartDrawer) {
-            closeCartDrawer()
-        } else {
-            openModal()
-        }
-    }
     const toggleFilter = () => {
-        console.log("click")
         if (visibleFilter) {
             closeFilter()
         } else {
@@ -41,11 +31,8 @@ const Layout: FC<Props> = ({ children }) => {
                 <div className={s.mainLayout}>
                     <Header toggleFilter={toggleFilter}/>
                     <main >{children}</main>
-                    <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
+                    
                     <CustomShapeSvg/>
-                    <CartDrawer
-                        visible={visibleCartDrawer}
-                        onClose={closeCartDrawer} />
 					<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
                     <Footer />
                 </div>

src/components/common/TabCommon/components/TabItem/TabItem.tsx

@@ -1,9 +1,5 @@
 import classNames from 'classnames'
-<<<<<<< HEAD
-import React, { RefObject, useRef } from 'react'
-=======
 import React from 'react'
->>>>>>> 88f90912429447f6ae7bafa77484465965e0ee13
 import s from './TabItem.module.scss'
 
 interface TabItemProps {
@@ -32,8 +28,4 @@ const TabItem = ({
   )
 }
 
-<<<<<<< HEAD
 export default TabItem
-=======
-export default TabItem
->>>>>>> 88f90912429447f6ae7bafa77484465965e0ee13